/* Campaign Widget — kabdalis2 design system.
   view.js adds .cw to the wrapper at runtime, sets a dark photo/color
   background inline (data-background-image / data-background-color), and
   injects the full DOM. This is a full-bleed marketing BAND: every surface
   (header, cards, embedded booking-search, footer) sits on that dark bg.

   NOTE on white literals: the band background is always dark (photo or
   #365a6b/#974467 set inline by view.js), so text/borders that must read on
   the dark band use white literals via color-mix, exactly like v1. `--accent`
   / `--on-accent` are used where a token is semantically right (badges, the
   accent CTA button). Everything else is tokenised to --ink/--line/--surface
   with a warm fallback so the light card interiors track Designspråk. */

/* ---- Band shell ---------------------------------------------------------- */
.kabdalis-campaign-widget.cw{
    position:relative;
    width:100%;
    box-sizing:border-box;
    margin:24px 0;
    border-radius:var(--radius);
    overflow:hidden;
    padding:clamp(20px, 4vw, 32px);
    min-height:400px;
    color:#fff; /* light text on the dark band */
    box-shadow:var(--shadow, 0 10px 30px rgba(60,48,30,.16));
    display:flex; flex-direction:column;
}
/* Hairline inner frame + legibility overlay for photo backgrounds. */
.cw::after{
    content:''; position:absolute; inset:0; z-index:3;
    border-radius:inherit; pointer-events:none;
    border:1px solid color-mix(in srgb, #fff 10%, transparent);
}
.cw.has-background-image::before{
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    border-radius:inherit;
}
.cw.has-background-image.overlay-dark::before{
    background:color-mix(in srgb, var(--ink, #25211b) 55%, transparent);
}
.cw.has-background-image.overlay-light::before{
    background:color-mix(in srgb, #fff 45%, transparent);
}
/* Keep injected content above the overlay/frame layers. */
.cw > *{ position:relative; z-index:2; }

/* ---- Loading state (view.js swaps band / grid for this) ------------------ */
.cw .campaign-widget-loading{
    padding:40px 20px; text-align:center;
    color:color-mix(in srgb, #fff 90%, transparent);
    font-style:italic; font-size:.95rem;
}

/* ---- Header -------------------------------------------------------------- */
.cw .campaign-widget-header{
    position:relative; text-align:center;
    margin-bottom:clamp(20px, 3vw, 32px);
}
.cw .campaign-widget-title-wrapper{
    display:flex; align-items:center; justify-content:center;
    gap:16px; flex-wrap:wrap; margin-bottom:14px;
}
.cw .campaign-widget-title{
    display:block; margin:0;
    font-family:var(--font-display); font-weight:var(--display-w);
    letter-spacing:var(--display-ls);
    font-size:clamp(1.6rem, 3.4vw, 2.4rem);
    line-height:1.15; color:#fff; text-wrap:balance;
}
.cw .campaign-badge{
    display:inline-flex; align-items:center; flex-shrink:0;
    padding:8px 18px; border-radius:999px;
    background:var(--accent, #9c3a52); color:var(--on-accent, #fff);
    font-family:var(--font-mono); font-weight:700; font-size:.75rem;
    letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
    box-shadow:0 4px 12px color-mix(in srgb, var(--accent, #9c3a52) 30%, transparent);
}
.cw .campaign-widget-description{
    margin:0 auto; max-width:56ch;
    font-size:clamp(1rem, 1.6vw, 1.12rem); line-height:1.6;
    color:color-mix(in srgb, #fff 90%, transparent);
}

/* ---- Booking CTA (FULL-WIDTH glass panel, not a pill) -------------------- */
/* Collision fix: view.js uses .campaign-widget-cta as the search CONTAINER,
   so it must be a block that spans the band — never an inline pill. */
.cw .campaign-widget-cta{
    display:block; width:100%;
    margin:0 0 clamp(24px, 4vw, 40px);
}
.cw .campaign-widget-cta-container{
    padding:clamp(18px, 3vw, 28px);
    border-radius:var(--radius);
    background:color-mix(in srgb, #fff 10%, transparent);
    border:1px solid color-mix(in srgb, #fff 20%, transparent);
    box-shadow:0 10px 28px color-mix(in srgb, var(--ink, #25211b) 22%, transparent);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.cw .campaign-widget-cta-header{ display:none; } /* view.js leaves this empty */

/* Embedded booking-search: booking-search's own view.js adds .bs.b-bookbar and
   styles the inner form as a light --surface panel. Here we just make sure it
   sits full-width inside the glass container with no extra chrome. */
.cw .campaign-widget-cta .kabdalis-booking-search{
    display:block; width:100%; max-width:100%;
    background:transparent; padding:0; margin:0;
}
/* Round the light inner form to match the glass panel + card language. */
.cw .campaign-widget-cta .booking-search-form{
    border-radius:var(--radius-sm);
    overflow:hidden;
}

/* ---- Featured accommodations block --------------------------------------- */
.cw .campaign-widget-featured{ position:relative; margin-bottom:clamp(20px, 3vw, 32px); }

.cw .featured-accommodations-header{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; margin-bottom:20px; width:100%;
}
.cw .featured-accommodations-title{
    margin:0; color:#fff;
    font-family:var(--font-display); font-weight:var(--display-w);
    letter-spacing:var(--display-ls); font-size:1.25rem;
}
/* Frosted-glass "ghost" controls on the dark band. */
.cw .featured-accommodations-refresh{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    flex-shrink:0; min-height:40px; padding:10px 18px;
    border-radius:999px; cursor:pointer;
    background:color-mix(in srgb, #fff 14%, transparent);
    color:#fff; font-weight:600; font-size:.86rem;
    border:1px solid color-mix(in srgb, #fff 28%, transparent);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    transition:background var(--t-fast, .16s) ease, border-color var(--t-fast, .16s) ease, transform var(--t-fast, .16s) ease;
}
.cw .featured-accommodations-refresh:hover{
    background:color-mix(in srgb, #fff 24%, transparent);
    border-color:color-mix(in srgb, #fff 44%, transparent);
    transform:translateY(-1px);
}
.cw .featured-accommodations-refresh:active{ transform:scale(.98); }
.cw .featured-accommodations-refresh:disabled{ opacity:.6; cursor:not-allowed; }
.cw .featured-accommodations-refresh i{
    display:inline-block; font-size:.85rem;
    transition:transform var(--t-med, .26s) ease;
}
.cw .featured-accommodations-refresh.is-loading{ cursor:wait; }
.cw .featured-accommodations-refresh.is-loading i{ animation:cwSpin 1s linear infinite; }
@keyframes cwSpin{ to{ transform:rotate(360deg); } }

.cw .featured-accommodations-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:20px; width:100%; margin:0;
}
/* Grid-whitespace guard (view.js emits items with no gaps between them). */
.cw .featured-accommodations-grid > *{ margin:0; min-width:0; }

/* ---- Accommodation card (glass card on the dark band) -------------------- */
.cw .featured-accommodation-card{
    display:flex; flex-direction:column; overflow:hidden;
    border-radius:var(--radius);
    background:color-mix(in srgb, #fff 8%, transparent);
    border:1px solid color-mix(in srgb, #fff 15%, transparent);
    box-shadow:0 4px 14px color-mix(in srgb, var(--ink, #25211b) 18%, transparent);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    transition:transform var(--t-med, .26s) var(--ease-out, ease), border-color var(--t-med, .26s) ease, background var(--t-med, .26s) ease;
}
.cw .featured-accommodation-card:hover{
    transform:translateY(-4px);
    border-color:color-mix(in srgb, #fff 28%, transparent);
    background:color-mix(in srgb, #fff 12%, transparent);
}
.cw .accommodation-link{
    display:flex; flex-direction:column; flex:1; height:100%;
    text-decoration:none; color:inherit;
}
.cw .accommodation-photo{
    position:relative; width:100%; height:220px; overflow:hidden;
    background:color-mix(in srgb, var(--accent, #9c3a52) 25%, transparent);
}
.cw .accommodation-photo img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform var(--t-slow, .5s) var(--ease-out, ease);
}
.cw .featured-accommodation-card:hover .accommodation-photo img{ transform:scale(1.06); }
.cw .accommodation-content{
    display:flex; flex-direction:column; flex:1; min-height:0;
    padding:20px;
}
/* Category chip — light pill with accent text, reads on the dark card. */
.cw .accommodation-category{
    display:inline-block; align-self:flex-start; margin-bottom:10px;
    padding:6px 12px; border-radius:999px;
    background:color-mix(in srgb, #fff 92%, transparent);
    color:var(--accent, #9c3a52);
    font-family:var(--font-mono); font-size:.66rem; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase;
}
.cw .accommodation-name{
    display:block; margin:0 0 10px;
    font-size:1.15rem; font-weight:600; line-height:1.35; color:#fff;
}
.cw .accommodation-beds,
.cw .accommodation-cleaning{
    display:flex; align-items:center; gap:6px; margin-bottom:10px;
    font-size:.88rem; font-weight:500;
    color:color-mix(in srgb, #fff 85%, transparent);
}
.cw .accommodation-beds i,
.cw .accommodation-cleaning i{ font-size:.88rem; opacity:.8; }
.cw .accommodation-dates{
    display:flex; align-items:center; gap:8px; margin-bottom:16px;
    font-size:.88rem; color:color-mix(in srgb, #fff 85%, transparent);
}
.cw .accommodation-dates::before{ content:'📅'; font-size:1rem; opacity:.7; }
.cw .accommodation-price{
    display:flex; flex-direction:column; gap:6px; margin-top:auto;
    padding-top:16px;
    border-top:1px solid color-mix(in srgb, #fff 12%, transparent);
}
.cw .price-original{
    font-size:.88rem; font-weight:400; text-decoration:line-through;
    color:color-mix(in srgb, #fff 55%, transparent);
}
.cw .price-discounted,
.cw .price-single{
    font-size:1.6rem; font-weight:700; line-height:1.2;
    letter-spacing:-.01em; color:#fff;
}
.cw .price-savings{
    display:inline-block; width:fit-content; margin-top:4px;
    padding:4px 10px; border-radius:999px;
    font-size:.78rem; font-weight:600;
    background:color-mix(in srgb, var(--accent, #9c3a52) 28%, transparent);
    color:#fff;
}

/* ---- Featured disclaimer + footer ---------------------------------------- */
.cw .featured-disclaimer{
    margin-top:20px; padding:12px 20px; text-align:center;
    border-radius:var(--radius-sm); line-height:1.6;
    font-size:.82rem;
    color:color-mix(in srgb, #fff 78%, transparent);
    background:color-mix(in srgb, #fff 6%, transparent);
    border:1px solid color-mix(in srgb, #fff 12%, transparent);
}
.cw .featured-accommodations-footer{ margin-top:clamp(20px, 3vw, 32px); text-align:center; }
/* Accent "book more" button — the one filled action on the band. */
.cw .featured-accommodations-view-more{
    display:inline-flex; align-items:center; gap:.55em;
    padding:14px 32px; border-radius:999px;
    background:var(--accent, #9c3a52); color:var(--on-accent, #fff);
    font-weight:600; font-size:1rem; text-decoration:none; cursor:pointer;
    border:none;
    box-shadow:0 4px 16px color-mix(in srgb, var(--accent, #9c3a52) 30%, transparent);
    transition:filter var(--t-fast, .16s) ease, transform var(--t-fast, .16s) ease;
}
.cw .featured-accommodations-view-more:hover,
.cw .featured-accommodations-view-more:visited{
    color:var(--on-accent, #fff); text-decoration:none;
}
.cw .featured-accommodations-view-more:hover{ filter:brightness(1.06); transform:translateY(-2px); }
.cw .featured-accommodations-view-more:active{ transform:translateY(0); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:768px){
    .cw .campaign-widget-title-wrapper{ flex-direction:column; gap:12px; }
    .cw .featured-accommodations-grid{ grid-template-columns:1fr; }
    .cw .accommodation-photo{ height:200px; }
    .cw .featured-accommodations-refresh{
        width:40px; height:40px; min-width:40px; padding:10px; border-radius:50%;
    }
}