/* ==========================================================================
   Sidebar Widget — Cosmetic Contact & Booking
   --------------------------------------------------------------------------
   Figma reference: node 432:1782.
   Single card: Book Online button + phone + SMS + address rows.
   Button colour uses --azuri-sidebar-accent (pink on cosmetic pages).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Widget wrapper — strip GeneratePress defaults
   -------------------------------------------------------------------------- */
.azuri-cosm-contact-widget.widget {
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Card shell
   -------------------------------------------------------------------------- */
.azuri-cosm-contact__card {
	background:    var(--azuri-color-white);
	border:        0.5px solid #deeaec;
	border-radius: 14px;
	overflow:      hidden;
	display:       flex;
	flex-direction: column;
}

/* --------------------------------------------------------------------------
   Book Online button — full width, flush to card bottom & sides.
   border-radius:0 — the card's overflow:hidden + border-radius:14px
   clips the button's corners automatically. No side or bottom gaps.
   -------------------------------------------------------------------------- */
.azuri-cosm-contact__btn {
	align-items:     center;
	background:      var(--azuri-sidebar-accent, var(--azuri-color-teal));
	border:          none;
	border-radius:   0;
	box-sizing:      border-box;
	color:           var(--azuri-color-white);
	cursor:          pointer;
	display:         flex;
	font-family:     var(--azuri-font-family-base);
	font-size:       var(--azuri-font-size-sm, 14px);
	font-weight:     var(--azuri-font-weight-medium);
	height:          48px;
	justify-content: center;
	letter-spacing:  -0.02rem;
	margin:          var(--azuri-space-5) 0 0 0; /* gap above only — no sides or bottom */
	text-align:      center;
	text-decoration: none;
	transition:      background-color 0.2s ease;
	width:           100%;
}

.azuri-cosm-contact__btn:hover,
.azuri-cosm-contact__btn:focus-visible {
	background: var(--azuri-sidebar-accent-dark, var(--azuri-color-teal-700));
	color:      var(--azuri-color-white);
}

.azuri-cosm-contact__btn:focus-visible {
	outline:        2px solid var(--azuri-sidebar-accent, var(--azuri-color-teal));
	outline-offset: -3px;
}

/* --------------------------------------------------------------------------
   Contact rows list
   -------------------------------------------------------------------------- */
.azuri-cosm-contact__list {
	display:        flex;
	flex-direction: column;
	list-style:     none;
	margin:         0;
	padding:        var(--azuri-space-5) var(--azuri-space-6) 0; /* 20px 24px — button provides bottom spacing */
}

/* Individual row */
.azuri-cosm-contact__item {
	align-items:   flex-start;
	border-bottom: 1px solid #f5f9fa;
	display:       flex;
	gap:           var(--azuri-space-4); /* 16px */
	padding:       var(--azuri-space-4) 0;
}

.azuri-cosm-contact__item--last {
	border-bottom:  none;
	padding-bottom: 0; /* button provides the bottom spacing via its own height */
}

/* Icon — inherits accent colour */
.azuri-cosm-contact__icon {
	color:       var(--azuri-sidebar-accent, var(--azuri-color-teal));
	flex-shrink: 0;
	line-height: 1;
	margin-top:  2px; /* optical alignment with meta label */
}

.azuri-cosm-contact__icon svg {
	display: block;
}

/* Content column */
.azuri-cosm-contact__content {
	display:        flex;
	flex-direction: column;
	gap:            3px;
	min-width:      0;
}

/* Small grey label ("Phone", "Send us a text", "Address") */
.azuri-cosm-contact__meta {
	color:          #9aabb8;
	display:        block;
	font-family:    var(--azuri-font-family-base);
	font-size:      12px;
	font-weight:    var(--azuri-font-weight-regular);
	line-height:    1.4;
}

/* Value — number or address text */
.azuri-cosm-contact__value {
	color:          var(--azuri-color-ink);
	font-family:    var(--azuri-font-family-base);
	font-size:      14px;
	font-weight:    var(--azuri-font-weight-medium);
	letter-spacing: -0.02rem;
	line-height:    1.5;
	text-decoration: none;
}

a.azuri-cosm-contact__value:hover {
	color: var(--azuri-sidebar-accent, var(--azuri-color-teal));
}

.azuri-cosm-contact__value--address {
	font-weight: var(--azuri-font-weight-regular);
	font-size:   13px;
}