/*
 * Umrah2Go — packages.css v4
 * Covers: card grid, archive+filters, single v3 (tabbed gallery), booking form,
 *         agent profile, agent dashboard, v2 card design
 * Inherits tokens from u2g-tokens.css
 * File: assets/css/packages.css
 */

/* ─────────────────────────────────────────────────────────────
   PACKAGE CARD GRID
───────────────────────────────────────────────────────────── */
.u2g-pkg-grid { display:grid; gap:22px; }
.u2g-pkg-grid--1col { grid-template-columns:1fr; }
.u2g-pkg-grid--2col { grid-template-columns:repeat(2,1fr); }
.u2g-pkg-grid--3col { grid-template-columns:repeat(3,1fr); }
.u2g-pkg-grid--4col { grid-template-columns:repeat(4,1fr); }

/* ─────────────────────────────────────────────────────────────
   PACKAGE CARD — v2
───────────────────────────────────────────────────────────── */
.u2g-pkg-card {
    background:#fff; border:1.5px solid var(--u2g-border); border-radius:14px;
    overflow:hidden; display:flex; flex-direction:column;
    transition:box-shadow .25s ease, border-color .25s ease;
}
.u2g-pkg-card:hover { box-shadow:0 8px 28px rgba(0,0,0,.08); border-color:rgba(30,150,60,.25); }

.u2g-pkg-card__img-link { display:block; text-decoration:none; position:relative; overflow:hidden; }
.u2g-pkg-card__img {
    height:192px; background-size:cover; background-position:center; background-color:var(--u2g-bg);
    transition:transform .4s ease;
}
.u2g-pkg-card:hover .u2g-pkg-card__img { transform:scale(1.03); }
.u2g-pkg-card__img--empty {
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, #f0f7f1 0%, #e8f5e9 100%); color:var(--u2g-green);
}

.u2g-pkg-card__img-badges { position:absolute; top:10px; left:10px; display:flex; gap:5px; z-index:2; }
.u2g-pkg-card__badge {
    font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px;
    backdrop-filter:blur(6px); letter-spacing:.03em;
}
.u2g-pkg-card__badge--sold { background:rgba(220,38,38,.85); color:#fff; }
.u2g-pkg-card__badge--urgent { background:rgba(234,88,12,.85); color:#fff; animation: u2g-pulse 2s ease-in-out infinite; }
.u2g-pkg-card__badge--cat { background:rgba(255,255,255,.88); color:var(--cat-c, #374151); border:1px solid rgba(0,0,0,.08); }

/* ── Package type badges (Flights Included / Land Only) ─────────────── */
.u2g-pkg-type-badge {
    display:inline-flex; align-items:center; gap:4px;
    font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px;
    letter-spacing:.03em; line-height:1.4; white-space:nowrap;
    backdrop-filter:blur(6px);
}
.u2g-pkg-type-badge--flights {
    background: rgba(13,107,53,.90); /* deep green */
    color:#fff;
}
.u2g-pkg-type-badge--land {
    background: rgba(45,95,138,.90); /* deep blue */
    color:#fff;
}

@keyframes u2g-pulse { 0%,100%{opacity:1} 50%{opacity:.7} }

.u2g-pkg-card__agency {
    display:flex; align-items:center; gap:7px; padding:9px 14px;
    border-bottom:1px solid var(--u2g-border); background:var(--u2g-bg);
}
.u2g-pkg-card__agency-logo { width:22px; height:22px; object-fit:contain; border-radius:4px; flex-shrink:0; }
.u2g-pkg-card__agency-init {
    width:22px; height:22px; border-radius:4px; background:var(--u2g-green); color:#fff;
    font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.u2g-pkg-card__agency-name { font-size:11px; font-weight:600; color:var(--u2g-mid); text-decoration:none; }
.u2g-pkg-card__agency-name:hover { color:var(--u2g-green); }
.u2g-pkg-card__verified { color:var(--u2g-green); display:flex; align-items:center; }
.u2g-pkg-card__agent-rating { font-size:11px; font-weight:700; color:#E5A100; margin-left:auto; }

.u2g-pkg-card__body { padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; flex:1; }
.u2g-pkg-card__head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.u2g-pkg-card__title { font-size:14px; font-weight:800; margin:0; line-height:1.35; color:var(--u2g-dark); flex:1; }
.u2g-pkg-card__title a { color:inherit; text-decoration:none; }
.u2g-pkg-card__title a:hover { color:var(--u2g-green); }
.u2g-pkg-card__price { text-align:right; flex-shrink:0; min-width:0; }
.u2g-pkg-card__price strong { display:block; font-size:18px; font-weight:800; color:var(--u2g-dark); letter-spacing:-0.02em; line-height:1.1; }
.u2g-pkg-card__price-from { font-size:10px; color:var(--u2g-muted); display:block; }
.u2g-pkg-card__price-pp { font-size:10px; color:var(--u2g-muted); display:block; }

.u2g-pkg-card__meta { display:flex; flex-wrap:wrap; gap:0; align-items:center; }
.u2g-pkg-card__meta-item {
    display:inline-flex; align-items:center; gap:3px;
    font-size:11px; color:var(--u2g-muted); font-weight:500;
    padding:0 8px; position:relative;
}
.u2g-pkg-card__meta-item:first-child { padding-left:0; }
.u2g-pkg-card__meta-item:not(:last-child)::after { content:'·'; position:absolute; right:-2px; color:var(--u2g-lighter); }
.u2g-pkg-card__meta-item .u2g-icon { color:var(--u2g-lighter); }
.u2g-pkg-card__meta-seats.is-low { color:var(--u2g-danger); font-weight:700; }
.u2g-pkg-card__meta-seats.is-low .u2g-icon { color:var(--u2g-danger); }

.u2g-pkg-card__dates { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--u2g-muted); }
.u2g-pkg-card__date-arrow { color:var(--u2g-green); font-weight:700; margin:0 2px; }

.u2g-pkg-card__hotels {
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    background:var(--u2g-bg); border-radius:8px; padding:8px 10px;
    border:1px solid var(--u2g-border);
}
.u2g-pkg-card__hotel { display:flex; flex-direction:column; gap:1px; }
.u2g-pkg-card__hotel + .u2g-pkg-card__hotel { border-left:1px solid var(--u2g-border); padding-left:8px; }
.u2g-pkg-card__hotel-city { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--u2g-green); }
.u2g-pkg-card__hotel-name { font-size:11px; font-weight:600; color:var(--u2g-dark); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.u2g-pkg-card__hotel-detail { display:flex; align-items:center; gap:4px; }
.u2g-pkg-card__hotel-stars { color:#E5A100; font-size:9px; letter-spacing:1px; }
.u2g-pkg-card__hotel-n { font-size:10px; font-weight:700; color:var(--u2g-muted); background:var(--u2g-border); padding:1px 5px; border-radius:4px; }

.u2g-pkg-card__services { display:flex; flex-wrap:wrap; gap:4px; }
.u2g-pkg-card__svc {
    font-size:10px; font-weight:600; padding:2px 7px; border-radius:20px;
    background:var(--u2g-bg); color:var(--u2g-lighter); border:1px solid var(--u2g-border);
}
.u2g-pkg-card__svc.is-yes { background:var(--u2g-green-bg); color:var(--u2g-green); border-color:var(--u2g-green-border); }

.u2g-pkg-card__cta {
    display:flex; align-items:center; justify-content:center;
    padding:10px; background:var(--u2g-green); color:#fff;
    font-size:13px; font-weight:700; border-radius:9px; text-decoration:none;
    transition:background .18s; margin-top:auto;
}
.u2g-pkg-card__cta:hover { background:var(--u2g-green-dark); color:#fff; }
.u2g-pkg-card__cta--sold { background:var(--u2g-border); color:var(--u2g-muted); cursor:not-allowed; }
.u2g-pkg-card__cta--sold:hover { background:var(--u2g-border); color:var(--u2g-muted); }

.u2g-pkg-empty { text-align:center; padding:60px 20px; color:var(--u2g-muted); }
.u2g-pkg-empty svg { display:block; margin:0 auto 16px; }

/* ─────────────────────────────────────────────────────────────
   CUSTOM PACKAGE CTA CARD
───────────────────────────────────────────────────────────── */
/* ── Custom Package Card ─────────────────────────────────────── */
.u2g-pkg-card--custom {
    border-style: dashed;
    border-color: var(--u2g-green-border);
    background: linear-gradient(170deg, #fff 0%, var(--u2g-green-bg) 100%);
    text-align: center;
    justify-content: center;
    min-height: 280px;
}
.u2g-pkg-card--custom:hover {
    border-color: var(--u2g-green);
    box-shadow: 0 8px 28px rgba(30,150,60,.10);
}

.u2g-pkg-card--custom__icon-area {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px 8px;
}
.u2g-pkg-card--custom__icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--u2g-green-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--u2g-green-dark);
    box-shadow: 0 2px 8px rgba(30,150,60,.10);
    transition: transform var(--u2g-transition), box-shadow var(--u2g-transition);
}
.u2g-pkg-card--custom:hover .u2g-pkg-card--custom__icon-circle {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(30,150,60,.18);
}

.u2g-pkg-card--custom__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 8px 20px 20px;
}
.u2g-pkg-card--custom__title {
    font-size: 16px;
    font-weight: 800;
    color: var(--u2g-dark);
    margin: 0;
    letter-spacing: -0.01em;
}
.u2g-pkg-card--custom__desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--u2g-muted);
    margin: 0;
    max-width: 260px;
}

/* CTA — outlined variant to differ from filled green "View Details" */
.u2g-pkg-card--custom__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 22px;
    background: #fff;
    color: var(--u2g-green-dark);
    font-size: 13px;
    font-weight: 700;
    border: 1.5px solid var(--u2g-green);
    border-radius: 9px;
    text-decoration: none;
    transition: background var(--u2g-transition), color var(--u2g-transition), border-color var(--u2g-transition);
    margin-top: auto;
}
.u2g-pkg-card--custom__cta:hover {
    background: var(--u2g-green);
    color: #fff;
    border-color: var(--u2g-green);
}
.u2g-pkg-card--custom__cta svg {
    transition: transform var(--u2g-transition);
}
.u2g-pkg-card--custom__cta:hover svg {
    transform: translateX(3px);
}

/* ─────────────────────────────────────────────────────────────
   ARCHIVE PAGE
───────────────────────────────────────────────────────────── */
.u2g-pkg-arch-wrap { width:100%; max-width:1240px; margin:0 auto; padding:0 20px 60px; box-sizing:border-box; }
.u2g-pkg-arch-hero { text-align:center; padding:48px 20px 36px; }
.u2g-pkg-arch-title { font-size:34px; font-weight:800; color:var(--u2g-dark); margin:0 0 10px; letter-spacing:-0.02em; }
.u2g-pkg-arch-sub { font-size:15px; color:var(--u2g-muted); margin:0; }
.u2g-pkg-arch-layout { display:grid; grid-template-columns:220px 1fr; gap:24px; align-items:start; }

.u2g-pkg-filters { background:#fff; border:1.5px solid var(--u2g-border); border-radius:14px; padding:16px; position:sticky; top:20px; font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.u2g-pkg-filter-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:8px; }
.u2g-pkg-filter-heading { font-size:14px; font-weight:800; margin:0; white-space:nowrap; }
.u2g-pkg-filter-clear { font-size:12px; color:var(--u2g-danger); text-decoration:none; font-weight:600; }
.u2g-pkg-filter-block { margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--u2g-border); }
.u2g-pkg-filter-block:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.u2g-pkg-filter-title { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--u2g-muted); margin:0 0 10px; }
.u2g-pkg-filter-radio { display:flex; align-items:center; gap:8px; font-size:13px; padding:4px 0; cursor:pointer; color:var(--u2g-mid); }
.u2g-pkg-filter-radio input { accent-color:var(--u2g-green); }
.u2g-pkg-filter-select { width:100%; padding:8px 10px; border:1.5px solid var(--u2g-border); border-radius:8px; font-size:13px; background:#fff; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; }
.u2g-pkg-filter-select:focus { border-color:var(--u2g-green); outline:none; }
.u2g-pkg-filter-btn { width:100%; padding:10px; background:var(--u2g-green); color:#fff; border:none; border-radius:9px; font-size:14px; font-weight:700; cursor:pointer; margin-top:6px; transition:background .15s; }
.u2g-pkg-filter-btn:hover { background:var(--u2g-green-dark); }

.u2g-pkg-filter-stars-row { display:flex; gap:6px; flex-wrap:wrap; }
.u2g-pkg-filter-star-btn { position:relative; padding:4px 9px; border:1.5px solid var(--u2g-border); border-radius:20px; font-size:11px; cursor:pointer; color:var(--u2g-mid); transition:all .15s; white-space:nowrap; letter-spacing:.01em; }
.u2g-pkg-filter-star-btn.is-active,.u2g-pkg-filter-star-btn:hover { border-color:var(--u2g-green); color:var(--u2g-green); background:var(--u2g-green-bg); }

.u2g-pkg-slider-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:12px; color:var(--u2g-mid); font-weight:600; }
.u2g-pkg-range-wrap { position:relative; padding:4px 0; }
.u2g-pkg-range {
    -webkit-appearance:none; appearance:none; width:100%; height:5px;
    background:var(--u2g-border); border-radius:99px; outline:none; cursor:pointer; display:block; margin:6px 0;
}
.u2g-pkg-range::-webkit-slider-runnable-track {
    height:5px; border-radius:99px;
    background: var(--u2g-border);
}
.u2g-pkg-range::-webkit-slider-thumb {
    -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
    background:var(--u2g-green); cursor:pointer; border:3px solid #fff;
    box-shadow:0 2px 6px rgba(0,0,0,.18); margin-top:-7.5px; transition:box-shadow .15s, transform .15s;
}
.u2g-pkg-range::-webkit-slider-thumb:hover { box-shadow:0 2px 10px rgba(30,150,60,.35); transform:scale(1.15); }
.u2g-pkg-range::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:var(--u2g-green); cursor:pointer; border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.18); }

.u2g-pkg-results-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.u2g-pkg-results-count { font-size:13px; color:var(--u2g-muted); }
.u2g-pkg-results-count strong { color:var(--u2g-dark); font-weight:800; }
.u2g-pkg-filter-toggle { display:none; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--u2g-mid); background:var(--u2g-bg); border:1.5px solid var(--u2g-border); border-radius:8px; padding:7px 12px; cursor:pointer; }

/* ═════════════════════════════════════════════════════════════
   PACKAGE SINGLE — v3 (Tabbed Gallery Design)
   Inspired by hotel-single.php layout.
════════════════════════════════════════════════════════════ */

/* ── Outer wrap ───────────────────────────────────────────── */
.u2g-pks-v3-wrap {
    width:100%; max-width:1240px; margin:0 auto;
    padding:0 20px 80px; box-sizing:border-box;
    font-family:inherit;
}

/* ── Breadcrumb ──────────────────────────────────────────── */
.u2g-pks-v3-breadcrumb {
    display:flex; align-items:center; gap:6px;
    font-size:12px; color:var(--u2g-muted); padding:16px 0 12px;
    flex-wrap:wrap;
}
.u2g-pks-v3-breadcrumb a { color:var(--u2g-muted); text-decoration:none; }
.u2g-pks-v3-breadcrumb a:hover { color:var(--u2g-green); }
.u2g-pks-v3-breadcrumb-current { color:var(--u2g-dark); font-weight:500; }

/* ── Header ──────────────────────────────────────────────── */
.u2g-pks-v3-breadcrumb { margin-bottom: 24px; }
.u2g-pks-v3-breadcrumb-list { 
    display: flex; align-items: center; gap: 8px; list-style: none; padding: 0; margin: 0;
    font-size: 13px; color: var(--u2g-muted); overflow-x: auto; white-space: nowrap;
    scrollbar-width: none;
}
.u2g-pks-v3-breadcrumb-list::-webkit-scrollbar { display: none; }
.u2g-pks-v3-breadcrumb-list li { display: flex; align-items: center; gap: 8px; }
.u2g-pks-v3-breadcrumb-list a { color: inherit; text-decoration: none; transition: color .2s; }
.u2g-pks-v3-breadcrumb-list a:hover { color: var(--u2g-green); }
.u2g-pks-v3-breadcrumb-sep { color: var(--u2g-lighter); flex-shrink: 0; }
.u2g-pks-v3-breadcrumb-current { color: var(--u2g-dark); font-weight: 600; flex-shrink: 0; }
.u2g-pks-v3-header { margin-bottom:18px; }
.u2g-pks-v3-header-badges { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.u2g-pks-v3-badge {
    display:inline-flex; align-items:center; font-size:11px; font-weight:700;
    padding:3px 10px; border-radius:20px; letter-spacing:.02em;
}
.u2g-pks-v3-badge--cat { background:var(--u2g-gold-bg); color:var(--u2g-gold-dark); border:1px solid var(--u2g-gold-border); }
.u2g-pks-v3-badge--tag { background:var(--u2g-green-bg); color:var(--u2g-green); border:1px solid var(--u2g-green-border); }

.u2g-pks-v3-header-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.u2g-pks-v3-title { font-size:28px; font-weight:800; color:var(--u2g-dark); margin:0; letter-spacing:-0.02em; line-height:1.2; flex:1; }

.u2g-pks-v3-header-actions { display:flex; gap:8px; flex-shrink:0; }
.u2g-pks-v3-share-btn,
.u2g-pks-v3-save-btn {
    width:36px; height:36px; border-radius:8px; border:1.5px solid var(--u2g-border);
    background:#fff; display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--u2g-muted); transition:all .15s;
}
.u2g-pks-v3-share-btn:hover,
.u2g-pks-v3-save-btn:hover { border-color:var(--u2g-green); color:var(--u2g-green); }

.u2g-pks-v3-header-meta {
    display:flex; align-items:center; flex-wrap:wrap; gap:8px;
    font-size:13px; color:var(--u2g-muted);
}
.u2g-pks-v3-meta-item { 
    display:inline-flex; align-items:center; gap:6px; transition: all .2s; 
    background: #fff; border: 1.5px solid var(--u2g-border);
    padding: 7px 14px; border-radius: 99px;
    font-size: 13px; font-weight: 600; color: var(--u2g-dark);
}
.u2g-pks-v3-meta-item svg { color: var(--u2g-green); }
.u2g-pks-v3-meta-sep { display:none !important; }

/* ── Gallery Mosaic ──────────────────────────────────────── */
.u2g-pks-v3-gallery { position:relative; margin-bottom:28px; border-radius:14px; overflow:hidden; }
.u2g-pks-gallery-mosaic {
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:220px 220px;
    gap:3px;
    background:#111;
    border-radius:14px;
    overflow:hidden;
}
.u2g-pks-gm-main {
    grid-column:1; grid-row:1/3;
    background-size:cover; background-position:center;
    cursor:pointer; transition:opacity .2s;
}
.u2g-pks-gm-main:hover { opacity:.92; }
.u2g-pks-gm-cell {
    background-size:cover; background-position:center;
    cursor:pointer; transition:opacity .2s; position:relative;
}
.u2g-pks-gm-cell:hover { opacity:.88; }
.u2g-pks-gm-cell--more::after {
    content:attr(data-more);
    position:absolute; inset:0; background:rgba(0,0,0,.5);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:18px; font-weight:700;
}

.u2g-pks-gallery-all-btn {
    position:absolute; bottom:14px; right:14px;
    background:#fff; border:1.5px solid var(--u2g-border);
    border-radius:8px; padding:7px 14px;
    font-size:12px; font-weight:700; color:var(--u2g-dark);
    display:flex; align-items:center; gap:6px; cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.12); transition:all .15s;
    z-index:5;
}
.u2g-pks-gallery-all-btn:hover { border-color:var(--u2g-green); color:var(--u2g-green); }

.u2g-pks-v3-gallery-placeholder {
    height:200px; border-radius:14px; background:var(--u2g-bg);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:var(--u2g-muted); gap:10px; font-size:13px;
    border:1.5px dashed var(--u2g-border); margin-bottom:28px;
}

/* ── Lightbox ────────────────────────────────────────────── */
.u2g-pks-lightbox {
    position:fixed; inset:0; z-index:9999;
    display:flex; flex-direction:column;
    opacity:0; transition:opacity .22s ease;
}
.u2g-pks-lightbox.is-open { opacity:1; }
.u2g-pks-lightbox.u2g-hidden { display:none; }
.u2g-pks-lightbox-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.94); }

.u2g-pks-lightbox-toolbar {
    position:relative; z-index:1; display:flex; align-items:center;
    justify-content:space-between; padding:14px 20px;
}
.u2g-pks-lb-counter { color:rgba(255,255,255,.7); font-size:13px; font-weight:600; }
.u2g-pks-lb-close {
    width:38px; height:38px; border-radius:8px; border:1.5px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.08); color:#fff; display:flex; align-items:center;
    justify-content:center; cursor:pointer; transition:background .15s;
}
.u2g-pks-lb-close:hover { background:rgba(255,255,255,.18); }

.u2g-pks-lightbox-stage {
    position:relative; flex:1; display:flex;
    align-items:center; justify-content:center; overflow:hidden;
}
.u2g-pks-lb-img {
    max-width:90vw; max-height:70vh; object-fit:contain;
    border-radius:4px; transition:opacity .18s;
}
.u2g-pks-lb-img.is-loading { opacity:0; }
.u2g-pks-lb-nav {
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.12);
    border:1.5px solid rgba(255,255,255,.2); color:#fff;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background .15s; z-index:2;
}
.u2g-pks-lb-nav:hover { background:rgba(255,255,255,.22); }
.u2g-pks-lb-prev { left:16px; }
.u2g-pks-lb-next { right:16px; }

.u2g-pks-lb-thumbs {
    position:relative; z-index:1; display:flex; gap:6px;
    overflow-x:auto; padding:12px 20px;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent;
}
.u2g-pks-lb-thumb {
    width:60px; height:44px; flex-shrink:0; border-radius:6px;
    background-size:cover; background-position:center;
    cursor:pointer; opacity:.5; border:2px solid transparent; transition:all .15s;
}
.u2g-pks-lb-thumb.is-active { opacity:1; border-color:#fff; }
.u2g-pks-lb-thumb:hover { opacity:.85; }

/* ── Body layout ─────────────────────────────────────────── */
.u2g-pks-v3-body {
    display:grid;
    grid-template-columns:1fr 340px;
    gap:32px; align-items:start;
}
.u2g-pks-v3-main { min-width:0; }

/* ── Tabs nav ────────────────────────────────────────────── */
.u2g-pks-v3-tabs {
    display:flex; border-bottom:2px solid var(--u2g-border);
    margin-bottom:28px; overflow-x:auto;
    scrollbar-width:none; -ms-overflow-style:none;
}
.u2g-pks-v3-tabs::-webkit-scrollbar { display:none; }
.u2g-pks-v3-tab {
    display:inline-flex; align-items:center; gap:6px;
    padding:12px 20px; font-size:14px; font-weight:600;
    color:var(--u2g-muted); background:none; border:none;
    border-bottom:2.5px solid transparent; margin-bottom:-2px;
    cursor:pointer; transition:all .18s; white-space:nowrap;
    font-family:inherit;
}
.u2g-pks-v3-tab:hover { color:var(--u2g-dark); }
.u2g-pks-v3-tab.is-active { color:var(--u2g-green); border-bottom-color:var(--u2g-green); }

/* ── Tab panels ──────────────────────────────────────────── */
.u2g-pks-v3-panel { animation: u2g-v3-fade .25s ease; }
.u2g-pks-v3-panel.is-active { display:block; }
@keyframes u2g-v3-fade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

.u2g-pks-v3-section { margin-bottom:36px; }
.u2g-pks-v3-section-title {
    font-size:18px; font-weight:800; color:var(--u2g-dark);
    margin:0 0 20px; padding-bottom:12px; border-bottom:1.5px solid var(--u2g-border);
    letter-spacing:-0.01em;
}

/* ── Highlights strip ─────────────────────────────────────── */
.u2g-pks-v3-highlights {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:14px; margin-bottom:32px;
}
.u2g-pks-v3-hl {
    display:flex; align-items:flex-start; gap:12px;
    padding:14px 16px; background:#fff;
    border:1.5px solid var(--u2g-border); border-radius:10px;
}
.u2g-pks-v3-hl-icon {
    width:38px; height:38px; border-radius:8px;
    background:var(--u2g-green-bg); color:var(--u2g-green);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.u2g-pks-v3-hl-label { font-size:13px; font-weight:700; color:var(--u2g-dark); }
.u2g-pks-v3-hl-sub { font-size:11px; color:var(--u2g-muted); margin-top:2px; }

/* ── Description ─────────────────────────────────────────── */
.u2g-pks-v3-description { font-size:14px; line-height:1.8; color:var(--u2g-mid); }
.u2g-pks-v3-description p { margin:0 0 14px; }

/* ── Hotels list (overview tab) ──────────────────────────── */
.u2g-pks-v3-hotels-list { display:flex; flex-direction:column; gap:18px; }

.u2g-pks-v3-hotel-row {
    display:grid; grid-template-columns:260px 1fr; gap:0;
    border:1.5px solid var(--u2g-border); border-radius:14px; overflow:hidden;
    background:#fff; transition:box-shadow .2s;
}
.u2g-pks-v3-hotel-row:hover { box-shadow:0 4px 20px rgba(0,0,0,.07); }

.u2g-pks-v3-hotel-thumb { position:relative; }
.u2g-pks-v3-hotel-img {
    width:100%; height:100%; min-height:160px;
    background-size:cover; background-position:center;
    background-color:var(--u2g-bg);
}
.u2g-pks-v3-hotel-img--empty { background:var(--u2g-bg-alt); min-height:160px; }
.u2g-pks-v3-hotel-photo-count {
    position:absolute; bottom:8px; right:8px;
    background:rgba(0,0,0,.55); color:#fff;
    font-size:10px; font-weight:700; padding:3px 7px; border-radius:20px;
    display:flex; align-items:center; gap:4px;
}
.u2g-pks-v3-hotel-city-chip {
    position:absolute; top:10px; left:10px;
    background:rgba(0,0,0,.65); color:#fff;
    font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px;
    backdrop-filter:blur(4px);
}

.u2g-pks-v3-hotel-info { padding:18px 20px; display:flex; flex-direction:column; gap:8px; }
.u2g-pks-v3-hotel-stars { display:flex; gap:2px; }
.u2g-pks-v3-hotel-name { margin:0; }
.u2g-pks-v3-hotel-name a { font-size:16px; font-weight:800; color:var(--u2g-dark); text-decoration:none; }
.u2g-pks-v3-hotel-name a:hover { color:var(--u2g-green); }

.u2g-pks-v3-hotel-meta-row { display:flex; flex-wrap:wrap; gap:8px; }
.u2g-pks-v3-hotel-dist,
.u2g-pks-v3-hotel-board {
    display:inline-flex; align-items:center; gap:4px;
    font-size:12px; color:var(--u2g-muted);
    background:var(--u2g-bg); padding:3px 8px; border-radius:20px;
    border:1px solid var(--u2g-border);
}

.u2g-pks-v3-hotel-desc { font-size:13px; color:var(--u2g-muted); line-height:1.6; margin:0; }

.u2g-pks-v3-hotel-amenities { display:flex; flex-wrap:wrap; gap:6px; }
.u2g-pks-v3-hotel-amenity {
    display:inline-flex; align-items:center; gap:4px;
    font-size:11px; color:var(--u2g-mid); font-weight:500;
}
.u2g-pks-v3-hotel-amenity svg { color:var(--u2g-green); flex-shrink:0; }

.u2g-pks-v3-hotel-view-link {
    display:inline-flex; align-items:center; gap:5px;
    font-size:12px; font-weight:700; color:var(--u2g-green); text-decoration:none;
    margin-top:auto; padding-top:4px;
}
.u2g-pks-v3-hotel-view-link:hover { text-decoration:underline; }

/* ── Group Leader ────────────────────────────────────────── */
.u2g-pks-v3-leader-card {
    display:flex; align-items:flex-start; gap:16px;
    border:1.5px solid var(--u2g-border); border-radius:12px; padding:20px;
    background:#fff;
}
.u2g-pks-v3-leader-avatar {
    width:56px; height:56px; border-radius:12px; overflow:hidden;
    background:var(--u2g-green-bg); flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
}
.u2g-pks-v3-leader-avatar img { width:100%; height:100%; object-fit:cover; }
.u2g-pks-v3-leader-initials { font-size:20px; font-weight:800; color:var(--u2g-green); }
.u2g-pks-v3-leader-name { font-size:16px; font-weight:800; color:var(--u2g-dark); }
.u2g-pks-v3-leader-agency { font-size:12px; color:var(--u2g-muted); font-weight:600; margin-top:2px; }
.u2g-pks-v3-leader-loc { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--u2g-muted); margin-top:4px; }
.u2g-pks-v3-leader-bio { font-size:13px; line-height:1.7; color:var(--u2g-mid); margin:8px 0 0; }

/* ── FAQ Accordion ───────────────────────────────────────── */
.u2g-pks-v3-faq { border:1.5px solid var(--u2g-border); border-radius:12px; overflow:hidden; }
.u2g-pks-v3-faq-item { border-bottom:1px solid var(--u2g-border); }
.u2g-pks-v3-faq-item:last-child { border-bottom:none; }
.u2g-pks-v3-faq-q {
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; background:none; border:none; cursor:pointer;
    font-size:14px; font-weight:600; color:var(--u2g-dark); text-align:left;
    gap:12px; font-family:inherit; transition:background .15s;
}
.u2g-pks-v3-faq-q:hover { background:var(--u2g-bg); }
.u2g-pks-v3-faq-q[aria-expanded="true"] { background:var(--u2g-green-bg); color:var(--u2g-green); }
.u2g-pks-v3-faq-q[aria-expanded="true"] .u2g-pks-v3-faq-chevron { transform:rotate(180deg); color:var(--u2g-green); }
.u2g-pks-v3-faq-chevron { flex-shrink:0; transition:transform .2s; color:var(--u2g-muted); }
.u2g-pks-v3-faq-a { padding:0 20px 16px; }
.u2g-pks-v3-faq-a p { font-size:13px; line-height:1.7; color:var(--u2g-mid); margin:0; }

/* ── Timeline (Itinerary tab) ────────────────────────────── */
.u2g-pks-v3-timeline { display:flex; flex-direction:column; }
.u2g-pks-v3-tl-item { display:flex; gap:16px; margin-bottom:4px; }
.u2g-pks-v3-tl-left { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.u2g-pks-v3-tl-dot {
    width:42px; height:42px; border-radius:50%;
    background:var(--u2g-green-bg); border:2px solid var(--u2g-green-border);
    display:flex; align-items:center; justify-content:center;
    color:var(--u2g-green); flex-shrink:0;
}
.u2g-pks-v3-tl-line { width:2px; background:var(--u2g-border); flex:1; min-height:28px; margin:4px 0; }

.u2g-pks-v3-tl-card {
    background:#fff; border:1.5px solid var(--u2g-border); border-radius:12px;
    padding:16px 20px; margin-bottom:16px; flex:1;
}
.u2g-pks-v3-tl-meta { display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.u2g-pks-v3-tl-day-badge {
    width:26px; height:26px; border-radius:50%;
    background:var(--u2g-green); color:#fff;
    font-size:11px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.u2g-pks-v3-tl-date { font-size:12px; color:var(--u2g-muted); font-weight:500; }
.u2g-pks-v3-tl-loc { display:flex; align-items:center; gap:3px; font-size:11px; color:var(--u2g-muted); }
.u2g-pks-v3-tl-title { font-size:15px; font-weight:700; color:var(--u2g-dark); margin:0 0 6px; }
.u2g-pks-v3-tl-desc { font-size:13px; color:var(--u2g-muted); line-height:1.6; margin:0 0 8px; }
.u2g-pks-v3-tl-bullets { margin:0; padding-left:18px; }
.u2g-pks-v3-tl-bullets li { font-size:13px; color:var(--u2g-muted); line-height:1.7; margin-bottom:2px; }

/* ── Inclusions tab ──────────────────────────────────────── */
.u2g-pks-v3-inc-exc-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:32px; }
.u2g-pks-v3-inc-col,
.u2g-pks-v3-exc-col {
    border:1.5px solid var(--u2g-border); border-radius:12px; overflow:hidden;
    background:#fff;
}
.u2g-pks-v3-inc-col-header {
    display:flex; align-items:center; gap:8px;
    font-size:13px; font-weight:700; padding:14px 18px;
    border-bottom:1px solid var(--u2g-border);
    background:var(--u2g-bg);
}
.u2g-pks-v3-inc-list,
.u2g-pks-v3-exc-list {
    list-style:none; margin:0; padding:12px 16px;
    display:flex; flex-direction:column; gap:8px;
}
.u2g-pks-v3-inc-list li,
.u2g-pks-v3-exc-list li {
    display:flex; align-items:flex-start; gap:8px;
    font-size:13px; line-height:1.5; color:var(--u2g-mid);
}
.u2g-pks-v3-inc-list li svg { flex-shrink:0; margin-top:2px; }
.u2g-pks-v3-exc-list li svg { flex-shrink:0; margin-top:2px; }

/* ── Reviews tab ─────────────────────────────────────────── */
.u2g-pks-v3-rating-summary {
    display:flex; align-items:center; gap:32px;
    border:1.5px solid var(--u2g-border); border-radius:12px; padding:24px;
    background:#fff; margin-bottom:32px;
}
.u2g-pks-v3-rating-big { display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; }
.u2g-pks-v3-rating-num { font-size:52px; font-weight:800; color:var(--u2g-dark); line-height:1; letter-spacing:-0.03em; }
.u2g-pks-v3-rating-stars { display:flex; gap:2px; }
.u2g-pks-v3-rating-count { font-size:12px; color:var(--u2g-muted); text-align:center; }
.u2g-pks-v3-rating-bars { flex:1; display:flex; flex-direction:column; gap:6px; }
.u2g-pks-v3-rating-bar-row { display:flex; align-items:center; gap:8px; }
.u2g-pks-v3-rating-bar-row span { font-size:12px; font-weight:600; color:var(--u2g-dark); width:10px; text-align:right; }
.u2g-pks-v3-rbar-track { flex:1; height:8px; background:var(--u2g-border); border-radius:99px; overflow:hidden; }
.u2g-pks-v3-rbar-fill { height:100%; background:#C4963C; border-radius:99px; }

.u2g-pks-v3-agent-cta-block {
    display:flex; align-items:center; gap:14px;
    border:1.5px solid var(--u2g-border); border-radius:12px; padding:18px;
    background:#fff;
}
.u2g-pks-v3-agent-logo { width:48px; height:48px; object-fit:contain; border-radius:8px; border:1px solid var(--u2g-border); flex-shrink:0; }
.u2g-pks-v3-agent-init { width:48px; height:48px; border-radius:8px; background:var(--u2g-green-bg); color:var(--u2g-green); font-size:16px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.u2g-pks-v3-agent-cta-info { flex:1; display:flex; flex-direction:column; gap:2px; }
.u2g-pks-v3-agent-cta-info strong { font-size:14px; font-weight:700; color:var(--u2g-dark); }
.u2g-pks-v3-agent-cta-info span { font-size:11px; color:var(--u2g-muted); display:flex; align-items:center; gap:3px; }
.u2g-pks-v3-agent-view-btn {
    display:inline-flex; align-items:center; gap:5px;
    font-size:13px; font-weight:700; color:var(--u2g-green); text-decoration:none;
    border:1.5px solid var(--u2g-green-border); padding:8px 14px; border-radius:8px;
    background:var(--u2g-green-bg); transition:background .15s; flex-shrink:0;
}
.u2g-pks-v3-agent-view-btn:hover { background:var(--u2g-green); color:#fff; }

/* ═════════════════════════════════════════════════════════════
   SIDEBAR BOOKING CARD v3
════════════════════════════════════════════════════════════ */
.u2g-pks-v3-sidebar { position:sticky; top:24px; }

.u2g-pks-v3-book-card {
    background:#fff; border:1.5px solid var(--u2g-border);
    border-radius:16px; padding:22px;
    box-shadow:0 4px 24px rgba(0,0,0,.08);
}

/* Price area */
.u2g-pks-v3-book-price-area {
    display:flex; align-items:flex-start; justify-content:space-between;
    padding-bottom:18px; border-bottom:1px solid var(--u2g-border); margin-bottom:18px;
}
.u2g-pks-v3-book-from { font-size:11px; color:var(--u2g-muted); margin-bottom:2px; }
.u2g-pks-v3-book-price { font-size:32px; font-weight:800; color:var(--u2g-dark); letter-spacing:-0.03em; line-height:1; }
.u2g-pks-v3-book-pp { font-size:11px; color:var(--u2g-muted); margin-top:3px; }
.u2g-pks-v3-book-urgency {
    background:var(--u2g-danger-bg); color:var(--u2g-danger);
    font-size:11px; font-weight:700; padding:4px 9px; border-radius:8px;
    border:1px solid var(--u2g-danger-border);
    display:flex; align-items:center; gap:4px;
}

/* Room selector */
.u2g-pks-v3-room-select { margin-bottom:18px; }
.u2g-pks-v3-room-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--u2g-muted); margin-bottom:8px; }

.u2g-pks-v3-room-opt {
    display:flex; align-items:center; gap:10px;
    border:1.5px solid var(--u2g-border); border-radius:10px;
    padding:10px 12px; cursor:pointer; margin-bottom:6px;
    transition:border-color .18s, background .18s; position:relative;
}
.u2g-pks-v3-room-opt:last-child { margin-bottom:0; }
.u2g-pks-v3-room-opt:hover { border-color:rgba(30,150,60,.35); }
.u2g-pks-v3-room-opt.is-selected { border-color:var(--u2g-green); background:var(--u2g-green-bg); }
.u2g-pks-v3-room-radio { position:absolute; opacity:0; width:0; height:0; }

.u2g-pks-v3-room-radio-dot {
    width:18px; height:18px; border-radius:50%;
    border:2px solid var(--u2g-border); flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    transition:border-color .15s;
}
.u2g-pks-v3-room-opt.is-selected .u2g-pks-v3-room-radio-dot { border-color:var(--u2g-green); }
.u2g-pks-v3-room-radio-inner {
    width:9px; height:9px; border-radius:50%; background:var(--u2g-green);
    opacity:0; transform:scale(0); transition:all .15s;
}
.u2g-pks-v3-room-opt.is-selected .u2g-pks-v3-room-radio-inner { opacity:1; transform:scale(1); }

.u2g-pks-v3-room-opt-inner { flex:1; display:flex; align-items:center; justify-content:space-between; }
.u2g-pks-v3-room-opt-name { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--u2g-dark); }
.u2g-pks-v3-room-beds { font-size:11px; color:var(--u2g-muted); font-weight:400; }
.u2g-pks-v3-room-opt-price { font-size:14px; font-weight:800; color:var(--u2g-dark); }
.u2g-pks-v3-room-opt.is-selected .u2g-pks-v3-room-opt-price { color:var(--u2g-green); }

/* Pilgrims counter */
.u2g-pks-v3-pilgrims { margin-bottom:16px; }
.u2g-pks-v3-pilgrims-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--u2g-muted); margin-bottom:8px; }
.u2g-pks-v3-pilgrims-ctrl {
    display:flex; align-items:center; gap:14px;
    border:1.5px solid var(--u2g-border); border-radius:10px; padding:6px 14px;
    width:fit-content;
}
.u2g-pks-v3-pil-btn {
    width:28px; height:28px; border-radius:6px; border:1.5px solid var(--u2g-border);
    background:#fff; display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--u2g-dark); transition:all .15s;
}
.u2g-pks-v3-pil-btn:hover { border-color:var(--u2g-green); color:var(--u2g-green); background:var(--u2g-green-bg); }
.u2g-pks-v3-pil-count { font-size:18px; font-weight:800; color:var(--u2g-dark); min-width:24px; text-align:center; }

/* Total row */
.u2g-pks-v3-total-row {
    display:flex; align-items:flex-start; justify-content:space-between;
    padding:14px 0 16px; border-top:1px solid var(--u2g-border);
    margin-bottom:16px;
}
.u2g-pks-v3-total-label { font-size:13px; color:var(--u2g-muted); font-weight:600; padding-top:4px; }
.u2g-pks-v3-total-price { font-size:24px; font-weight:800; color:var(--u2g-dark); letter-spacing:-0.02em; text-align:right; }
.u2g-pks-v3-total-tax { font-size:10px; color:var(--u2g-muted); text-align:right; margin-top:2px; }

/* CTA buttons */
.u2g-pks-v3-book-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:14px; background:var(--u2g-green); color:#fff;
    font-size:15px; font-weight:700; border-radius:10px; text-decoration:none;
    margin-bottom:10px; transition:background .15s; font-family:inherit;
}
.u2g-pks-v3-book-btn:hover { background:var(--u2g-green-dark); color:#fff; }
.u2g-pks-v3-book-btn--wa { background:var(--u2g-whatsapp); }
.u2g-pks-v3-book-btn--wa:hover { background:var(--u2g-whatsapp-dark); }

.u2g-pks-v3-deposit-btn {
    display:flex; align-items:center; justify-content:center;
    width:100%; padding:12px; background:#fff; color:var(--u2g-dark);
    font-size:14px; font-weight:600; border-radius:10px; text-decoration:none;
    border:1.5px solid var(--u2g-border); margin-bottom:10px; transition:all .15s;
}
.u2g-pks-v3-deposit-btn:hover { border-color:var(--u2g-green); color:var(--u2g-green); }

.u2g-pks-v3-seats-left {
    display:flex; align-items:center; justify-content:center; gap:5px;
    font-size:12px; color:var(--u2g-danger); font-weight:600;
    padding:0 0 12px; text-align:center;
}

.u2g-pks-v3-sold-out {
    text-align:center; font-size:13px; font-weight:700;
    color:var(--u2g-danger); padding:10px;
    border:1.5px solid var(--u2g-danger-border); border-radius:8px;
    background:var(--u2g-danger-bg); margin-bottom:10px;
}

/* Trust signals */
.u2g-pks-v3-trust {
    display:flex; flex-direction:column; gap:8px;
    border-top:1px solid var(--u2g-border); padding-top:14px; margin-bottom:14px;
}
.u2g-pks-v3-trust-item {
    display:flex; align-items:flex-start; gap:8px;
    font-size:12px; font-weight:600; color:var(--u2g-dark);
}
.u2g-pks-v3-trust-item svg { flex-shrink:0; margin-top:1px; }
.u2g-pks-v3-trust-item span { font-size:11px; font-weight:400; color:var(--u2g-muted); display:block; }

/* Agent block in sidebar */
.u2g-pks-v3-book-agent {
    display: flex; align-items: flex-start; flex-wrap: wrap; gap: 14px;
    padding: 16px; background: #fff;
    border: 1.5px solid var(--u2g-border); border-radius: 16px;
    margin-bottom: 12px; box-shadow: var(--u2g-shadow-sm);
}
.u2g-pks-v3-book-agent-logo { 
    width: 48px; height: 48px; object-fit: contain; 
    border-radius: 12px; border: 1.5px solid var(--u2g-border); flex-shrink: 0; 
}
.u2g-pks-v3-book-agent-init { 
    width: 48px; height: 48px; border-radius: 12px; 
    background: linear-gradient(135deg, var(--u2g-green-bg) 0%, #fff 100%); 
    color: var(--u2g-green); font-size: 16px; font-weight: 800; 
    display: flex; align-items: center; justify-content: center; 
    flex-shrink: 0; border: 1.5px solid var(--u2g-green-border);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
}
.u2g-pks-v3-book-agent-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.u2g-pks-v3-book-agent-info span:first-child { 
    font-size: 10px; font-weight: 700; text-transform: uppercase; 
    letter-spacing: 0.05em; color: var(--u2g-muted); 
}
.u2g-pks-v3-book-agent-info a { 
    font-size: 15px; font-weight: 800; color: var(--u2g-dark); 
    text-decoration: none; line-height: 1.2;
}
.u2g-pks-v3-book-agent-info a:hover { color: var(--u2g-green); }
.u2g-pks-v3-book-agent-loc { 
    font-size: 12px; color: var(--u2g-muted); 
    display: flex; align-items: center; gap: 4px; margin-top: 2px;
}
.u2g-pks-v3-book-agent-wa {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 4px;
    padding: 10px 16px; background: var(--u2g-whatsapp);
    color: #fff !important; text-decoration: none !important;
    border-radius: 12px; font-size: 14px; font-weight: 700;
    transition: background .15s, transform .1s;
    flex-shrink: 0; line-height: 1;
    box-shadow: 0 2px 8px rgba(37,211,102,0.2);
}
.u2g-pks-v3-book-agent-wa:hover { 
    background: var(--u2g-whatsapp-dark); 
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37,211,102,0.3);
}
.u2g-pks-v3-book-agent-wa svg {
    width: 16px; height: 16px;
    fill: #fff !important;
    flex-shrink: 0;
}

.u2g-pks-v3-view-all-pkgs {
    display:block; text-align:center; font-size:12px; font-weight:600;
    color:var(--u2g-muted); text-decoration:none; padding:6px 0;
}
.u2g-pks-v3-view-all-pkgs:hover { color:var(--u2g-green); }

/* Mobile sticky bar */
.u2g-pks-v3-mobile-bar {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
    background: #fff; border-top: 1.5px solid var(--u2g-border);
    padding: 10px 16px;
    align-items: center; justify-content: space-between;
    gap: 12px;
    box-shadow: 0 -4px 20px rgba(0,0,0,.12);
    /* Stack: pull indicator above the bar content */
    flex-direction: column;
    padding-top: 0;
}
/* Pull indicator strip at top of mobile bar */
.u2g-pks-v3-mobile-bar::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: var(--u2g-border);
    border-radius: 99px;
    margin: 6px auto 2px;
    flex-shrink: 0;
}
/* Inner row with price + button */
.u2g-pks-v3-mobile-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
    padding-bottom: 4px;
}
.u2g-pks-v3-mb-price { display:flex; flex-direction:column; gap:1px; }
.u2g-pks-v3-mb-from { font-size:10px; color:var(--u2g-muted); }
.u2g-pks-v3-mb-amount { font-size:20px; font-weight:800; color:var(--u2g-dark); letter-spacing:-0.02em; }
.u2g-pks-v3-mb-pp { font-size:10px; color:var(--u2g-muted); }
.u2g-pks-v3-mb-book-btn {
    flex-shrink: 0;
    padding: 11px 22px;
    background: var(--u2g-green);
    color: #fff;
    font-size: 14px; font-weight: 700;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s;
    font-family: inherit;
    line-height: 1;
}
.u2g-pks-v3-mb-book-btn svg { display: block; flex-shrink: 0; }
.u2g-pks-v3-mb-book-btn:hover { background: var(--u2g-green-dark); color: #fff; }

/* WhatsApp float */
.u2g-pks-v3-wa-float {
    position:fixed; bottom:24px; right:24px; z-index:900;
    width:52px; height:52px; border-radius:50%;
    background:var(--u2g-whatsapp); color:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 14px rgba(37,211,102,.4); text-decoration:none;
    transition:transform .18s, box-shadow .18s;
}
.u2g-pks-v3-wa-float:hover { transform:scale(1.08); box-shadow:0 6px 20px rgba(37,211,102,.5); }

/* ═════════════════════════════════════════════════════════════
   LEGACY SINGLE PAGE (keeps backward compat)
════════════════════════════════════════════════════════════ */
.u2g-pks-wrap { width:100%; max-width:1200px; margin:0 auto; padding:0 20px 60px; box-sizing:border-box; }
.u2g-pks-hero { min-height:380px; background-size:cover; background-position:center; border-radius:0 0 20px 20px; position:relative; display:flex; align-items:flex-end; margin:0 -20px 0; }
.u2g-pks-hero--plain { background:#1B4332; border:none; border-radius:14px; min-height:auto; padding:36px 30px; margin:20px 0 0; }
.u2g-pks-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.15) 55%,transparent 100%); border-radius:0 0 20px 20px; }
.u2g-pks-hero-content { position:relative; z-index:1; padding:32px 36px; width:100%; }
.u2g-pks-hero--plain .u2g-pks-hero-content { position:static; padding:0; }
.u2g-pks-hero--plain .u2g-pks-hero-overlay { display:none; }
.u2g-pks-hero-dep { font-size:12px; color:rgba(255,255,255,.75); display:flex; align-items:center; gap:5px; margin-bottom:8px; }
.u2g-pks-hero-title { font-size:30px; font-weight:800; color:#fff; margin:0 0 8px; letter-spacing:-0.02em; text-shadow:0 1px 3px rgba(0,0,0,.3); }
.u2g-pks-hero--plain .u2g-pks-hero-title { text-shadow:none; font-size:26px; }
.u2g-pks-hero-dates { display:flex; align-items:center; gap:6px; font-size:14px; color:rgba(255,255,255,.85); margin-bottom:12px; }
.u2g-pks-hero-nights { font-weight:700; opacity:.7; }
.u2g-pks-hero-pills { display:flex; flex-wrap:wrap; gap:6px; }
.u2g-pks-hero-pill { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(6px); color:#fff; font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; }

/* ─────────────────────────────────────────────────────────────
   AGENT PUBLIC PROFILE
───────────────────────────────────────────────────────────── */
.u2g-agent-profile-wrap { width:100%; max-width:1200px; margin:0 auto; padding:0 20px 60px; box-sizing:border-box; }
.u2g-agent-hero { position:relative; border-radius:14px; overflow:hidden; margin-bottom:30px; background:var(--u2g-green-deeper); min-height:220px; }
.u2g-agent-hero-bg { position:absolute; inset:0; background:linear-gradient(135deg,var(--u2g-green-deeper) 0%,var(--u2g-green-dark) 100%); opacity:.95; }
.u2g-agent-hero-content { position:relative; z-index:1; padding:36px; display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.u2g-agent-hero-avatar { width:88px; height:88px; border-radius:14px; overflow:hidden; border:3px solid rgba(255,255,255,.2); flex-shrink:0; }
.u2g-agent-hero-avatar img { width:100%; height:100%; object-fit:contain; }
.u2g-agent-avatar-initials { width:88px; height:88px; border-radius:14px; background:rgba(255,255,255,.15); color:#fff; font-size:28px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.u2g-agent-hero-info { flex:1; min-width:200px; }
.u2g-agent-hero-name { font-size:26px; font-weight:800; color:#fff; margin:0 0 8px; letter-spacing:-0.02em; }
.u2g-agent-hero-meta { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:10px; }
.u2g-agent-verified-badge { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.15); color:#fff; font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; border:1px solid rgba(255,255,255,.2); }
.u2g-agent-hero-loc,.u2g-agent-hero-pkgs,.u2g-agent-hero-deps { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:rgba(255,255,255,.75); }
.u2g-agent-hero-ctas { display:flex; gap:10px; flex-wrap:wrap; margin-left:auto; }
.u2g-agent-cta-wa { display:inline-flex; align-items:center; gap:7px; background:var(--u2g-whatsapp); color:#fff; font-size:13px; font-weight:700; padding:10px 18px; border-radius:9px; text-decoration:none; transition:background .15s; }
.u2g-agent-cta-wa:hover { background:var(--u2g-whatsapp-dark); color:#fff; }
.u2g-agent-cta-phone { display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.15); color:#fff; font-size:13px; font-weight:600; padding:10px 18px; border-radius:9px; text-decoration:none; border:1px solid rgba(255,255,255,.2); }
.u2g-agent-body { display:grid; grid-template-columns:1fr 300px; gap:32px; }
.u2g-agent-section-title { font-size:18px; font-weight:800; color:var(--u2g-dark); margin:0 0 16px; padding-bottom:10px; border-bottom:2px solid var(--u2g-border); }
.u2g-agent-bio { font-size:14px; line-height:1.8; color:var(--u2g-mid); }
.u2g-agent-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
.u2g-agent-dep-tags { display:flex; flex-wrap:wrap; gap:5px; }
.u2g-agent-dep-tag { font-size:11px; font-weight:600; color:var(--u2g-green); background:var(--u2g-green-bg); border:1px solid var(--u2g-green-border); padding:3px 10px; border-radius:20px; text-decoration:none; }
.u2g-agent-sidebar { display:flex; flex-direction:column; gap:16px; position:sticky; top:24px; }
.u2g-agent-contact-card { background:#fff; border:1.5px solid var(--u2g-border); border-radius:14px; padding:20px; }
.u2g-agent-contact-title { font-size:14px; font-weight:800; margin:0 0 14px; }
.u2g-agent-contact-name { font-size:15px; font-weight:700; color:var(--u2g-dark); margin:0 0 12px; }
.u2g-agent-contact-row { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--u2g-mid); margin-bottom:8px; }
.u2g-agent-contact-row a { color:var(--u2g-green); text-decoration:none; }
.u2g-agent-contact-wa { display:flex; align-items:center; justify-content:center; gap:8px; background:var(--u2g-whatsapp); color:#fff; font-size:14px; font-weight:700; padding:11px; border-radius:9px; text-decoration:none; margin:14px 0 12px; transition:background .15s; }
.u2g-agent-contact-wa:hover { background:var(--u2g-whatsapp-dark); color:#fff; }
.u2g-agent-dep-list { display:flex; flex-direction:column; gap:6px; }
.u2g-agent-dep-item { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--u2g-mid); text-decoration:none; padding:4px 0; }
.u2g-agent-dep-item:hover { color:var(--u2g-green); }

/* ─────────────────────────────────────────────────────────────
   AGENT FRONTEND DASHBOARD
───────────────────────────────────────────────────────────── */
.u2g-adash-wrap { width:100%; max-width:1000px; margin:0 auto; padding:30px 20px 60px; font-family:inherit; box-sizing:border-box; }
.u2g-adash-login { text-align:center; padding:60px 20px; color:var(--u2g-muted); }
.u2g-adash-header { display:flex; align-items:center; gap:16px; padding:20px 24px; background:#fff; border:1.5px solid var(--u2g-border); border-radius:14px; margin-bottom:20px; }
.u2g-adash-avatar { width:52px; height:52px; border-radius:10px; overflow:hidden; flex-shrink:0; }
.u2g-adash-avatar img { width:100%; height:100%; object-fit:contain; }
.u2g-adash-avatar span { width:52px; height:52px; background:var(--u2g-green-bg); color:var(--u2g-green); font-size:18px; font-weight:800; display:flex; align-items:center; justify-content:center; border-radius:10px; }
.u2g-adash-header-info h2 { font-size:18px; font-weight:800; color:var(--u2g-dark); margin:0 0 4px; }
.u2g-adash-role-badge { display:inline-block; font-size:10px; font-weight:700; background:var(--u2g-green-bg); color:var(--u2g-green); padding:2px 8px; border-radius:20px; margin-bottom:2px; }
.u2g-adash-location { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--u2g-muted); }
.u2g-adash-profile-link { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--u2g-green); text-decoration:none; white-space:nowrap; }
.u2g-adash-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.u2g-adash-stat { background:#fff; border:1.5px solid var(--u2g-border); border-radius:12px; padding:16px 20px; text-align:center; }
.u2g-adash-stat-num { display:block; font-size:26px; font-weight:800; color:var(--u2g-dark); letter-spacing:-0.02em; }
.u2g-adash-stat-lbl { display:block; font-size:11px; color:var(--u2g-muted); margin-top:2px; }
.u2g-adash-tabs { display:flex; border-bottom:2px solid var(--u2g-border); margin-bottom:20px; }
.u2g-adash-tab { display:inline-flex; align-items:center; gap:7px; padding:10px 20px; font-size:14px; font-weight:600; color:var(--u2g-muted); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .18s; }
.u2g-adash-tab.is-active { color:var(--u2g-green); border-bottom-color:var(--u2g-green); }
.u2g-adash-tab:hover { color:var(--u2g-green); }
.u2g-adash-tab-badge { background:var(--u2g-green); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:20px; }
.u2g-adash-panel { background:#fff; border:1.5px solid var(--u2g-border); border-radius:14px; padding:24px; }
.u2g-adash-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.u2g-adash-panel-head h3 { font-size:16px; font-weight:800; margin:0; color:var(--u2g-dark); }
.u2g-adash-empty { text-align:center; padding:40px 20px; color:var(--u2g-muted); }
.u2g-adash-empty p { font-size:14px; margin:0 0 16px; }
.u2g-adash-pkg-list { display:flex; flex-direction:column; gap:10px; }
.u2g-adash-pkg-row { display:flex; align-items:center; gap:14px; padding:14px; border:1.5px solid var(--u2g-border); border-radius:10px; transition:border-color .18s; }
.u2g-adash-pkg-row:hover { border-color:rgba(30,150,60,.25); }
.u2g-adash-pkg-thumb { width:64px; height:48px; border-radius:8px; background-size:cover; background-position:center; flex-shrink:0; background-color:var(--u2g-bg); }
.u2g-adash-pkg-info { flex:1; min-width:0; }
.u2g-adash-pkg-name { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.u2g-adash-pkg-name strong { font-size:14px; color:var(--u2g-dark); }
.u2g-adash-status-pill { font-size:10px; font-weight:700; color:#fff; padding:2px 8px; border-radius:20px; white-space:nowrap; }
.u2g-adash-pkg-meta { font-size:11px; color:var(--u2g-muted); }
.u2g-adash-pkg-actions { display:flex; gap:10px; flex-shrink:0; }
.u2g-adash-action-link { font-size:12px; font-weight:600; color:var(--u2g-green); text-decoration:none; padding:5px 10px; border:1.5px solid var(--u2g-green-border); border-radius:7px; transition:background .15s; }
.u2g-adash-action-link:hover { background:var(--u2g-green-bg); }
.u2g-adash-table-wrap { overflow-x:auto; }
.u2g-adash-table { width:100%; border-collapse:collapse; font-size:12px; }
.u2g-adash-table th { text-align:left; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--u2g-muted); padding:8px 12px; border-bottom:2px solid var(--u2g-border); background:var(--u2g-bg); }
.u2g-adash-table td { padding:10px 12px; border-bottom:1px solid var(--u2g-border); color:var(--u2g-mid); vertical-align:top; }
.u2g-adash-table tr:last-child td { border-bottom:none; }
.u2g-adash-table tr:hover td { background:var(--u2g-bg); }
.u2g-adash-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
.u2g-adash-form-field { display:flex; flex-direction:column; gap:5px; }
.u2g-adash-form-field--full { grid-column:1/-1; }
.u2g-adash-form-field label { font-size:12px; font-weight:700; color:var(--u2g-mid); }
.u2g-adash-form-field input[type="text"],.u2g-adash-form-field input[type="tel"],.u2g-adash-form-field input[type="email"],.u2g-adash-form-field textarea { padding:9px 12px; border:1.5px solid var(--u2g-border); border-radius:8px; font-size:13px; transition:border-color .18s; width:100%; box-sizing:border-box; }
.u2g-adash-form-field input:focus,.u2g-adash-form-field textarea:focus { border-color:var(--u2g-green); outline:none; box-shadow:0 0 0 3px rgba(30,150,60,.08); }
.u2g-adash-form-field textarea { min-height:100px; resize:vertical; }
.u2g-adash-form-actions { display:flex; gap:12px; flex-wrap:wrap; }
.u2g-adash-btn { display:inline-flex; align-items:center; gap:7px; padding:10px 20px; background:var(--u2g-green); color:#fff; border:none; border-radius:9px; font-size:13px; font-weight:700; cursor:pointer; text-decoration:none; transition:background .15s; }
.u2g-adash-btn:hover { background:var(--u2g-green-dark); color:#fff; }
.u2g-adash-btn--outline { background:#fff; color:var(--u2g-mid); border:1.5px solid var(--u2g-border); }
.u2g-adash-btn--outline:hover { border-color:var(--u2g-green); color:var(--u2g-green); background:#fff; }

/* ─────────────────────────────────────────────────────────────
   BOOKING FORM
───────────────────────────────────────────────────────────── */
.u2g-bpkg-wrap { width:100%; max-width:800px; margin:0 auto; padding:30px 20px 60px; box-sizing:border-box; }
.u2g-bpkg-error,.u2g-bpkg-err { background:var(--u2g-danger-bg); color:var(--u2g-danger); padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:12px; border:1px solid var(--u2g-danger-border); }
.u2g-bpkg-header { display:flex; flex-wrap:wrap; gap:20px; margin-bottom:28px; align-items:start; background:#fff; border:1.5px solid var(--u2g-border); border-radius:14px; padding:18px; }
.u2g-bpkg-thumb { flex-shrink:0; width:140px; height:100px; background-size:cover; background-position:center; border-radius:10px; background-color:var(--u2g-bg); }
.u2g-bpkg-header-info { flex:1; min-width:300px; }
.u2g-bpkg-title { font-size:19px; font-weight:800; margin:0 0 6px; color:var(--u2g-dark); }
.u2g-bpkg-dates { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--u2g-muted); margin-bottom:5px; }
.u2g-bpkg-hotel-chip { font-size:11px; background:var(--u2g-bg); padding:2px 8px; border-radius:20px; color:var(--u2g-mid); border:1px solid var(--u2g-border); }
.u2g-bpkg-inc-badge { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:600; color:var(--u2g-green); background:var(--u2g-green-bg); padding:2px 8px; border-radius:20px; border:1px solid var(--u2g-green-border); }
.u2g-bpkg-progress { display:flex; align-items:center; margin-bottom:28px; padding:0 10px; }
.u2g-bpkg-step { display:flex; flex-direction:column; align-items:center; gap:4px; }
.u2g-bpkg-step-num { width:32px; height:32px; border-radius:50%; background:var(--u2g-border); color:var(--u2g-muted); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; transition:all .25s ease; }
.u2g-bpkg-step.is-active .u2g-bpkg-step-num { background:var(--u2g-green); color:#fff; }
.u2g-bpkg-step.is-done .u2g-bpkg-step-num { background:var(--u2g-green-dark); color:#fff; }
.u2g-bpkg-step-lbl { font-size:10px; color:var(--u2g-muted); font-weight:600; white-space:nowrap; }
.u2g-bpkg-step.is-active .u2g-bpkg-step-lbl { color:var(--u2g-green); font-weight:700; }
.u2g-bpkg-step-line { flex:1; height:2px; background:var(--u2g-border); margin:0 6px 16px; }
.u2g-bpkg-panel { display:none; }
.u2g-bpkg-panel.is-active { display:block; animation: u2g-fadeIn .3s ease; }
@keyframes u2g-fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.u2g-bpkg-panel-title { font-size:20px; font-weight:800; margin:0 0 6px; color:var(--u2g-dark); }
.u2g-bpkg-panel-sub { font-size:13px; color:var(--u2g-muted); margin:0 0 20px; }
.u2g-bpkg-room-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:22px; }
.u2g-bpkg-room-card { border:2px solid var(--u2g-border); border-radius:12px; cursor:pointer; position:relative; transition:border-color .18s; }
.u2g-bpkg-room-card.is-selected { border-color:var(--u2g-green); background:var(--u2g-green-bg); }
.u2g-bpkg-room-check { position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%; background:var(--u2g-border); display:flex; align-items:center; justify-content:center; transition:background .18s; }
.u2g-bpkg-room-card.is-selected .u2g-bpkg-room-check { background:var(--u2g-green); }
.u2g-bpkg-room-inner { padding:16px; }
.u2g-bpkg-room-type { font-size:14px; font-weight:700; color:var(--u2g-dark); }
.u2g-bpkg-room-pp-price { font-size:22px; font-weight:800; color:var(--u2g-dark); letter-spacing:-0.02em; }
.u2g-bpkg-room-pp-label { font-size:11px; color:var(--u2g-muted); }
.u2g-bpkg-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:18px; }
.u2g-bpkg-field { display:flex; flex-direction:column; gap:5px; }
.u2g-bpkg-field--full { grid-column:1/-1; }
.u2g-bpkg-field label { font-size:12px; font-weight:700; color:var(--u2g-mid); }
.u2g-bpkg-req { color:var(--u2g-danger); }
.u2g-bpkg-field input,.u2g-bpkg-field select { padding:10px 12px; border:1.5px solid var(--u2g-border); border-radius:8px; font-size:14px; transition:border-color .18s; width:100%; box-sizing:border-box; }
.u2g-bpkg-field input:focus,.u2g-bpkg-field select:focus { border-color:var(--u2g-green); outline:none; box-shadow:0 0 0 3px rgba(30,150,60,.08); }
.u2g-bpkg-summary { background:var(--u2g-bg); border:1.5px solid var(--u2g-border); border-radius:12px; padding:16px; margin-bottom:18px; }
.u2g-bpkg-summary-title { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--u2g-muted); margin:0 0 10px; }
.u2g-bpkg-summary-line { display:flex; justify-content:space-between; font-size:13px; padding:4px 0; }
.u2g-bpkg-summary-total { display:flex; justify-content:space-between; font-size:15px; font-weight:700; padding-top:10px; margin-top:8px; border-top:1.5px solid var(--u2g-border); }
.u2g-bpkg-pay-methods { display:flex; gap:10px; margin-bottom:18px; }
.u2g-bpkg-pay-method { flex:1; border:2px solid var(--u2g-border); border-radius:10px; cursor:pointer; transition:border-color .18s; position:relative; }
.u2g-bpkg-pay-method.is-active { border-color:var(--u2g-green); background:var(--u2g-green-bg); }
.u2g-bpkg-pay-method input { position:absolute; opacity:0; pointer-events:none; }
.u2g-bpkg-pay-method-inner { display:flex; align-items:center; justify-content:center; gap:8px; padding:14px; font-size:13px; font-weight:700; color:var(--u2g-mid); }
.u2g-bpkg-bank-details { background:var(--u2g-bg); border-radius:10px; padding:16px; margin-bottom:14px; border:1.5px solid var(--u2g-border); }
.u2g-bpkg-bank-title { font-size:13px; font-weight:700; margin:0 0 10px; }
.u2g-bpkg-bank-row { display:flex; gap:10px; padding:6px 0; font-size:12px; border-bottom:1px solid var(--u2g-border); }
.u2g-bpkg-bank-row:last-child { border-bottom:none; }
.u2g-bpkg-bank-key { color:var(--u2g-muted); min-width:110px; }
.u2g-bpkg-bank-val { font-weight:700; color:var(--u2g-dark); word-break:break-all; }
.u2g-bpkg-bank-note { font-size:12px; color:var(--u2g-muted); line-height:1.6; margin-bottom:14px; }
.u2g-bpkg-nav { display:flex; justify-content:space-between; align-items:center; margin-top:24px; gap:10px; }
.u2g-bpkg-btn { display:inline-flex; align-items:center; gap:7px; padding:11px 22px; background:var(--u2g-green); color:#fff; border:none; border-radius:9px; font-size:14px; font-weight:700; cursor:pointer; text-decoration:none; transition:background .15s; }
.u2g-bpkg-btn:hover { background:var(--u2g-green-dark); }
.u2g-bpkg-btn:disabled { background:var(--u2g-lighter); cursor:not-allowed; }
.u2g-bpkg-btn--outline { background:#fff; color:var(--u2g-dark); border:1.5px solid var(--u2g-border); }
.u2g-bpkg-btn--outline:hover { border-color:var(--u2g-green); color:var(--u2g-green); background:#fff; }
.u2g-bpkg-confirm-wrap { text-align:center; padding:40px 20px; }
@keyframes u2g-scaleIn { from{transform:scale(0)} to{transform:scale(1)} }
.u2g-bpkg-confirm-icon { animation: u2g-scaleIn .4s ease; }
.u2g-bpkg-confirm-title { font-size:24px; font-weight:800; color:var(--u2g-dark); margin:16px 0 8px; }
.u2g-bpkg-confirm-ref { font-size:14px; color:var(--u2g-muted); margin-bottom:14px; }
.u2g-bpkg-confirm-ref strong { color:var(--u2g-green); font-size:17px; }
.u2g-bpkg-confirm-details { background:var(--u2g-bg); border:1.5px solid var(--u2g-border); border-radius:10px; padding:14px; max-width:380px; margin:0 auto 18px; }
.u2g-bpkg-conf-row { display:flex; justify-content:space-between; font-size:13px; padding:5px 0; }
.u2g-bpkg-conf-row+.u2g-bpkg-conf-row { border-top:1px solid var(--u2g-border); }

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────── */
@media (max-width:1024px){
    /* Archive */
    .u2g-pkg-arch-layout { grid-template-columns:1fr; }
    .u2g-pkg-filters { position:static; display:none; }
    .u2g-pkg-filters.is-open { display:block; }
    .u2g-pkg-filter-toggle { display:inline-flex; }
    .u2g-pkg-grid--3col { grid-template-columns:repeat(2,1fr); }
    /* v3 single */
    .u2g-pks-v3-body { grid-template-columns:1fr; }
    .u2g-pks-v3-sidebar { position:static; }
    .u2g-pks-v3-mobile-bar { display:flex; }
    .u2g-pks-v3-book-card { display:none; } /* shown as mobile bar on small screens */
    /* Agent */
    .u2g-agent-body { grid-template-columns:1fr; }
    .u2g-agent-sidebar { position:static; }
    /* Dashboard */
    .u2g-adash-stats { grid-template-columns:repeat(2,1fr); }
}
@media (min-width:768px) and (max-width:1024px){
    /* On tablet: show book card, hide mobile bar */
    .u2g-pks-v3-book-card { display:block; }
    .u2g-pks-v3-mobile-bar { display:none; }
}
@media (max-width:767px){
    /* Gallery — mosaic: hero full width on top, 2x2 grid below */
    .u2g-pks-gallery-mosaic {
        grid-template-columns: 1fr;
        grid-template-rows: 240px auto;
        height: auto;
        gap: 3px;
    }
    .u2g-pks-gm-main { grid-column: 1; grid-row: 1; }
    .u2g-pks-gm-right {
        grid-column: 1; grid-row: 2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 110px;
        gap: 3px;
        height: 110px;
    }
    /* Show only first 2 cells on mobile */
    .u2g-pks-gm-right .u2g-pks-gm-cell:nth-child(n+3) { display: none; }
    .u2g-pks-gm-right .u2g-pks-gm-cell { display: block; }
    /* Remove old standalone cell rules that no longer apply */
    .u2g-pks-gm-cell:not(.u2g-pks-gm-right .u2g-pks-gm-cell) { display: none; }
    /* Header */
    .u2g-pks-v3-header-top { 
        flex-direction: row; align-items: center; justify-content: space-between; 
        gap: 12px; flex-wrap: wrap; 
    }
    .u2g-pks-v3-header-actions { width: auto; justify-content: flex-end; flex-shrink: 0; }
    .u2g-pks-v3-title { font-size: 22px; flex: 1; min-width: 200px; }
    
    .u2g-pks-v3-header-meta { 
        margin-top: 16px; gap: 8px; 
        display: flex; flex-direction: row; flex-wrap: nowrap;
        overflow-x: auto; padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; 
        /* Bleed out of padding to show cutting items (scroll indication) */
        margin-left: -20px; margin-right: -20px;
        padding-left: 20px; padding-right: 20px;
        width: auto;
    }
    .u2g-pks-v3-header-meta::-webkit-scrollbar { display: none; } /* Hide scrollbar WebKit */
    .u2g-pks-v3-meta-item { 
        flex-shrink: 0; white-space: nowrap;
    }
    .u2g-pks-v3-meta-sep { display:none !important; }
    /* Hotels in overview */
    .u2g-pks-v3-hotel-row { grid-template-columns:1fr; }
    .u2g-pks-v3-hotel-img { height:180px; }
    /* Highlights */
    .u2g-pks-v3-highlights { 
        display: flex; flex-direction: row; flex-wrap: nowrap;
        overflow-x: auto; padding-bottom: 12px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: -20px; margin-right: -20px;
        padding-left: 20px; padding-right: 20px;
        width: auto;
        gap: 12px;
    }
    .u2g-pks-v3-highlights::-webkit-scrollbar { display: none; }
    .u2g-pks-v3-hl { flex-shrink: 0; width: 260px; }
    /* Inc/Exc */
    .u2g-pks-v3-inc-exc-grid { grid-template-columns:1fr; }
    /* Rating */
    .u2g-pks-v3-rating-summary { flex-direction:column; gap:16px; }
    /* Cards */
    .u2g-pkg-grid--2col,.u2g-pkg-grid--3col,.u2g-pkg-grid--4col { grid-template-columns:1fr; }
    .u2g-pkg-card__hotels { grid-template-columns:1fr; }
    .u2g-pkg-card__hotel + .u2g-pkg-card__hotel { border-left:none; padding-left:0; border-top:1px solid var(--u2g-border); padding-top:6px; }
    /* Booking form */
    .u2g-bpkg-room-grid { grid-template-columns:1fr; }
    .u2g-bpkg-form-grid { grid-template-columns:1fr; }
    .u2g-bpkg-field--full { grid-column:1; }
    /* Dashboard */
    .u2g-adash-form-grid { grid-template-columns:1fr; }
    .u2g-adash-form-field--full { grid-column:1; }
    /* Agent */
    .u2g-agent-hero-content { flex-direction:column; align-items:flex-start; }
    .u2g-agent-hero-ctas { margin-left:0; }
    .u2g-agent-section-head { flex-direction:column; align-items:flex-start; gap:8px; }
    /* WA float — shift up for mobile bar */
    .u2g-pks-v3-wa-float { bottom:80px; }
}
@media (max-width:480px){
    .u2g-pks-v3-tab { padding:10px 10px; font-size:12px; }
}
/* RTL support */
[dir="rtl"] .u2g-pks-v3-breadcrumb svg { transform:scaleX(-1); }
[dir="rtl"] .u2g-pks-v3-tab { border-bottom-width:2.5px; }
[dir="rtl"] .u2g-pks-lb-prev { left:auto; right:16px; }
[dir="rtl"] .u2g-pks-lb-next { right:auto; left:16px; }
[dir="rtl"] .u2g-pks-v3-wa-float { right:auto; left:24px; }
[dir="rtl"] .u2g-pks-gallery-all-btn { right:auto; left:14px; }

/* ── Gallery: correct mosaic — 1 big left, 2×2 right ─────────── */
.u2g-pks-gallery-mosaic {
    display: grid;
    /* Left column takes 55%, right takes 45% */
    grid-template-columns: 55fr 45fr;
    /* Right side is split into 2 rows of 2 cells each = 4 cells total */
    grid-template-rows: 220px 220px;
    gap: 4px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--u2g-border);
    height: 444px; /* 220+4+220 */
}
/* Hero: spans both rows on the left */
.u2g-pks-gm-main {
    grid-column: 1;
    grid-row: 1 / 3;
    background-color: var(--u2g-bg-alt);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: opacity .2s;
}
.u2g-pks-gm-main:hover { opacity: .93; }
/* The right side holds exactly 4 cells in a 2×2 arrangement */
/* CSS grid auto-places them into column 2, rows 1-2 */
.u2g-pks-gm-cell {
    /* Each cell gets half the right column = 2 per row */
    grid-column: 2;
    background-color: var(--u2g-bg-alt);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: opacity .2s;
    position: relative;
}
/* Override: the right side is itself a nested 2×2 grid */
/* We achieve 2×2 on the right by wrapping the 4 cells in a sub-grid container */
.u2g-pks-gm-right {
    grid-column: 2;
    grid-row: 1 / 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
}
.u2g-pks-gm-right .u2g-pks-gm-cell {
    grid-column: unset;
    background-color: var(--u2g-bg-alt);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: opacity .2s;
    position: relative;
}
.u2g-pks-gm-right .u2g-pks-gm-cell:hover { opacity: .88; }
.u2g-pks-gm-cell--more::after {
    content: attr(data-more);
    position: absolute; inset: 0;
    background: rgba(0,0,0,.52);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px; font-weight: 700; letter-spacing: .02em;
}
/* Fallback: empty cells (no image loaded) */
.u2g-pks-gm-main[style*="url('')"],
.u2g-pks-gm-right .u2g-pks-gm-cell[style*="url('')"] {
    background-image: none !important;
}

/* ── Share button: force SVG stroke to inherit ────────────────── */
.u2g-pks-v3-share-btn {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1.5px solid var(--u2g-border);
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--u2g-muted);
    transition: border-color .15s, color .15s;
    flex-shrink: 0;
    line-height: 0; /* prevents extra height from inline SVG */
}
.u2g-pks-v3-share-btn svg {
    display: block;
    stroke: currentColor; /* explicit override ensures theme doesn't clobber it */
    fill: none;
    pointer-events: none;
}
.u2g-pks-v3-share-btn:hover {
    border-color: var(--u2g-green);
    color: var(--u2g-green);
}

/* ── Lightbox: force nav + close buttons to be visible ───────── */
/* Some themes set button { color: inherit } which can make white text invisible */
.u2g-pks-lightbox {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; flex-direction: column;
    opacity: 0; transition: opacity .22s ease;
    /* Reset any theme overrides */
    font-family: inherit;
    box-sizing: border-box;
}
.u2g-pks-lightbox.is-open { opacity: 1; pointer-events: auto; }
.u2g-pks-lightbox.u2g-hidden { display: none !important; pointer-events: none; }
.u2g-pks-lightbox-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.94);
    z-index: 0;
}
.u2g-pks-lightbox-toolbar {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    flex-shrink: 0;
}
.u2g-pks-lb-counter {
    color: rgba(255,255,255,.75);
    font-size: 13px; font-weight: 600;
}
.u2g-pks-lb-close {
    /* Explicit styles — do not inherit theme button resets */
    all: unset;
    width: 40px; height: 40px;
    border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.1);
    color: #fff !important;
    display: flex !important; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
    line-height: 0;
    box-sizing: border-box;
}
.u2g-pks-lb-close:hover { background: rgba(255,255,255,.22); }
.u2g-pks-lb-close svg {
    display: block;
    stroke: #fff !important;
    fill: none;
    pointer-events: none;
}
.u2g-pks-lightbox-stage {
    position: relative; z-index: 1;
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    min-height: 0;
}
.u2g-pks-lb-img {
    max-width: 88vw; max-height: 68vh;
    object-fit: contain;
    border-radius: 4px;
    transition: opacity .18s;
    display: block;
    position: relative; z-index: 1;
}
.u2g-pks-lb-img.is-loading { opacity: 0; }
.u2g-pks-lb-nav {
    /* Explicit override — theme may reset button styles */
    all: unset;
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: 1.5px solid rgba(255,255,255,.25);
    color: #fff !important;
    display: flex !important; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s;
    z-index: 2;
    line-height: 0;
    box-sizing: border-box;
}
.u2g-pks-lb-nav:hover { background: rgba(255,255,255,.28); }
.u2g-pks-lb-nav svg {
    display: block;
    stroke: #fff !important;
    fill: none;
    pointer-events: none;
}
.u2g-pks-lb-prev { left: 16px; }
.u2g-pks-lb-next { right: 16px; }
.u2g-pks-lb-thumbs {
    position: relative; z-index: 2;
    display: flex; gap: 6px;
    overflow-x: auto; padding: 10px 16px 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.2) transparent;
    flex-shrink: 0;
}
.u2g-pks-lb-thumbs::-webkit-scrollbar { height: 3px; }
.u2g-pks-lb-thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 99px; }
.u2g-pks-lb-thumb {
    width: 62px; height: 46px;
    flex-shrink: 0; border-radius: 6px;
    background-size: cover; background-position: center;
    cursor: pointer;
    opacity: .45;
    border: 2px solid transparent;
    transition: opacity .15s, border-color .15s;
}
.u2g-pks-lb-thumb.is-active { opacity: 1; border-color: #fff; }
.u2g-pks-lb-thumb:hover { opacity: .8; }

/* ── Gallery all-photos button: z-index above mosaic ─────────── */
.u2g-pks-gallery-all-btn {
    position: absolute; bottom: 14px; right: 14px; z-index: 10;
    background: rgba(255,255,255,.95);
    border: 1.5px solid rgba(0,0,0,.12);
    border-radius: 8px; padding: 7px 14px;
    font-size: 12px; font-weight: 700; color: var(--u2g-dark);
    display: flex; align-items: center; gap: 6px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    transition: background .15s, color .15s;
    backdrop-filter: blur(4px);
    line-height: 1;
}
.u2g-pks-gallery-all-btn svg { display: block; flex-shrink: 0; }
.u2g-pks-gallery-all-btn:hover { background: #fff; color: var(--u2g-green); }

/* ── Gallery mobile: single column ───────────────────────────── */
@media (max-width: 640px) {
    .u2g-pks-gallery-mosaic {
        grid-template-columns: 1fr;
        grid-template-rows: 240px auto;
        height: auto;
    }
    .u2g-pks-gm-main { grid-row: 1; }
    .u2g-pks-gm-right {
        grid-column: 1; grid-row: 2;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 120px;
        height: 120px;
    }
    /* On mobile show only 2 of the 4 right cells */
    .u2g-pks-gm-right .u2g-pks-gm-cell:nth-child(n+3) { display: none; }
    .u2g-pks-lb-nav { display: none !important; } /* swipe only on mobile */
}

/* ── Hotel thumbnail: empty state with centered icon ─────── */
.u2g-pks-v3-hotel-img--empty {
    width: 100%;
    min-height: 160px;
    height: 100%;
    background: linear-gradient(135deg, var(--u2g-green-bg) 0%, var(--u2g-bg-alt) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--u2g-green);
    opacity: .7;
}

/* ── Hotel name: plain h3 (no <a> in v3.1 — removed view link) */
.u2g-pks-v3-hotel-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--u2g-dark);
    margin: 0;
    line-height: 1.3;
}

/* ── Total row: pax note below label ─────────────────────── */
.u2g-pks-v3-total-pax-note {
    font-size: 11px;
    color: var(--u2g-muted);
    margin-top: 3px;
    font-weight: 400;
}

/* ── Deposit note: contextual banner (not a button) ─────── */
.u2g-pks-v3-deposit-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--u2g-green-bg);
    border: 1px solid var(--u2g-green-border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--u2g-green);
    line-height: 1.5;
    margin-bottom: 14px;
}
.u2g-pks-v3-deposit-note svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--u2g-green);
}

/* ── Trust items: enforce single column with stacked label/sub */
.u2g-pks-v3-trust {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--u2g-border);
    padding-top: 14px;
    margin-bottom: 14px;
}
.u2g-pks-v3-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--u2g-dark);
}
.u2g-pks-v3-trust-item svg {
    flex-shrink: 0;
    margin-top: 2px;
}
.u2g-pks-v3-trust-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--u2g-dark);
    line-height: 1.4;
}
.u2g-pks-v3-trust-sub {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--u2g-muted);
    margin-top: 1px;
    line-height: 1.4;
}

/* ── Share button: single action (no favourite in v3.1) ─── */
.u2g-pks-v3-share-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1.5px solid var(--u2g-border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--u2g-muted);
    transition: all .15s;
    flex-shrink: 0;
}
.u2g-pks-v3-share-btn:hover {
    border-color: var(--u2g-green);
    color: var(--u2g-green);
}

/* ── Hotel thumb: ensure the image div fills its container ── */
.u2g-pks-v3-hotel-thumb {
    position: relative;
    /* Force the thumb column to actually render its height */
    min-height: 160px;
}
/* On desktop the left column of the hotel card is 260px wide.
   The image div must fill 100% height of the card. */
.u2g-pks-v3-hotel-row .u2g-pks-v3-hotel-thumb {
    display: flex;
    flex-direction: column;
}
.u2g-pks-v3-hotel-row .u2g-pks-v3-hotel-img {
    flex: 1;
    min-height: 160px;
    background-size: cover;
    background-position: center;
}

/* ── Mobile responsive tweaks ────────────────────────────── */
@media (max-width:767px) {
    /* Deposit note full width on mobile */
    .u2g-pks-v3-deposit-note { font-size:11px; padding:8px 10px; }
    /* Trust items stay single column on mobile too */
    .u2g-pks-v3-trust { gap:8px; }
    /* Reduce hotel image height on mobile */
    .u2g-pks-v3-hotel-img { min-height:140px; }
}


/* =============================================================
   v3.3 OVERRIDES — Share button green, gallery fix, hotel desc
   ============================================================= */

/* Share button: green filled pill with SVG + text label */
.u2g-pks-v3-header-top .u2g-pks-v3-share-btn,
button.u2g-pks-v3-share-btn {
    all: unset;
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    background: var(--u2g-green) !important;
    color: #fff !important;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms;
    flex-shrink: 0;
    line-height: 1;
    white-space: nowrap;
    font-family: inherit;
    text-decoration: none;
    border: none;
}
.u2g-pks-v3-header-top .u2g-pks-v3-share-btn:hover,
button.u2g-pks-v3-share-btn:hover {
    background: var(--u2g-green-dark) !important;
}
.u2g-pks-v3-header-top .u2g-pks-v3-share-btn svg,
button.u2g-pks-v3-share-btn svg {
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    stroke: #fff !important;
    fill: none !important;
    flex-shrink: 0;
    pointer-events: none;
}
.u2g-pks-v3-share-label {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
}
@media (max-width: 480px) {
    .u2g-pks-v3-share-label { display: none; }
    button.u2g-pks-v3-share-btn { padding: 0 10px; }
}

/* Edit button: outline green beside share */
.u2g-pks-v3-edit-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1.5px solid var(--u2g-border);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--u2g-green);
    text-decoration: none;
    background: #fff;
    transition: border-color 150ms, background 150ms;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
}
.u2g-pks-v3-edit-btn:hover {
    border-color: var(--u2g-green);
    background: var(--u2g-green-bg);
    color: var(--u2g-green);
}
.u2g-pks-v3-edit-btn svg {
    display: block;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
}

/* Header actions row */
.u2g-pks-v3-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Hotel photo count badge: hidden */
.u2g-pks-v3-hotel-photo-count { display: none !important; }

/* Hotel description: full text, no ellipsis */
.u2g-pks-v3-hotel-desc {
    font-size: 13px;
    line-height: 1.65;
    color: var(--u2g-muted);
    margin: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    -webkit-line-clamp: unset;
    display: block;
}

/* Empty gallery cells */
.u2g-pks-gm-cell--empty {
    background-color: var(--u2g-bg-alt) !important;
    background-image: none !important;
    cursor: default !important;
    pointer-events: none;
}
.u2g-pks-gm-cell--empty:hover { opacity: 1 !important; }

/* ── Seats availability tracker (always visible when max_pax set) ── */
.u2g-pks-v3-seats-tracker {
    margin: 0 0 16px;
    padding: 10px 0 14px;
    border-bottom: 1px solid var(--u2g-border);
}
.u2g-pks-v3-seats-bar-wrap {
    height: 6px;
    background: var(--u2g-border);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 7px;
}
.u2g-pks-v3-seats-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .4s ease;
    min-width: 4px;
}
.u2g-pks-v3-seats-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
}
.u2g-pks-v3-seats-booked {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--u2g-muted);
}
.u2g-pks-v3-seats-booked svg { flex-shrink: 0; }
.u2g-pks-v3-seats-remaining {
    font-weight: 700;
    font-size: 11px;
}

/* Sold-out urgency variant */
.u2g-pks-v3-book-urgency--sold {
    background: var(--u2g-danger-bg) !important;
    color: var(--u2g-danger) !important;
    border-color: var(--u2g-danger-border) !important;
}

/* ================================================================
   PACKAGE CARD — Seats availability system (v3.4)
   Color shifts: green (0-49%) → amber (50-79%) → red (80%+) → sold
   ================================================================ */

/* -- Availability badges on card image -- */
.u2g-pkg-card__badge--available {
    background: rgba(30,150,60,.15);
    color: #1E963C;
    border: 1px solid rgba(30,150,60,.3);
    backdrop-filter: blur(6px);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
}
.u2g-pkg-card__badge--urgent-amber {
    background: rgba(217,119,6,.82);
    color: #fff;
    backdrop-filter: blur(6px);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    animation: u2g-pulse 2.2s ease-in-out infinite;
}
.u2g-pkg-card__badge--urgent-red {
    background: rgba(220,38,38,.88);
    color: #fff;
    backdrop-filter: blur(6px);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    animation: u2g-pulse 1.6s ease-in-out infinite;
}

/* -- Seats strip: mini bar + labels above CTA -- */
.u2g-pkg-card__seats-strip {
    padding: 0;
    flex: 1;
    min-width: 0;
}
.u2g-pkg-card__seats-bar {
    height: 4px;
    background: var(--u2g-border);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 4px;
}
.u2g-pkg-card__seats-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .4s ease;
    min-width: 3px;
}
.u2g-pkg-card__seats-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 600;
    color: var(--u2g-muted);
}
.u2g-pkg-card__seats-labels svg {
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
    flex-shrink: 0;
}
.u2g-pkg-card__seats-labels span {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}


/* ================================================================
   v3.5 — Card infobar, mobile sheet, book-package upgrades polish
   ================================================================ */

/* -- Card: single compact infobar (replaces separate meta + dates) */
.u2g-pkg-card__infobar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    font-size: 11px;
    color: var(--u2g-muted);
    padding: 2px 0 4px;
}
.u2g-pkg-card__info-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.u2g-pkg-card__info-dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--u2g-lighter);
    flex-shrink: 0;
}
/* Remove old separate rows — now unified */
.u2g-pkg-card__meta,
.u2g-pkg-card__dates { display: none !important; }

/* -- Package sheet: price row inside bottom sheet -- */
.u2g-pks-sheet-price-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--u2g-border);
    margin-bottom: 14px;
}
.u2g-pks-sheet-seats-pill {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--u2g-bg-alt);
    border: 1.5px solid currentColor;
    white-space: nowrap;
    flex-shrink: 0;
}

/* -- Package single: hide desktop sidebar on mobile, show sheet -- */
@media (max-width: 767px) {
    .u2g-pks-v3-sidebar .u2g-pks-v3-book-card { display: none; }
    .u2g-pks-v3-mobile-bar { display: flex; cursor: pointer; }
    .u2g-pks-v3-mobile-bar:active { opacity: .9; }
}
@media (min-width: 768px) {
    .u2g-pks-v3-sidebar .u2g-pks-v3-book-card { display: block; }
    .u2g-pks-v3-mobile-bar { display: none !important; }
    .u2g-sheet-wrap { display: none !important; } /* sheet only for mobile */
}

/* -- Book-package: step upgrades polish -- */
.u2g-bpkg-upgrade-section {
    background: #fff;
    border: 1.5px solid var(--u2g-border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
}
.u2g-bpkg-upgrade-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--u2g-dark);
    margin: 0;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--u2g-border);
}
.u2g-upgrade-icon {
    color: var(--u2g-green);
    flex-shrink: 0;
}
.u2g-bpkg-upgrade-note {
    font-size: 12px;
    color: var(--u2g-muted);
    margin: 0;
    padding: 8px 18px 10px;
    border-bottom: 1px solid var(--u2g-border);
    background: var(--u2g-bg);
}
.u2g-bpkg-upgrade-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    cursor: pointer;
    border-bottom: 1px solid var(--u2g-border);
    transition: background 150ms;
    position: relative;
}
.u2g-bpkg-upgrade-card:last-child { border-bottom: none; }
.u2g-bpkg-upgrade-card:hover { background: var(--u2g-bg); }
.u2g-bpkg-upgrade-card.is-selected {
    background: var(--u2g-green-bg);
}
.u2g-bpkg-upgrade-card input[type="radio"] {
    position: absolute; opacity: 0; width: 0; height: 0;
}
.u2g-bpkg-upgrade-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}
.u2g-bpkg-upgrade-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--u2g-dark);
    flex: 1;
}
.u2g-bpkg-upgrade-card.is-selected .u2g-bpkg-upgrade-label {
    font-weight: 700;
    color: var(--u2g-green);
}
.u2g-bpkg-upgrade-cost {
    font-size: 13px;
    font-weight: 700;
    color: var(--u2g-dark);
    white-space: nowrap;
    flex-shrink: 0;
}
.u2g-bpkg-upgrade-card.is-selected .u2g-bpkg-upgrade-cost {
    color: var(--u2g-green);
}
/* Selection indicator dot on right */
.u2g-bpkg-upgrade-card::after {
    content: '';
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--u2g-border);
    flex-shrink: 0;
    display: inline-block;
    transition: border-color 150ms, background 150ms;
    margin-left: 10px;
}
.u2g-bpkg-upgrade-card.is-selected::after {
    border-color: var(--u2g-green);
    background: radial-gradient(circle, var(--u2g-green) 40%, transparent 40%);
}

/* -- Deposit note in book-package payment step -- */
.u2g-bpkg-deposit-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--u2g-green-bg);
    border: 1.5px solid var(--u2g-green-border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--u2g-green);
    font-weight: 600;
    line-height: 1.5;
}
.u2g-bpkg-deposit-banner svg { flex-shrink: 0; margin-top: 1px; }
.u2g-bpkg-deposit-banner strong { font-weight: 800; font-size: 15px; }
.u2g-bpkg-deposit-banner span { color: var(--u2g-mid); font-weight: 400; font-size: 12px; }

/* -- Package create form: section headings polish -- */
.u2g-create-section-head {
    font-size: 15px;
    font-weight: 800;
    color: var(--u2g-dark);
    margin: 28px 0 14px;
    padding-top: 24px;
    border-top: 1.5px solid var(--u2g-border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.u2g-create-section-head:first-of-type { margin-top: 0; border-top: none; padding-top: 0; }

/* -- Mobile responsive: book-package -- */
@media (max-width: 600px) {
    .u2g-bpkg-room-grid { grid-template-columns: 1fr; }
    .u2g-bpkg-pay-methods { flex-direction: column; }
    .u2g-bpkg-form-grid { grid-template-columns: 1fr; }
    .u2g-bpkg-field--full { grid-column: 1; }
    .u2g-bpkg-upgrade-card { flex-wrap: wrap; }
}

/* =============================================================
   v3.6 — Book-package header, room cards, transfers icon, mobile
   ============================================================= */

/* Book-package: header responsive layout */
.u2g-bpkg-header {
    display: flex;
    gap: 18px;
    margin-bottom: 24px;
    align-items: flex-start;
    background: #fff;
    border: 1.5px solid var(--u2g-border);
    border-radius: 14px;
    padding: 18px;
    flex-wrap: wrap;
}
.u2g-bpkg-thumb {
    flex-shrink: 0;
    width: 120px; height: 88px;
    background-size: cover; background-position: center;
    border-radius: 10px;
    background-color: var(--u2g-bg);
}
@media (max-width: 600px) {
    .u2g-bpkg-thumb { width: 100%; height: 160px; border-radius: 10px; }
    .u2g-bpkg-header { padding: 14px; gap: 14px; }
    .u2g-bpkg-header-info { min-width: 0 !important; }
}
.u2g-bpkg-header-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.u2g-bpkg-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--u2g-dark);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
@media (max-width: 600px) { .u2g-bpkg-title { font-size: 18px; } }
.u2g-bpkg-dates {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--u2g-muted);
}
.u2g-bpkg-dates svg { flex-shrink: 0; }
.u2g-bpkg-nights { color: var(--u2g-lighter); font-size: 12px; }
.u2g-bpkg-hotels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.u2g-bpkg-hotel-chip {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    background: var(--u2g-bg);
    padding: 3px 10px;
    border-radius: 20px;
    color: var(--u2g-mid);
    border: 1px solid var(--u2g-border);
    white-space: nowrap;
}
/* Inclusions badges */
.u2g-bpkg-included {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}
.u2g-bpkg-inc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px; font-weight: 600;
    color: var(--u2g-green);
    background: var(--u2g-green-bg);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--u2g-green-border);
    white-space: nowrap;
}
.u2g-bpkg-inc-badge svg { display: block; flex-shrink: 0; }

/* Offered by row */
.u2g-bpkg-offered-by {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--u2g-muted);
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--u2g-border);
}
.u2g-bpkg-agent-logo {
    width: 24px; height: 24px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid var(--u2g-border);
    flex-shrink: 0;
}
.u2g-bpkg-agent-init {
    width: 24px; height: 24px;
    background: var(--u2g-green-bg);
    color: var(--u2g-green);
    font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; flex-shrink: 0;
}
.u2g-bpkg-offered-by a {
    color: var(--u2g-green);
    font-weight: 600;
    text-decoration: none;
}
.u2g-bpkg-offered-by a:hover { text-decoration: underline; }

/* Room cards: top row and qty controls */
.u2g-bpkg-room-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.u2g-bpkg-room-icon {
    display: flex;
    align-items: center;
    gap: 1px;
    color: var(--u2g-green);
    flex-shrink: 0;
}
.u2g-bpkg-room-icon svg { display: block; }
.u2g-bpkg-room-type {
    font-size: 14px; font-weight: 700;
    color: var(--u2g-dark);
}
.u2g-bpkg-room-pax {
    font-size: 11px;
    color: var(--u2g-muted);
    background: var(--u2g-bg);
    border: 1px solid var(--u2g-border);
    border-radius: 20px;
    padding: 1px 8px;
}
.u2g-bpkg-room-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 4px 0 10px;
}
.u2g-bpkg-room-pp-price {
    font-size: 22px; font-weight: 800;
    color: var(--u2g-dark);
    letter-spacing: -0.02em;
}
.u2g-bpkg-room-pp-label {
    font-size: 11px;
    color: var(--u2g-muted);
}

/* Room qty stepper — themed green/dark, NOT browser amber */
.u2g-bpkg-room-qty {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid var(--u2g-border);
    border-radius: 10px;
    overflow: hidden;
    width: fit-content;
}
.u2g-qty-btn {
    /* Reset ALL browser defaults first */
    all: unset;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: var(--u2g-bg) !important;
    color: var(--u2g-dark) !important;
    cursor: pointer;
    transition: background 150ms;
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
    border: none;
}
.u2g-qty-btn:hover {
    background: var(--u2g-green-bg) !important;
    color: var(--u2g-green) !important;
}
.u2g-qty-btn svg {
    display: block;
    stroke: currentColor;
    fill: none;
    pointer-events: none;
}
.u2g-room-qty-input {
    /* Reset browser styling */
    all: unset !important;
    box-sizing: border-box !important;
    width: 44px !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--u2g-dark) !important;
    background: #fff !important;
    border-left: 1.5px solid var(--u2g-border) !important;
    border-right: 1.5px solid var(--u2g-border) !important;
    padding: 8px 0 !important;
    line-height: 1 !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}
.u2g-room-qty-input::-webkit-outer-spin-button,
.u2g-room-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Selected card: green accent */
.u2g-bpkg-room-card.is-selected .u2g-bpkg-room-qty {
    border-color: var(--u2g-green-border);
}
.u2g-bpkg-room-card.is-selected .u2g-qty-btn {
    background: var(--u2g-green-bg) !important;
}
.u2g-bpkg-room-card.is-selected .u2g-qty-btn:hover {
    background: var(--u2g-green) !important;
    color: #fff !important;
}

/* Room card selected check icon */
.u2g-bpkg-room-card::after {
    content: '';
    position: absolute;
    top: 10px; right: 10px;
    width: 20px; height: 20px;
    border: 2px solid var(--u2g-border);
    border-radius: 50%;
    background: #fff;
    transition: border-color 150ms, background 150ms;
}
.u2g-bpkg-room-card.is-selected::after {
    border-color: var(--u2g-green);
    background: var(--u2g-green);
    /* checkmark via box-shadow hack */
    box-shadow: inset 0 0 0 4px #fff;
}

/* Mobile sheet bar — inner row wrapper */
.u2g-pks-v3-mobile-bar .u2g-pks-v3-mb-price,
.u2g-pks-v3-mobile-bar .u2g-pks-v3-mb-book-btn {
    /* These should sit inside .u2g-pks-v3-mobile-bar-inner on mobile */
}

/* =============================================================
   PACKAGE CREATE / EDIT FRONTEND FORM — v3.6
   Fixes: style loading, grid layout, selects, checkboxes, mobile
   ============================================================= */

/* Wrap — full-width centered */
.u2g-create-wrap {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 20px 60px;
    box-sizing: border-box;
    font-family: inherit;
}

/* Page header row */
.u2g-create-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.u2g-create-header-info h1 {
    font-size: 26px;
    font-weight: 800;
    color: var(--u2g-dark);
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}
.u2g-create-header-info p {
    font-size: 13px;
    color: var(--u2g-muted);
    margin: 0;
}
.u2g-create-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--u2g-green);
    text-decoration: none;
    padding: 8px 14px;
    border: 1.5px solid var(--u2g-green-border);
    border-radius: 8px;
    background: var(--u2g-green-bg);
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 150ms;
}
.u2g-create-back:hover { background: var(--u2g-green); color: #fff; }

/* Alerts */
.u2g-create-success {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--u2g-green-bg);
    border: 1.5px solid var(--u2g-green-border);
    color: var(--u2g-green);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
}
.u2g-create-error {
    background: var(--u2g-danger-bg);
    border: 1.5px solid var(--u2g-danger-border);
    color: var(--u2g-danger);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Form panel */
.u2g-create-panel {
    background: #fff;
    border: 1.5px solid var(--u2g-border);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
}
.u2g-create-section {
    padding: 24px 28px;
    border-bottom: 1.5px solid var(--u2g-border);
}
.u2g-create-section:last-child { border-bottom: none; }
.u2g-create-section-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--u2g-dark);
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.u2g-create-section-title svg { color: var(--u2g-green); flex-shrink: 0; }

/* Field grid */
.u2g-create-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.u2g-create-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.u2g-create-grid--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.u2g-create-full { grid-column: 1 / -1; }

/* Field */
.u2g-create-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.u2g-create-field label {
    font-size: 12px;
    font-weight: 700;
    color: var(--u2g-mid);
    letter-spacing: 0.01em;
}
.u2g-create-req { color: var(--u2g-danger); margin-left: 2px; }

/* Inputs, selects */
.u2g-create-input,
.u2g-create-select,
.u2g-create-field input[type="text"],
.u2g-create-field input[type="number"],
.u2g-create-field input[type="date"],
.u2g-create-field input[type="email"],
.u2g-create-field select {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--u2g-border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--u2g-dark);
    background: #fff;
    box-sizing: border-box;
    transition: border-color 150ms, box-shadow 150ms;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}
.u2g-create-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.u2g-create-field select[multiple] {
    background-image: none;
    padding-right: 12px;
    height: 120px;
}
.u2g-create-field input:focus,
.u2g-create-field select:focus {
    border-color: var(--u2g-green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(30,150,60,.08);
}
.u2g-create-field input[type="file"] {
    padding: 6px 10px;
    font-size: 12px;
    color: var(--u2g-muted);
    cursor: pointer;
}

/* Thumbnail preview */
.u2g-create-thumb-preview {
    width: 120px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    border: 1.5px solid var(--u2g-border);
    display: block;
    margin-bottom: 8px;
}

/* Checkbox toggles — horizontal row */
.u2g-create-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 4px 0;
}
.u2g-create-check-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--u2g-mid);
    cursor: pointer;
    padding: 8px 14px;
    border: 1.5px solid var(--u2g-border);
    border-radius: 8px;
    transition: all 150ms;
    user-select: none;
    background: #fff;
}
.u2g-create-check-label:hover { border-color: var(--u2g-green); color: var(--u2g-green); }
.u2g-create-check-label input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--u2g-green);
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}
.u2g-create-check-label:has(input:checked) {
    border-color: var(--u2g-green);
    background: var(--u2g-green-bg);
    color: var(--u2g-green);
    font-weight: 600;
}

/* Room prices grid */
.u2g-create-room-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.u2g-create-room-card {
    border: 1.5px solid var(--u2g-border);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--u2g-bg);
}
.u2g-create-room-type {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--u2g-muted);
}
.u2g-create-room-pax {
    font-size: 10px;
    color: var(--u2g-lighter);
}
.u2g-create-room-card input {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid var(--u2g-border);
    border-radius: 7px;
    font-size: 14px;
    font-weight: 700;
    color: var(--u2g-dark);
    background: #fff;
    box-sizing: border-box;
    text-align: center;
    transition: border-color 150ms;
    font-family: inherit;
}
.u2g-create-room-card input:focus {
    border-color: var(--u2g-green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(30,150,60,.08);
}
.u2g-create-currency {
    font-size: 11px;
    color: var(--u2g-muted);
    text-align: center;
}

/* Submit row */
.u2g-create-actions {
    padding: 20px 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--u2g-bg);
    border-top: 1.5px solid var(--u2g-border);
}
.u2g-create-submit {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--u2g-green);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: background 150ms;
    font-family: inherit;
}
.u2g-create-submit:hover { background: var(--u2g-green-dark); }
.u2g-create-submit svg { display: block; flex-shrink: 0; }

/* Mobile */
@media (max-width: 600px) {
    .u2g-create-section { padding: 16px; }
    .u2g-create-grid,
    .u2g-create-grid--3,
    .u2g-create-grid--4 { grid-template-columns: 1fr; }
    .u2g-create-room-grid { grid-template-columns: 1fr 1fr; }
    .u2g-create-header { flex-direction: column; }
    .u2g-create-back { align-self: flex-start; }
    .u2g-create-actions { padding: 16px; }
}

/* =============================================================
   v3.7 — Create Package: inclusions, departure countries,
          repeater rows, itinerary, group leader, highlights
   ============================================================= */

/* -- Inclusion rows: checkbox + optional detail text ---------- */
.u2g-create-inclusion-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 10px;
    border: 1.5px solid var(--u2g-border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 150ms;
}
.u2g-create-inclusion-row:has(input:checked) {
    border-color: var(--u2g-green-border);
}
.u2g-create-inclusion-row .u2g-create-check-label {
    border: none;
    border-radius: 0;
    padding: 11px 14px;
    margin: 0;
}
.u2g-create-inclusion-row:has(input:checked) .u2g-create-check-label {
    background: var(--u2g-green-bg);
    color: var(--u2g-green);
    font-weight: 600;
}
.u2g-inc-detail {
    border-top: 1px solid var(--u2g-border);
    padding: 10px 14px;
    background: var(--u2g-bg);
    transition: all 200ms;
}
.u2g-inc-detail input {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid var(--u2g-border);
    border-radius: 7px;
    font-size: 13px;
    box-sizing: border-box;
    background: #fff;
    color: var(--u2g-dark);
    font-family: inherit;
    transition: border-color 150ms;
}
.u2g-inc-detail input:focus {
    border-color: var(--u2g-green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(30,150,60,.08);
}
.u2g-inc-detail--hidden {
    display: none;
}

/* -- Departure cities: country-grouped checkboxes ------------ */
.u2g-create-dep-countries {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.u2g-create-dep-country {
    border: 1.5px solid var(--u2g-border);
    border-radius: 10px;
    overflow: hidden;
}
.u2g-create-dep-country:has(.u2g-dep-city-cb:checked) {
    border-color: var(--u2g-green-border);
}
.u2g-create-dep-country-head {
    background: var(--u2g-bg);
    padding: 8px 12px;
    border-bottom: 1px solid var(--u2g-border);
}
.u2g-create-dep-country-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 800;
    color: var(--u2g-dark);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    user-select: none;
}
.u2g-create-dep-country-label input[type="checkbox"] {
    width: 15px; height: 15px;
    accent-color: var(--u2g-green);
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}
.u2g-create-dep-airports {
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.u2g-create-dep-airport {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms;
    font-size: 12px;
    color: var(--u2g-mid);
}
.u2g-create-dep-airport:hover { background: var(--u2g-bg); }
.u2g-create-dep-airport:has(input:checked) {
    background: var(--u2g-green-bg);
    color: var(--u2g-green);
}
.u2g-create-dep-airport input[type="checkbox"] {
    width: 14px; height: 14px;
    accent-color: var(--u2g-green);
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
}
.u2g-dep-iata {
    font-size: 10px;
    font-weight: 800;
    background: var(--u2g-border);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--u2g-dark);
    flex-shrink: 0;
}
.u2g-create-dep-airport:has(input:checked) .u2g-dep-iata {
    background: var(--u2g-green);
    color: #fff;
}
.u2g-dep-city {
    font-weight: 600;
    flex-shrink: 0;
}
.u2g-dep-airport {
    font-size: 10px;
    color: var(--u2g-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .u2g-create-dep-countries { grid-template-columns: 1fr 1fr; }
}

/* -- Repeater rows ------------------------------------------- */
.u2g-create-repeater-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border: 1.5px solid var(--u2g-border);
    border-radius: 10px;
    margin-bottom: 8px;
    background: var(--u2g-bg);
    transition: border-color 150ms;
}
.u2g-create-repeater-row:hover { border-color: var(--u2g-green-border); }
.u2g-create-repeater-row > div { flex: 1; min-width: 0; }
.u2g-create-remove-row {
    all: unset;
    box-sizing: border-box;
    width: 28px; height: 28px;
    border-radius: 6px;
    background: var(--u2g-danger-bg);
    color: var(--u2g-danger);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
    transition: background 150ms;
    border: 1px solid var(--u2g-danger-border);
}
.u2g-create-remove-row:hover { background: var(--u2g-danger); color: #fff; }
.u2g-create-remove-row svg { display: block; pointer-events: none; }
.u2g-create-add-row {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    color: var(--u2g-green);
    font-size: 12px;
    font-weight: 700;
    border: 1.5px dashed var(--u2g-green-border);
    border-radius: 8px;
    cursor: pointer;
    transition: background 150ms, border-color 150ms;
    margin-top: 4px;
    font-family: inherit;
}
.u2g-create-add-row:hover { background: var(--u2g-green-bg); border-color: var(--u2g-green); }
.u2g-create-add-row svg { display: block; flex-shrink: 0; }

/* -- Itinerary repeater: day number circle ------------------- */
.u2g-create-itin-row { align-items: flex-start; }
.u2g-create-itin-daynum {
    /* Fixed circle — must not stretch in flex row */
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: var(--u2g-green);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    align-self: flex-start;
    margin-top: 4px;
    box-sizing: border-box;
}

/* -- Textarea fields in create form -------------------------- */
.u2g-create-field textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--u2g-border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--u2g-dark);
    background: #fff;
    box-sizing: border-box;
    resize: vertical;
    min-height: 72px;
    font-family: inherit;
    transition: border-color 150ms;
    line-height: 1.5;
}
.u2g-create-field textarea:focus {
    border-color: var(--u2g-green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(30,150,60,.08);
}

/* -- Section title: smaller weight to avoid ALLCAPS issue ---- */
.u2g-create-section-title {
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
    color: var(--u2g-dark) !important;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--u2g-border);
    margin-bottom: 18px !important;
}

/* -- Package-single: highlights from meta -------------------- */
/* These read flight_detail, visa_detail etc. set in create form */
/* CSS is same, only the sub-text content changes in PHP */

/* =============================================================
   v3.8 — Departure cities repeater (replaces grid)
   ============================================================= */
.u2g-dep-repeater-wrap { display: flex; flex-direction: column; gap: 8px; }

.u2g-dep-repeater-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding: 12px 14px;
    border: 1.5px solid var(--u2g-border);
    border-radius: 10px;
    background: var(--u2g-bg);
    flex-wrap: wrap;
    transition: border-color 150ms;
}
.u2g-dep-repeater-row:has(select.u2g-dep-airport-sel option:checked:not([value=""])) {
    border-color: var(--u2g-green-border);
    background: var(--u2g-green-bg);
}
.u2g-dep-row-country { flex: 0 0 200px; min-width: 140px; }
.u2g-dep-row-airport { flex: 1; min-width: 160px; }
@media (max-width: 540px) {
    .u2g-dep-row-country,
    .u2g-dep-row-airport { flex: 1 1 100%; }
}

/* Selected departure tag pills (shown above repeater) */
.u2g-dep-selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
    min-height: 0;
}
.u2g-dep-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    background: var(--u2g-green);
    color: #fff;
    padding: 4px 10px 4px 8px;
    border-radius: 20px;
}
.u2g-dep-tag-remove {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    opacity: .7;
    transition: opacity 120ms;
    line-height: 1;
}
.u2g-dep-tag-remove:hover { opacity: 1; }

/* ──────────────────────────────────────────────────────────
   AGENT UPDATES (STORIES)
   ────────────────────────────────────────────────────────── */

/* 1. Dashboard Template Picker */
.u2g-update-tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
    margin-top: 10px;
}
.u2g-update-tpl-card {
    cursor: pointer;
    position: relative;
}
.u2g-update-tpl-card input {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}
.u2g-update-tpl-card-inner {
    background: #fff;
    border: 2px solid var(--u2g-border);
    border-radius: 12px;
    padding: 16px 10px;
    text-align: center;
    transition: all 0.2s ease;
    height: 100%;
}
.u2g-update-tpl-icon {
    color: #64748b;
    margin-bottom: 8px;
    transition: transform 0.2s ease;
}
.u2g-update-tpl-icon svg {
    width: 24px;
    height: 24px;
}
.u2g-update-tpl-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--u2g-text);
    display: block;
}
.u2g-update-tpl-card:hover .u2g-update-tpl-card-inner {
    border-color: var(--u2g-green);
    background: #f0fdf4;
}
.u2g-update-tpl-card input:checked + .u2g-update-tpl-card-inner {
    border-color: var(--u2g-green);
    background: #f0fdf4;
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.1);
}
.u2g-update-tpl-card input:checked + .u2g-update-tpl-card-inner .u2g-update-tpl-icon {
    color: var(--u2g-green);
    transform: scale(1.1);
}

/* 2. Profile Updates Row */
.u2g-updates-section {
    margin: 32px 0;
}
.u2g-updates-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--u2g-text);
}
.u2g-updates-row-wrap {
    position: relative;
    margin: 0 -20px;
    padding: 0 20px;
    overflow-x: auto;
    scrollbar-width: none;
}
.u2g-updates-row-wrap::-webkit-scrollbar { display: none; }
.u2g-updates-row {
    display: flex;
    gap: 16px;
    padding-bottom: 4px;
}
.u2g-update-card {
    flex: 0 0 120px;
    width: 120px;
    cursor: pointer;
    user-select: none;
}
.u2g-update-card-inner {
    position: relative;
    width: 120px;
    height: 160px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid var(--u2g-border);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.u2g-update-card:hover .u2g-update-card-inner {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.u2g-update-card-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.u2g-update-card-content {
    position: absolute;
    inset: 0;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.6) 100%);
    color: #fff;
}
.u2g-update-card-content:not(.has-img) {
    background: #fff;
    color: var(--u2g-text);
    justify-content: center;
    align-items: center;
    text-align: center;
}
.u2g-update-card-icon {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}
.u2g-update-card-icon svg {
    width: 18px;
    height: 18px;
}
.u2g-update-card-content:not(.has-img) .u2g-update-card-icon {
    background: #f1f5f9;
    color: var(--u2g-green);
    margin-bottom: 12px;
}
.u2g-update-card-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.u2g-update-card-caption {
    font-size: 10px;
    opacity: 0.9;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 3. Story Viewer Modal */
.u2g-update-viewer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.u2g-update-viewer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(8px);
}
.u2g-update-viewer-content {
    position: relative;
    width: 100%;
    max-width: 450px;
    height: 100%;
    max-height: 850px;
    background: #000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
@media (min-width: 768px) {
    .u2g-update-viewer-content {
        border-radius: 20px;
        height: 90vh;
    }
}
.u2g-update-viewer-progress {
    position: absolute;
    top: 15px;
    left: 10px;
    right: 10px;
    height: 3px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    overflow: hidden;
    z-index: 10;
}
.u2g-update-viewer-bar {
    height: 100%;
    background: #fff;
    width: 0%;
}
.u2g-update-viewer-header {
    position: absolute;
    top: 30px;
    left: 20px;
    right: 20px;
    z-index: 10;
    color: #fff;
    display: flex;
    align-items: center;
}
.u2g-update-viewer-agent-name {
    font-weight: 700;
    font-size: 14px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.u2g-update-viewer-close {
    position: absolute;
    top: 30px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    z-index: 11;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.u2g-update-viewer-body {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.u2g-update-viewer-media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.u2g-update-viewer-media.is-text-only {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
.u2g-update-viewer-text-box {
    position: relative;
    padding: 40px 30px;
    color: #fff;
    text-align: center;
    z-index: 5;
}
.u2g-update-viewer-tpl-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--u2g-green);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.u2g-update-viewer-caption {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.u2g-update-viewer-footer {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 10;
}
.u2g-update-viewer-cta {
    background: #fff;
    color: #000;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.u2g-update-viewer-nav {
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 2;
}
.u2g-update-viewer-prev, .u2g-update-viewer-next {
    flex: 1;
    cursor: pointer;
}

/* =============================================================
   v4.0 — COMPACT 3-COLUMN CARD REDESIGN
   Integrates the Shadcn/refero.design compact card concept.
   All rules are additive overrides — nothing from v1–3.8 removed.

   Key changes:
   ▸ Image height 192px → 148px (more cards above fold)
   ▸ Price removed from card body → glassmorphism overlay on image
   ▸ Body padding tightened: 14px 16px → 10px 12px
   ▸ Grid gap: 22px → 14px
   ▸ Hotel chips, service tags, seats strip all scaled down
   ▸ CTA becomes a footer with border-top separator
   ▸ Archive page: 3-column grid on desktop
   ▸ Card lift on hover: translateY(-2px) + shadow upgrade
   ▸ Sold-out card: opacity .72, no lift
   ▸ prefers-reduced-motion respected
   ▸ RTL: price overlay flips to left side
   ============================================================= */

/* ── 1. Grid gap ───────────────────────────────────────────── */
.u2g-pkg-grid { gap: 14px; }

/* ── 2. Card shell ─────────────────────────────────────────── */
.u2g-pkg-card {
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
    transition: transform .2s cubic-bezier(.4,0,.2,1),
                box-shadow .2s cubic-bezier(.4,0,.2,1),
                border-color .2s ease;
}
.u2g-pkg-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
    border-color: rgba(30,150,60,.28);
}
/* Sold-out: muted, no lift */
.u2g-pkg-card:has(.u2g-pkg-card__cta--sold) { opacity: .72; }
.u2g-pkg-card:has(.u2g-pkg-card__cta--sold):hover {
    transform: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
@media (prefers-reduced-motion: reduce) {
    .u2g-pkg-card,
    .u2g-pkg-card__img { transition: none !important; transform: none !important; }
}

/* ── 3. Image: shorter ───────────────────────────────────────── */
.u2g-pkg-card__img {
    height: 148px;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.u2g-pkg-card:hover .u2g-pkg-card__img { transform: scale(1.04); }

/* ── 4. Price overlay (glassmorphism chip on image) ───────────── */
/* HTML injected by render_card() inside .u2g-pkg-card__img-link  */
.u2g-pkg-card__price-overlay {
    position: absolute;
    bottom: 8px; right: 8px;
    background: rgba(13,17,23,.80);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 5px 10px;
    text-align: right;
    line-height: 1.2;
    pointer-events: none;
    z-index: 3;
    border: 1px solid rgba(255,255,255,.08);
}
.u2g-pkg-card__price-overlay .u2g-pkg-card__price-from {
    font-size: 9px;
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
    letter-spacing: .05em;
    display: block;
    font-weight: 500;
}
.u2g-pkg-card__price-overlay strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.025em;
    line-height: 1.15;
}
.u2g-pkg-card__price-overlay .u2g-pkg-card__price-pp {
    font-size: 9px;
    color: rgba(255,255,255,.50);
    display: block;
    font-weight: 400;
}
/* Hide original inline price (now in image overlay) */
.u2g-pkg-card__price { display: none !important; }

/* ── 5. Agency bar ──────────────────────────────────────────── */
.u2g-pkg-card__agency { padding: 7px 12px; }
.u2g-pkg-card__agency-logo,
.u2g-pkg-card__agency-init { width: 20px; height: 20px; font-size: 9px; }
.u2g-pkg-card__agency-name { font-size: 11px; }

/* ── 6. Card body ──────────────────────────────────────────── */
.u2g-pkg-card__body { padding: 10px 12px 0; gap: 8px; }
.u2g-pkg-card__head { flex-direction: column; gap: 0; align-items: flex-start; }
.u2g-pkg-card__title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── 7. Infobar ─────────────────────────────────────────────── */
.u2g-pkg-card__infobar { font-size: 10px; gap: 3px 5px; padding: 0 0 2px; }
.u2g-pkg-card__info-dot { width: 2px; height: 2px; background: var(--u2g-lighter); }

/* ── 8. Hotel chips ──────────────────────────────────────────── */
.u2g-pkg-card__hotels { gap: 6px; padding: 6px 8px; border-radius: 7px; }
.u2g-pkg-card__hotel-city  { font-size: 8px; letter-spacing: .08em; }
.u2g-pkg-card__hotel-name  { font-size: 10px; font-weight: 600; }
.u2g-pkg-card__hotel-stars { font-size: 8px; }
.u2g-pkg-card__hotel-n     { font-size: 9px; padding: 1px 4px; }

/* ── 9. Service chips ─────────────────────────────────────────── */
.u2g-pkg-card__services { gap: 3px; }
.u2g-pkg-card__svc { font-size: 9px; padding: 2px 6px; }

/* ── 10. Seats strip ─────────────────────────────────────────── */
.u2g-pkg-card__seats-strip  { padding: 0 0 6px; }
.u2g-pkg-card__seats-bar    { height: 4px; margin-bottom: 4px; }
.u2g-pkg-card__seats-labels { font-size: 9px; }

/* ── 11. CTA: footer separator ───────────────────────────────────── */
.u2g-pkg-card__cta {
    padding: 9px;
    font-size: 12px;
    border-radius: 0 0 9px 9px;
    margin-top: 8px;
    border-top: 1px solid var(--u2g-border);
    transition: background .18s, border-top-color .18s;
}
.u2g-pkg-card__cta:hover { border-top-color: transparent; }
.u2g-pkg-card__cta--sold {
    border-radius: 0 0 9px 9px;
    margin-top: 8px;
    border-top: 1px solid var(--u2g-border);
}

/* ── 12. Custom card: compact ───────────────────────────────────── */
.u2g-pkg-card--custom__title { font-size: 14px; }
.u2g-pkg-card--custom__desc  { font-size: 12px; }
.u2g-pkg-card--custom__cta   { font-size: 12px; padding: 9px 18px; }

/* ── 13. Archive: 3-column on desktop ───────────────────────────── */
/* archive template now uses --3col directly (patched in v4.0)  */

/* ── 14. Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
    .u2g-pkg-grid--3col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .u2g-pkg-grid--3col,
    .u2g-pkg-grid--2col { grid-template-columns: 1fr; }
    .u2g-pkg-card__img { height: 168px; }
    .u2g-pkg-card__price-overlay strong { font-size: 18px; }
    .u2g-pkg-card__title { -webkit-line-clamp: unset; display: block; }
}

/* ── 15. RTL support ──────────────────────────────────────────── */
[dir="rtl"] .u2g-pkg-card__price-overlay {
    right: auto; left: 8px; text-align: left;
}
[dir="rtl"] .u2g-pkg-card__hotel + .u2g-pkg-card__hotel {
    border-left: none; padding-left: 0;
    border-right: 1px solid var(--u2g-border); padding-right: 8px;
}

/* ── 16. Font: force Outfit on cards and filters in case theme overrides ── */
/* Outfit is enqueued by enqueue_packages() — this ensures it applies      */
.u2g-pkg-card,
.u2g-pkg-card__title,
.u2g-pkg-card__agency-name,
.u2g-pkg-card__cta,
.u2g-pkg-arch-title,
.u2g-pkg-arch-sub,
.u2g-pkg-results-bar,
.u2g-pkg-results-count {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── 17. Seats strip: tighter + cleaner progress bar ──────────── */
/* Overrides the padded version that added unwanted space         */
.u2g-pkg-card__seats-strip {
    padding: 0 0 4px;
}
.u2g-pkg-card__seats-bar {
    height: 4px;
    border-radius: 99px;
    margin-bottom: 4px;
}
.u2g-pkg-card__seats-labels {
    font-size: 10px;
    font-weight: 600;
}
/* Booked/left label row: keep on one line, don't let it push CTA down */
.u2g-pkg-card__seats-labels span { gap: 2px; }

/* ── 18. Range slider: styled green thumb + slim track ────────── */
/* Overrides any theme default that renders a plain OS-style slider */
.u2g-pkg-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 99px;
    background: var(--u2g-border);
    outline: none;
    cursor: pointer;
    accent-color: var(--u2g-green);
}
.u2g-pkg-range::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 99px;
    background: var(--u2g-border);
}
.u2g-pkg-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--u2g-green);
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 1px 6px rgba(30,150,60,.30);
    margin-top: -7px;
    transition: box-shadow .15s, transform .15s;
}
.u2g-pkg-range::-webkit-slider-thumb:hover {
    box-shadow: 0 2px 10px rgba(30,150,60,.40);
    transform: scale(1.15);
}
.u2g-pkg-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--u2g-green);
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 1px 6px rgba(30,150,60,.30);
}
.u2g-pkg-range::-moz-range-track {
    height: 4px;
    border-radius: 99px;
    background: var(--u2g-border);
}

/* =============================================================
   v4.1 — FOOTER ROW + CUSTOM CARD CENTERING + SLIDER FIX
   ============================================================= */

/* ── A. Card footer: seats bar left, CTA button right, same row ─ */
.u2g-pkg-card__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid var(--u2g-border);
    margin-top: auto;
    background: #fff;
    border-radius: 0 0 10px 10px;
}
/* Seats strip: flex child, takes remaining width */
.u2g-pkg-card__footer .u2g-pkg-card__seats-strip {
    flex: 1;
    min-width: 0;
    padding: 0;
}
/* CTA: fixed-width pill, no flex-grow */
.u2g-pkg-card__footer .u2g-pkg-card__cta {
    flex-shrink: 0;
    padding: 7px 14px;
    font-size: 11px;
    border-radius: 8px;
    margin-top: 0;
    border-top: none;
    white-space: nowrap;
}
/* Sold-out state in footer */
.u2g-pkg-card__footer .u2g-pkg-card__cta--sold {
    flex-shrink: 0;
    padding: 7px 14px;
    font-size: 11px;
    border-radius: 8px;
    margin-top: 0;
    border-top: none;
    background: var(--u2g-border);
    color: var(--u2g-muted);
    cursor: not-allowed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
/* When there are NO seats data: CTA spans full width */
.u2g-pkg-card__footer:not(:has(.u2g-pkg-card__seats-strip)) .u2g-pkg-card__cta {
    width: 100%;
}
/* Override v4.0 CTA rules that added border-top (now on footer) */
.u2g-pkg-card__footer .u2g-pkg-card__cta,
.u2g-pkg-card__footer .u2g-pkg-card__cta--sold {
    border-top: none !important;
    margin-top: 0 !important;
}

/* ── B. Custom card: consolidated at canonical block above ── */

/* ── C. Range slider: definitive fix (replaces section 18) ──── */
/* Using !important on pseudo-elements because theme may inject   */
/* its own reset later in the cascade.                            */
.u2g-pkg-range::-webkit-slider-runnable-track {
    height: 5px !important;
    background: var(--u2g-border) !important;
    border-radius: 99px !important;
}
.u2g-pkg-range::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: var(--u2g-green) !important;
    border: 3px solid #fff !important;
    box-shadow: 0 2px 6px rgba(30,150,60,.25) !important;
    margin-top: -7.5px !important;
    cursor: pointer !important;
    transition: box-shadow .15s, transform .15s !important;
}
.u2g-pkg-range::-webkit-slider-thumb:hover {
    box-shadow: 0 2px 10px rgba(30,150,60,.40) !important;
    transform: scale(1.15) !important;
}
.u2g-pkg-range::-moz-range-track {
    height: 5px !important;
    background: var(--u2g-border) !important;
    border-radius: 99px !important;
    border: none !important;
}
.u2g-pkg-range::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: var(--u2g-green) !important;
    border: 3px solid #fff !important;
    box-shadow: 0 2px 6px rgba(30,150,60,.25) !important;
    cursor: pointer !important;
}
/* Fill track green up to thumb position via accent-color (modern browsers) */
.u2g-pkg-range {
    accent-color: var(--u2g-green);
}

/* =============================================================
   v4.2 — PROPER DUAL-RANGE SLIDER
   Replaces the two stacked <input type="range"> approach which
   rendered as two separate visible sliders.

   Architecture:
   .u2g-dual-range              — position:relative container
   .u2g-dual-range__track       — grey background rail
   .u2g-dual-range__fill        — green segment between handles (JS-driven)
   .u2g-dual-range__input       — both inputs absolutely stacked, transparent
   ============================================================= */

.u2g-dual-range {
    position: relative;
    height: 20px;          /* exact thumb height — no overflow needed */
    display: flex;
    align-items: center;
    margin: 8px 0 2px;
}

/* Grey base rail — vertically centred in the 20px container */
.u2g-dual-range__track {
    position: absolute;
    left: 0; right: 0;
    height: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--u2g-border);
    border-radius: 99px;
    pointer-events: none;
    z-index: 0;
}

/* Green fill — child of __track, so left/width % are relative to track */
.u2g-dual-range__fill {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--u2g-green);
    border-radius: 99px;
    pointer-events: none;
    left: 0;
    width: 100%;
    transition: left .05s linear, width .05s linear;
}

/* Both inputs stacked, transparent, full width */
.u2g-dual-range__input {
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    -webkit-appearance: none;
    appearance: none;
    background: transparent !important;
    pointer-events: none;
    z-index: 2;
    height: 20px;   /* full container height so thumb hit-area is correct */
    outline: none;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
}

/* Thumb — pointer-events re-enabled */
.u2g-dual-range__input::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: transparent;
    height: 5px;
    border: none;
}
.u2g-dual-range__input::-webkit-slider-thumb {
    pointer-events: all;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--u2g-green);
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(30,150,60,.30);
    cursor: pointer;
    margin-top: -7.5px;  /* centre thumb on 5px track */
    transition: box-shadow .15s, transform .15s;
}
.u2g-dual-range__input::-webkit-slider-thumb:hover {
    box-shadow: 0 2px 12px rgba(30,150,60,.45);
    transform: scale(1.12);
}
.u2g-dual-range__input::-moz-range-thumb {
    pointer-events: all;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--u2g-green);
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(30,150,60,.30);
    cursor: pointer;
    transition: box-shadow .15s, transform .15s;
}
.u2g-dual-range__input::-moz-range-track {
    background: transparent;
    border: none;
    height: 5px;
}
/* hi handle on top so both are draggable when values meet */
.u2g-dual-range__input--hi { z-index: 3; }

/* =============================================================
   v4.3 — Umrah2Go contact block (replaces agent "Offered by")
   Extra services: toggle / radio / stepper / quantity in sidebar
   ============================================================= */

/* -- U2G contact block in sidebar book card ------------------ */
.u2g-pks-v3-u2g-contact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid var(--u2g-border);
    border-radius: 12px;
    background: #fff;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.u2g-pks-v3-u2g-contact-logo {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--u2g-green-bg);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border: 1.5px solid var(--u2g-green-border);
}
.u2g-pks-v3-u2g-contact-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.u2g-pks-v3-u2g-contact-brand {
    font-size: 14px;
    font-weight: 800;
    color: var(--u2g-dark);
    display: block;
    line-height: 1.2;
}
.u2g-pks-v3-u2g-contact-tag {
    font-size: 10px;
    font-weight: 600;
    color: var(--u2g-green);
    text-transform: uppercase;
    letter-spacing: .05em;
    display: block;
}
/* WhatsApp button inside contact block — reuse .u2g-pks-v3-book-agent-wa */
.u2g-pks-v3-u2g-contact .u2g-pks-v3-book-agent-wa {
    width: auto;
    margin-top: 0;
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 8px;
    flex-shrink: 0;
}
@media (max-width: 767px) {
    .u2g-pks-v3-u2g-contact { padding: 12px 14px; }
    .u2g-pks-v3-u2g-contact .u2g-pks-v3-book-agent-wa { width: 100%; justify-content: center; }
}

/* -- Extra Services widget in sidebar ----------------------- */
.u2g-pks-v3-extras {
    margin-bottom: 18px;
    border: 1.5px solid var(--u2g-border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.u2g-pks-v3-extras-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--u2g-border);
    background: var(--u2g-bg);
    font-size: 12px;
    font-weight: 700;
    color: var(--u2g-dark);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.u2g-pks-v3-extras-head svg { color: var(--u2g-green); flex-shrink: 0; }
.u2g-pks-v3-extras-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.u2g-pks-v3-extra-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--u2g-border);
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.u2g-pks-v3-extra-item:last-child { border-bottom: none; }

/* Toggle (checkbox flip) */
.u2g-pks-v3-extra-item--toggle .u2g-pks-v3-extra-toggle {
    flex-shrink: 0;
    width: 36px; height: 20px;
    border-radius: 10px;
    background: var(--u2g-border);
    position: relative;
    cursor: pointer;
    transition: background 200ms;
    border: none;
    outline: none;
    padding: 0;
    margin-top: 2px;
}
.u2g-pks-v3-extra-item--toggle .u2g-pks-v3-extra-toggle.is-on {
    background: var(--u2g-green);
}
.u2g-pks-v3-extra-toggle::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 200ms;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.u2g-pks-v3-extra-toggle.is-on::after {
    transform: translateX(16px);
}

/* Radio group (exclusive within group) */
.u2g-pks-v3-extra-item--radio {
    cursor: pointer;
}
.u2g-pks-v3-extra-item--radio.is-selected {
    background: var(--u2g-green-bg);
}
.u2g-pks-v3-extra-radio-dot {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--u2g-border);
    flex-shrink: 0;
    margin-top: 2px;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 150ms;
}
.u2g-pks-v3-extra-item--radio.is-selected .u2g-pks-v3-extra-radio-dot {
    border-color: var(--u2g-green);
    background: radial-gradient(circle, var(--u2g-green) 40%, transparent 40%);
}

/* Stepper / Quantity */
.u2g-pks-v3-extra-stepper {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid var(--u2g-border);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    margin-top: 1px;
}
.u2g-pks-v3-extra-step-btn {
    all: unset;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: var(--u2g-bg);
    color: var(--u2g-dark);
    cursor: pointer;
    font-size: 16px;
    transition: background 150ms;
    line-height: 1;
}
.u2g-pks-v3-extra-step-btn:hover { background: var(--u2g-green-bg); color: var(--u2g-green); }
.u2g-pks-v3-extra-step-val {
    width: 32px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--u2g-dark);
    border-left: 1px solid var(--u2g-border);
    border-right: 1px solid var(--u2g-border);
    line-height: 28px;
}

/* Shared extra info column */
.u2g-pks-v3-extra-info { flex: 1; min-width: 0; }
.u2g-pks-v3-extra-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--u2g-dark);
    display: block;
    line-height: 1.3;
}
.u2g-pks-v3-extra-desc {
    font-size: 11px;
    color: var(--u2g-muted);
    display: block;
    margin-top: 1px;
}
.u2g-pks-v3-extra-price {
    font-size: 11px;
    font-weight: 700;
    color: var(--u2g-green);
    display: block;
    margin-top: 2px;
}
.u2g-pks-v3-extra-price--included {
    color: var(--u2g-muted);
    font-weight: 500;
}

/* Extras total row */
.u2g-pks-v3-extras-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--u2g-bg);
    border-top: 1px solid var(--u2g-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--u2g-mid);
}
.u2g-pks-v3-extras-total-amount {
    font-size: 14px;
    font-weight: 800;
    color: var(--u2g-dark);
}

/* Responsive */
@media (max-width: 767px) {
    .u2g-pks-v3-extras { margin: 0 0 16px; }
}

/* =============================================================
   Card seats row — compact 1-line layout
   ============================================================= */
.u2g-pkg-card__seats-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
}
.u2g-pkg-card__seats-confirmed {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--u2g-mid, #64748B);
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.u2g-pkg-card__seats-confirmed svg {
    flex-shrink: 0;
}
.u2g-pkg-card__seats-remaining {
    font-weight: 700;
    flex-shrink: 0;
}

/* =============================================================
   Mobile sheet — show extras widget inside sheet body
   (extras are cloned from sidebar via JS on sheet open)
   ============================================================= */
.u2g-sheet-extras-mirror {
    margin: 0 0 16px;
    border: 1.5px solid var(--u2g-border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.u2g-sheet-extras-mirror .u2g-pks-v3-extras-head {
    padding: 10px 14px;
    font-size: 11px;
}
.u2g-sheet-extras-mirror .u2g-pks-v3-extra-item {
    padding: 10px 14px;
}
.u2g-sheet-extras-mirror .u2g-pks-v3-extras-total {
    padding: 8px 14px;
}
.u2g-pks-v3-extra-date-hint {
    font-size: 10px;
    color: var(--u2g-green);
    font-weight: 600;
    display: block;
    margin-top: 2px;
    font-style: italic;
}

/* ── Booking shortcode: back-link ─────────────────────────────────── */
.u2g-bpkg-back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--u2g-muted);
    text-decoration: none;
    margin-top: 6px;
    transition: color 150ms;
}
.u2g-bpkg-back-link:hover { color: var(--u2g-green); }

/* ── Radio extra items: pointer cursor + active bg ───────────────── */
.u2g-pks-v3-extra-item--radio {
    cursor: pointer;
    transition: background 150ms;
}
.u2g-pks-v3-extra-item--radio:hover {
    background: rgba(13,107,53,.04);
}

/* ── Focus rings for keyboard navigation ─────────────────────────── */
.u2g-pks-v3-tab:focus-visible,
.u2g-pks-v3-book-btn:focus-visible,
.u2g-pks-v3-room-opt:focus-visible,
.u2g-pks-v3-extra-toggle:focus-visible,
.u2g-pks-v3-extra-step-btn:focus-visible,
.u2g-pks-v3-faq-q:focus-visible {
    outline: 2px solid var(--u2g-green);
    outline-offset: 2px;
}

/* ── Step buttons: pressed scale feedback ────────────────────────── */
.u2g-pks-v3-extra-step-btn:active {
    transform: scale(0.9);
}
.u2g-pks-v3-book-btn:active {
    transform: scale(0.98);
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .u2g-pks-v3-extra-toggle::after {
        transition: none;
    }
    .u2g-pks-v3-seats-bar-fill {
        transition: none;
    }
}

/* ── Archive card: Land Only badge ───────────────────────────────── */
.u2g-pkg-badge--land-only {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 7px;
    border-radius: 5px;
    background: #EFF6FF;
    color: #2563EB;
    border: 1px solid #BFDBFE;
}

/* Contact box — logo + label in one row, WA button full-width below */
.u2g-pks-v3-u2g-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1.5px solid var(--u2g-border);
    border-radius: 12px;
    background: #fff;
    margin-bottom: 8px;
}
.u2g-pks-v3-u2g-contact-top-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.u2g-pks-v3-u2g-contact-logo {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--u2g-green-bg);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border: 1.5px solid var(--u2g-green-border);
}
.u2g-pks-v3-u2g-contact-logo svg { display: block; }
.u2g-pks-v3-u2g-contact-brand {
    font-size: 13px;
    font-weight: 700;
    color: var(--u2g-dark);
    line-height: 1.2;
}
.u2g-pks-v3-u2g-contact-tag { display: none; }
.u2g-pks-v3-u2g-contact-info { display: none; } /* info div no longer used — brand rendered in top-row */
/* WA button: always full width */
.u2g-pks-v3-u2g-contact .u2g-pks-v3-book-agent-wa {
    width: 100% !important;
    justify-content: center;
    padding: 9px 14px;
    font-size: 13px;
    border-radius: 8px;
    gap: 6px;
    white-space: nowrap;
    margin-top: 0;
}

/* =============================================================
   Radio group label header inside extras widget
   ============================================================= */
.u2g-pks-v3-extras-group-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--u2g-muted);
    padding: 8px 16px 4px;
    background: var(--u2g-bg);
    border-top: 1px solid var(--u2g-border);
    border-bottom: 1px solid var(--u2g-border);
    margin-top: 2px;
}
.u2g-pks-v3-extras-group-label:first-child {
    border-top: none;
    margin-top: 0;
}
.u2g-pks-v3-extras-group-label + .u2g-pks-v3-extra-item--radio { border-top: none; }
.u2g-pks-v3-extra-item--radio + .u2g-pks-v3-extra-item--radio  { border-top: none; }

/* ── WA float closing if-endif ───────────────────────────────────── */
.u2g-pks-v3-wa-float-wrap { display: contents; }