/**
 * Next Availability Card — oubkw-next-availability.css
 *
 * Standalone stylesheet for the [oubkw_next_availability] shortcode.
 * Uses plugin CSS variables (--oubkw-primary etc.) when available,
 * with sensible defaults so the card still looks good on sites that
 * don't render the main booking widget.
 *
 * @package OunekOS_Booking_Wellness
 * @since   2.1.0
 */

/* ── Root defaults (overridden by oubkw-public.css variables) ────── */
.oubkw-na-card {
    --oubkw-na-primary:     var(--oubkw-primary,    #8B5E3C);
    --oubkw-na-secondary:   var(--oubkw-secondary,  #C9956A);
    --oubkw-na-text:        var(--oubkw-text,        #2C1F14);
    --oubkw-na-bg:          var(--oubkw-card-bg,     #FFFFFF);
    --oubkw-na-border:      var(--oubkw-border,      #E8DDD6);
    --oubkw-na-muted:       var(--oubkw-muted,       #8A7468);
    --oubkw-na-success:     var(--oubkw-color-success,#15803d);
    --oubkw-na-radius:      14px;
    --oubkw-na-shadow:      0 4px 24px rgba(139, 94, 60, 0.12);
    --oubkw-na-badge-bg:    rgba(139, 94, 60, 0.10);
}

/* ── Card container ──────────────────────────────────────────────── */
.oubkw-na-card {
    background:    var(--oubkw-na-bg);
    border:        1px solid var(--oubkw-na-border);
    border-radius: var(--oubkw-na-radius);
    box-shadow:    var(--oubkw-na-shadow);
    padding:       1.5rem 1.75rem;
    max-width:     400px;
    font-family:   inherit;
    color:         var(--oubkw-na-text);
    position:      relative;
    overflow:      hidden;
}

/* Decorative top accent bar */
.oubkw-na-card::before {
    content:       '';
    position:      absolute;
    top:           0;
    left:          0;
    right:         0;
    height:        4px;
    background:    var(--oubkw-na-primary);
    border-radius: var(--oubkw-na-radius) var(--oubkw-na-radius) 0 0;
}

/* ── Header badge ─────────────────────────────────────────────────── */
.oubkw-na-header {
    margin-bottom: 1rem;
}

.oubkw-na-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            0.45rem;
    background:     var(--oubkw-na-badge-bg);
    color:          var(--oubkw-na-primary);
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding:        0.3rem 0.75rem;
    border-radius:  50px;
    border:         1px solid rgba(139, 94, 60, 0.18);
}

/* Pulsing live dot */
.oubkw-na-pulse-dot {
    font-size:   0.45rem;
    color:       var(--oubkw-na-success);
    animation:   oubkw-na-pulse 1.8s ease-in-out infinite;
}

@keyframes oubkw-na-pulse {
    0%, 100% { opacity: 1;    transform: scale(1);    }
    50%       { opacity: 0.4; transform: scale(1.35); }
}

/* ── Date + time block ───────────────────────────────────────────── */
.oubkw-na-datetime {
    margin-bottom: 1.1rem;
}

.oubkw-na-date-label {
    font-size:   1.25rem;
    font-weight: 700;
    color:       var(--oubkw-na-text);
    line-height: 1.2;
    margin-bottom: 0.35rem;
}

.oubkw-na-time-row {
    display:     flex;
    align-items: baseline;
    gap:         0.6rem;
}

.oubkw-na-time {
    font-size:   2rem;
    font-weight: 800;
    color:       var(--oubkw-na-primary);
    line-height: 1;
}

.oubkw-na-period {
    font-size:   0.82rem;
    font-weight: 500;
    color:       var(--oubkw-na-muted);
    text-transform: capitalize;
}

/* ── Featured service row ────────────────────────────────────────── */
.oubkw-na-service {
    display:       flex;
    align-items:   flex-start;
    gap:           0.75rem;
    background:    linear-gradient(135deg, rgba(139,94,60,0.06) 0%, rgba(201,149,106,0.06) 100%);
    border:        1px solid var(--oubkw-na-border);
    border-radius: 10px;
    padding:       0.65rem 0.9rem;
    margin-bottom: 1rem;
}

/* Thumbnail — square image or emoji fallback */
.oubkw-na-service-thumb {
    width:          52px;
    height:         52px;
    border-radius:  8px;
    flex-shrink:    0;
    overflow:       hidden;
    background:     var(--oubkw-na-border);
    display:        flex;
    align-items:    center;
    justify-content:center;
    font-size:      1.6rem;
    line-height:    1;
}

.oubkw-na-service-thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.oubkw-na-service-emoji-inner {
    font-size:   1.55rem;
    line-height: 1;
}

.oubkw-na-service-info {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
    min-width:      0;
    flex:           1;
}

/* "Best-seller" badge — shown above the name only when the featured service
   is genuinely starred. Gold pill matches the booking widget's featured ribbon
   (#C9A227) so the two surfaces feel consistent. White text on a gold fill,
   so no primary colour is applied to text. */
.oubkw-na-featured-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            0.3rem;
    align-self:     flex-start;
    background:     #C9A227;
    color:          #ffffff;
    font-size:      0.6rem;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height:    1;
    padding:        0.24rem 0.5rem;
    border-radius:  50px;
    margin-bottom:  0.15rem;
    box-shadow:     0 1px 4px rgba(201, 162, 39, 0.35);
}

.oubkw-na-featured-badge i {
    font-size: 0.62rem;
}

.oubkw-na-service-name {
    font-size:     0.92rem;
    font-weight:   700;
    color:         var(--oubkw-na-text);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.oubkw-na-service-meta {
    font-size:  0.78rem;
    color:      var(--oubkw-na-muted);
}

.oubkw-na-price {
    font-weight: 600;
    /* Use the contrast-safe price color so the amount stays legible
       regardless of what primary colour the admin has chosen. */
    color: var(--oubkw-price-color, var(--oubkw-na-primary));
}

/* ── Description toggle (<details>/<summary>) ────────────────────── */
.oubkw-na-desc {
    margin-top: 0.45rem;
}

.oubkw-na-desc[open] .oubkw-na-desc-chevron {
    transform: rotate(180deg);
}

.oubkw-na-desc-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            0.35rem;
    list-style:     none; /* hide the native triangle on Webkit */
    cursor:         pointer;
    font-size:      0.75rem;
    font-weight:    600;
    color:          var(--oubkw-na-primary);
    padding:        0.2rem 0.55rem;
    border:         1px solid rgba(139, 94, 60, 0.25);
    border-radius:  20px;
    background:     rgba(139, 94, 60, 0.06);
    transition:     background 0.15s ease, border-color 0.15s ease;
    user-select:    none;
}

/* Hide the default disclosure triangle in all browsers */
.oubkw-na-desc-btn::-webkit-details-marker { display: none; }
.oubkw-na-desc-btn::marker               { display: none; content: ''; }

.oubkw-na-desc-btn:hover {
    background:    rgba(139, 94, 60, 0.12);
    border-color:  rgba(139, 94, 60, 0.4);
}

.oubkw-na-desc-chevron {
    font-size:  0.65rem;
    transition: transform 0.2s ease;
    margin-left: 1px;
}

.oubkw-na-desc-text {
    font-size:   0.78rem;
    line-height: 1.55;
    color:       var(--oubkw-na-muted);
    margin:      0.5rem 0 0;
    padding:     0.6rem 0.75rem;
    background:  #fff;
    border:      1px solid var(--oubkw-na-border);
    border-radius: 8px;
    /* Clamp long descriptions at ~4 lines; let the user scroll if needed */
    max-height:  7.5rem;
    overflow-y:  auto;
}

/* ── Disclaimer ──────────────────────────────────────────────────── */
.oubkw-na-disclaimer {
    font-size:     0.75rem;
    color:         var(--oubkw-na-muted);
    line-height:   1.45;
    margin-bottom: 1.1rem;
    padding:       0.5rem 0.75rem;
    background:    rgba(139, 94, 60, 0.04);
    border-left:   3px solid var(--oubkw-na-secondary);
    border-radius: 0 6px 6px 0;
}

/* ── CTA button ──────────────────────────────────────────────────── */
.oubkw-na-cta {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    padding:         0.7rem 1rem;
    background:      var(--oubkw-na-primary);
    color:           #ffffff !important;
    font-size:       0.9rem;
    font-weight:     700;
    text-decoration: none !important;
    border-radius:   10px;
    border:          none;
    transition:      opacity 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
    box-shadow:      0 3px 12px rgba(139, 94, 60, 0.28);
    cursor:          pointer;
}

.oubkw-na-cta:hover,
.oubkw-na-cta:focus {
    opacity:    0.88;
    transform:  translateY(-1px);
    box-shadow: 0 6px 18px rgba(139, 94, 60, 0.36);
    color:      #ffffff !important;
}

.oubkw-na-cta:active {
    opacity:    1;
    transform:  translateY(0);
    box-shadow: 0 2px 8px rgba(139, 94, 60, 0.22);
}

/* ── Empty state ─────────────────────────────────────────────────── */
.oubkw-na-card--empty {
    text-align: center;
    padding:    2rem 1.5rem;
}

.oubkw-na-empty-icon {
    font-size:     2.5rem;
    color:         var(--oubkw-na-border);
    margin-bottom: 0.75rem;
}

.oubkw-na-empty-text {
    font-size:  0.88rem;
    color:      var(--oubkw-na-muted);
    line-height: 1.5;
    margin:     0;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .oubkw-na-card {
        padding: 1.25rem 1.1rem;
    }

    .oubkw-na-time {
        font-size: 1.65rem;
    }

    .oubkw-na-date-label {
        font-size: 1.05rem;
    }
}