/* ===== Combined CSS extracted from Stay Confident PG Homes HTML =====
   Auto-extracted, content preserved exactly, blocks separated by markers. ===== */


/* ---- style block 1 ---- */
  :root{
    --forest:#0b3d2c;
    --forest-deep:#082a1f;
    --emerald:#1f8a5f;
    --emerald-soft:#2faf78;
    --teal:#0f6e63;
    --cream:#faf7f0;
    --cream-card:#ffffff;
    --sand:#ece2c8;
    --gold:#c9962f;
    --gold-light:#e0b65a;
    --ink:#15291f;
    --muted:#657a6d;
    --available:#22a06b;
    --booked:#d9534f;
    --none:#9aa39c;
    --shadow:0 8px 32px rgba(11,61,44,0.15);
    --shadow-lg:0 20px 50px rgba(11,61,44,0.25);
    --shadow-soft:0 2px 12px rgba(11,61,44,0.08);
    --shadow-xl:0 25px 60px rgba(11,61,44,0.3);
    --shadow-glow:0 0 40px rgba(201,150,47,0.25);
    --radius:16px;
    --radius-lg:24px;
    --font-display:'Fraunces',Georgia,'Times New Roman',serif;
    --font-body:'Fraunces',Georgia,'Times New Roman',serif;
    --glass-bg:rgba(255,255,255,0.08);
    --glass-border:rgba(201,150,47,0.2);
    --transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:var(--font-body);
    background:linear-gradient(135deg, #faf7f0 0%, #f0ebe0 50%, #e8e1d0 100%);
    color:var(--ink);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    transition:var(--transition);
  }
  h1,h2,h3,.section-title,.pref-title,.notice-callout-title{font-family:var(--font-display);}
  a{color:inherit;}
  ::selection{background:var(--gold-light);color:var(--forest);}
  button, input, select, textarea{font-family:var(--font-body);}
  button{transition:var(--transition);}
  button:hover{transform:translateY(-1px);}
  button:active{transform:translateY(0);}
  :focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
  header{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:34px 16px 24px;
    text-align:center;
    background:linear-gradient(135deg, var(--forest-deep) 0%, var(--forest) 40%, var(--emerald-soft) 100%);
    border-bottom:2px solid transparent;
    border-image:linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-light) 50%, var(--gold) 80%, transparent) 1;
    overflow:hidden;
    box-shadow:var(--shadow-lg);
  }
  header::before{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 50% 50%, rgba(201,150,47,0.15) 0%, transparent 70%);
    pointer-events:none;
  }
  header::after{
    content:'';
    position:absolute;
    left:0; right:0; bottom:0;
    height:2px;
    background:linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-light) 50%, var(--gold) 80%, transparent);
  }
  header img{
    width:84px;
    height:84px;
    border-radius:50%;
    box-shadow:0 0 0 3px var(--gold), 0 0 24px rgba(201,150,47,0.4), var(--shadow-glow);
    position:relative;
    z-index:2;
    animation:float 3s ease-in-out infinite;
    border:2px solid rgba(255,255,255,0.1);
  }
  @keyframes float{
    0%, 100%{transform:translateY(0px);}
    50%{transform:translateY(-8px);}
  }
  header h1{
    margin:16px 0 8px;
    color:#fff;
    letter-spacing:-0.5px;
    font-size:2rem;
    font-weight:700;
    text-shadow:0 8px 24px rgba(0,0,0,0.4);
    position:relative;
    z-index:2;
  }
  header p{
    margin:0 auto;
    max-width:560px;
    color:rgba(255,255,255,0.85);
    font-size:1.05rem;
    font-weight:400;
    line-height:1.7;
    letter-spacing:0.2px;
    font-family:var(--font-body);
    position:relative;
    z-index:2;
  }
  nav{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    padding:20px 16px 26px;
    background:rgba(11,61,44,0.6);
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
    border-bottom:1px solid var(--glass-border);
    position:sticky;
    top:0;
    z-index:50;
    box-shadow:var(--shadow-soft);
  }
  nav button{
    background:rgba(255,255,255,0.08);
    border:1.5px solid var(--glass-border);
    color:var(--gold-light);
    padding:11px 22px;
    border-radius:35px;
    cursor:pointer;
    font-size:0.88rem;
    font-weight:600;
    letter-spacing:0.3px;
    transition:var(--transition);
    position:relative;
    overflow:hidden;
  }
  nav button::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, transparent, rgba(255,255,255,0.1), transparent);
    transform:translateX(-100%);
    transition:transform 0.6s ease;
  }
  nav button:hover::before{
    transform:translateX(100%);
  }
  nav button:hover{
    background:rgba(201,150,47,0.18);
    border-color:var(--gold-light);
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(201,150,47,0.2);
  }
  nav button.active{
    background:linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    color:var(--forest-deep);
    font-weight:700;
    border-color:var(--gold-light);
    box-shadow:0 8px 32px rgba(201,150,47,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
  }
  section{
    max-width:1000px;
    margin:0 auto;
    padding:40px 20px 60px;
    display:none;
    animation:fadeInSection 0.6s ease;
  }
  @keyframes fadeInSection{
    from{opacity:0; transform:translateY(15px);}
    to{opacity:1; transform:translateY(0);}
  }
  section.active{display:block;}
  .section-title{
    color:var(--forest);
    font-size:1.75rem;
    font-weight:700;
    margin-bottom:32px;
    border-left:6px solid var(--gold);
    padding-left:18px;
    letter-spacing:-0.3px;
    position:relative;
  }
  .section-title::before{
    content:'';
    position:absolute;
    left:0;
    top:-10px;
    width:6px;
    height:6px;
    background:var(--gold);
    border-radius:50%;
  }
  .units-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:24px;
  }
  .unit-card{
    background:linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(250,247,240,0.9) 100%);
    border:2px solid transparent;
    border-image:linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%) 1;
    border-top:4px solid var(--emerald);
    border-radius:var(--radius-lg);
    padding:28px;
    box-shadow:var(--shadow);
    transition:var(--transition);
    position:relative;
    overflow:hidden;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
  }
  .unit-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:2px;
    background:linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
    opacity:0;
    transition:opacity 0.3s ease;
  }
  .unit-card:hover::before{
    opacity:1;
  }
  .unit-card:hover{
    box-shadow:var(--shadow-xl);
    transform:translateY(-8px);
    background:linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(255,252,248,0.95) 100%);
  }
  .unit-card h3{
    margin:0 0 16px;
    color:var(--forest);
    font-size:1.25rem;
    font-family:var(--font-display);
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:space-between;
    letter-spacing:-0.2px;
  }
  .room-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid rgba(201,150,47,0.15);
    font-size:0.95rem;
    color:var(--ink);
    transition:var(--transition);
  }
  .room-row:hover{
    background:rgba(201,150,47,0.05);
    padding-left:6px;
    padding-right:6px;
    border-radius:6px;
  }
  .room-row:last-child{border-bottom:none;}
  .badge{
    padding:6px 16px;
    border-radius:25px;
    font-size:0.78rem;
    font-weight:700;
    color:#fff;
    cursor:default;
    user-select:none;
    letter-spacing:0.4px;
    box-shadow:var(--shadow-soft);
    transition:var(--transition);
    text-transform:uppercase;
  }
  .badge.available{background:linear-gradient(135deg, #22a06b 0%, #16a34a 100%); box-shadow:0 0 20px rgba(34,160,107,0.3);}
  .badge.booked{background:linear-gradient(135deg, #d9534f 0%, #dc2626 100%); box-shadow:0 0 20px rgba(217,83,79,0.3);}
  .badge.none{background:linear-gradient(135deg, #9aa39c 0%, #7c8b87 100%); opacity:0.8;}
  .badge.soon{background:linear-gradient(135deg, #f39c12 0%, #f97316 100%); box-shadow:0 0 20px rgba(243,156,18,0.3);}
  .badge.editable{cursor:pointer; box-shadow:0 0 0 2px rgba(201,150,47,0.6) inset, 0 0 15px rgba(201,150,47,0.25);}
  .badge.editable:hover{transform:scale(1.08); box-shadow:0 0 0 2px rgba(201,150,47,0.8) inset, 0 0 20px rgba(201,150,47,0.35);}
  .room-row.is-none{opacity:0.55;}
  /* Performance optimization for rendering 500+ room cards */
  .units-grid{will-change:contents;}
  .room-row{will-change:auto;contain:layout;}
  .unit-card{transform:translateZ(0);backface-visibility:hidden;}

  /* Redesigned admin "add room" bar: one clear, labeled control per room type
     instead of a stack of identical unlabeled "+ Add Room" pills. */
  .room-type-admin-bar{
    display:flex !important;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin:10px 0 6px !important;
    padding:8px 12px;
    background:linear-gradient(135deg, rgba(31,138,95,0.07), rgba(201,150,47,0.07));
    border:1px solid rgba(201,150,47,0.25);
    border-radius:12px;
  }
  .room-type-admin-bar .rt-label{
    font-size:12.5px;
    font-weight:800;
    color:var(--forest);
    opacity:1;
    letter-spacing:0.2px;
  }
  .room-type-admin-bar .rt-count{
    font-weight:600;
    color:var(--muted);
    margin-left:4px;
  }
  .room-type-admin-bar .rt-add-btn{
    font-size:12px;
    font-weight:700;
    padding:6px 14px;
    border-radius:20px;
    cursor:pointer;
    border:1px solid var(--emerald);
    background:linear-gradient(135deg, var(--emerald), var(--emerald-soft));
    color:#fff;
    white-space:nowrap;
    box-shadow:var(--shadow-soft);
    transition:var(--transition);
  }
  .room-type-admin-bar .rt-add-btn:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(31,138,95,0.3);}
  @media (max-width:420px){
    .room-type-admin-bar{flex-wrap:wrap;}
    .room-type-admin-bar .rt-add-btn{margin-left:auto;}
  }

  .unit-summary-strip{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
    margin-bottom:8px;
  }
  .mini-badge{
    font-size:0.7rem;
    font-weight:700;
    padding:4px 11px;
    border-radius:12px;
    color:#fff;
    letter-spacing:0.3px;
    white-space:nowrap;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
    transition:var(--transition);
  }
  .mini-badge.available{background:linear-gradient(135deg, #22a06b, #16a34a);}
  .mini-badge.booked{background:linear-gradient(135deg, #d9534f, #dc2626);}
  .mini-badge.none{background:linear-gradient(135deg, #9aa39c, #7c8b87);}
  .mini-badge.soon{background:linear-gradient(135deg, #f39c12, #f97316);}
  .mini-badge:hover{transform:scale(1.05); box-shadow:0 4px 12px rgba(0,0,0,0.2);}
  .unit-toggle-btn{
    margin-left:auto;
    background:rgba(255,255,255,0.7);
    border:2px solid var(--sand);
    color:var(--forest);
    font-size:0.78rem;
    font-weight:700;
    padding:6px 14px;
    border-radius:18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
    white-space:nowrap;
    transition:var(--transition);
  }
  .unit-toggle-btn:hover{background:var(--sand); box-shadow:var(--shadow-soft);}
  .unit-toggle-btn.open{background:linear-gradient(135deg, var(--forest), var(--emerald)); color:#fff; border-color:var(--emerald); box-shadow:0 6px 16px rgba(31,138,95,0.3);}
  .room-rows-wrap{margin-top:8px;}

  .notice-callout{
    background:linear-gradient(135deg, rgba(255,255,255,0.9), rgba(250,247,240,0.85));
    border:2px solid transparent;
    border-image:linear-gradient(135deg, var(--gold), var(--gold-light)) 1;
    border-left:5px solid var(--gold);
    border-radius:var(--radius-lg);
    padding:22px 24px;
    margin-bottom:24px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    transition:var(--transition);
  }
  .notice-callout:hover{
    box-shadow:var(--shadow-lg);
    transform:translateY(-2px);
  }
  .notice-callout-title{
    font-weight:700;
    color:var(--forest);
    font-size:1.05rem;
    margin-bottom:10px;
    letter-spacing:-0.2px;
  }
  .notice-callout-link{
    display:inline-block;
    margin-bottom:10px;
    color:var(--teal);
    font-weight:700;
    text-decoration:none;
    word-break:break-all;
    transition:var(--transition);
    position:relative;
  }
  .notice-callout-link::after{
    content:'';
    position:absolute;
    bottom:-2px;
    left:0;
    width:0;
    height:2px;
    background:var(--teal);
    transition:width 0.3s ease;
  }
  .notice-callout-link:hover::after{width:100%;}
  .notice-callout-note{
    color:var(--muted);
    font-size:0.9rem;
    line-height:1.6;
  }
  .notice-callout.compact{padding:16px 20px;margin-bottom:16px;}

  .admin-bar{
    display:flex;
    gap:10px;
    align-items:center;
    margin-bottom:18px;
    flex-wrap:wrap;
  }
  .admin-bar input{
    padding:11px 14px;
    border-radius:10px;
    border:2px solid var(--sand);
    background:linear-gradient(135deg, rgba(255,255,255,0.95), rgba(250,247,240,0.9));
    color:var(--ink);
    width:160px;
    transition:var(--transition);
    font-weight:500;
  }
  .admin-bar input:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(201,150,47,0.2);
  }
  .admin-bar input:disabled{
    background:var(--sand);
    color:var(--muted);
    cursor:not-allowed;
    opacity:0.7;
  }
  .admin-bar button, .form-card button{
    padding:13px 24px;
    border-radius:12px;
    border:none;
    background:linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    color:var(--forest-deep);
    font-weight:700;
    letter-spacing:0.4px;
    cursor:pointer;
    box-shadow:0 6px 20px rgba(201,150,47,0.3);
    transition:var(--transition);
    text-transform:uppercase;
    font-size:0.9rem;
  }
  .admin-bar button:hover, .form-card button:hover{
    background:linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
    box-shadow:0 10px 30px rgba(201,150,47,0.4);
    transform:translateY(-2px);
  }
  .pill{
    padding:5px 13px;
    border-radius:20px;
    font-size:0.8rem;
    background:var(--sand);
    color:var(--forest);
    font-weight:600;
  }

  .form-card{
    background:linear-gradient(135deg, rgba(255,255,255,0.95), rgba(250,247,240,0.9));
    border:2px solid transparent;
    border-image:linear-gradient(135deg, var(--gold), var(--gold-light)) 1;
    border-top:5px solid var(--emerald);
    border-radius:var(--radius-lg);
    padding:36px;
    max-width:560px;
    margin:0 auto;
    box-shadow:var(--shadow);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
  }
  .form-card label{
    display:block;
    margin:18px 0 8px;
    font-size:0.9rem;
    color:var(--forest);
    font-weight:700;
    letter-spacing:0.1px;
  }
  .form-card select, .form-card input, .form-card textarea{
    width:100%;
    padding:13px 15px;
    border-radius:10px;
    border:2px solid var(--sand);
    background:linear-gradient(135deg, rgba(255,255,255,0.98), rgba(253,251,244,0.95));
    color:var(--ink);
    font-size:0.95rem;
    transition:var(--transition);
    font-weight:500;
  }
  .form-card select:focus, .form-card input:focus, .form-card textarea:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(201,150,47,0.2);
    background:linear-gradient(135deg, rgba(255,255,255,1), rgba(255,253,250,0.98));
  }
  .form-card textarea{resize:vertical; min-height:80px;}
  .form-card button{width:100%; margin-top:24px; font-size:0.95rem;}
  .form-card label .req{color:var(--booked); margin-left:3px;}
  .form-card select.field-error, .form-card input.field-error, .form-card textarea.field-error{
    border-color:var(--booked) !important;
    box-shadow:0 0 0 3px rgba(217,83,79,0.18);
  }
  .status-msg{
    margin-top:18px;
    font-size:0.9rem;
    font-weight:600;
    padding:14px 18px;
    border-radius:10px;
    display:flex;
    align-items:center;
    gap:10px;
    animation:slideInUp 0.4s ease;
  }
  .status-msg.error{
    color:var(--booked);
    background:linear-gradient(135deg, rgba(217,83,79,0.1), transparent);
    border:1px solid rgba(217,83,79,0.3);
  }
  .status-msg.success{
    color:var(--emerald);
    background:linear-gradient(135deg, rgba(34,160,107,0.1), transparent);
    border:1px solid rgba(34,160,107,0.3);
  }
  .map-wrap{
    border-radius:var(--radius-lg);
    overflow:hidden;
    border:2px solid transparent;
    border-image:linear-gradient(135deg, var(--gold), var(--gold-light)) 1;
    box-shadow:var(--shadow);
  }
  .map-wrap iframe{
    width:100%;
    height:380px;
    border:0;
  }
  .loc-card{
    background:linear-gradient(135deg, rgba(255,255,255,0.95), rgba(250,247,240,0.9));
    border:2px solid transparent;
    border-image:linear-gradient(135deg, var(--gold), var(--gold-light)) 1;
    border-top:5px solid var(--gold);
    border-radius:var(--radius-lg);
    padding:24px;
    box-shadow:var(--shadow-soft);
    transition:var(--transition);
    backdrop-filter:blur(5px);
  }
  .loc-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);}
  .loc-card h3{margin:0 0 10px;color:var(--forest);font-size:1.05rem;}
  .loc-card input{width:100%;padding:9px 10px;border-radius:8px;border:1px solid var(--sand);background:#fdfbf4;font-size:0.85rem;margin-bottom:8px;}
  .loc-card .loc-btn-row{display:flex;gap:8px;flex-wrap:wrap;}
  .loc-card .loc-btn-row button, .loc-card .loc-btn-row a{padding:8px 12px;border-radius:8px;border:1px solid var(--gold);background:#fff;color:var(--forest);font-weight:700;font-size:0.8rem;text-decoration:none;cursor:pointer;text-align:center;min-height:40px;display:inline-flex;align-items:center;justify-content:center;}
  .loc-card .loc-btn-row a.primary{background:var(--gold);}
  .loc-card .loc-btn-row button:disabled{opacity:.6;cursor:not-allowed;border-color:var(--sand);color:var(--muted);background:#f4f1e8;}
  @media (max-width:480px){
    .loc-card .loc-btn-row{flex-direction:column;}
    .loc-card .loc-btn-row button, .loc-card .loc-btn-row a{width:100%;min-height:44px;font-size:0.85rem;}
  }
  .loc-card .loc-status{font-size:0.75rem;color:var(--teal);margin-top:6px;font-weight:600;}
  .loc-card .loc-empty{font-size:0.78rem;color:var(--muted);margin-bottom:8px;}
  .loc-card .map-wrap{margin-top:10px;}
  .loc-card .map-wrap iframe{height:200px;}
  .contact-info{
    margin-top:16px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
  }
  .contact-info a{
    color:var(--forest);
    text-decoration:none;
    background:linear-gradient(135deg, rgba(255,255,255,0.95), rgba(250,247,240,0.9));
    padding:14px 24px;
    border-radius:12px;
    border:2px solid var(--sand);
    border-bottom:3px solid var(--emerald);
    font-weight:600;
    box-shadow:var(--shadow-soft);
    transition:var(--transition);
    display:inline-block;
  }
  .contact-info a:hover{
    background:linear-gradient(135deg, rgba(255,255,255,1), rgba(255,252,248,0.95));
    border-bottom-color:var(--emerald-soft);
    transform:translateY(-4px);
    box-shadow:var(--shadow-lg);
  }
  footer{
    text-align:center;
    padding:40px 20px;
    font-size:0.85rem;
    color:rgba(255,255,255,0.75);
    background:linear-gradient(180deg, rgba(11,61,44,0.6) 0%, var(--forest-deep) 100%);
    border-top:2px solid transparent;
    border-image:linear-gradient(90deg, transparent, var(--gold), transparent) 1;
    box-shadow:var(--shadow-sm);
  }
  footer a{
    color:var(--gold);
    font-weight:600;
    text-decoration:none;
    transition:var(--transition);
  }
  footer a:hover{
    color:var(--gold-light);
    text-decoration:underline;
  }
  .small-note{
    font-size:0.78rem;
    color:var(--muted);
    margin-top:6px;
  }
  .legend{
    display:flex;
    gap:16px;
    margin-bottom:16px;
    font-size:0.85rem;
    flex-wrap:wrap;
  }
  .legend span{display:flex; align-items:center; gap:6px; color:var(--muted); font-weight:600;}
  .dot{width:10px;height:10px;border-radius:50%;display:inline-block;}

.bed-layout{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.bed{padding:8px;border-radius:8px;border:2px solid #ddd;cursor:pointer;font-size:20px}
.bed.free{background:#dcfce7}.bed.occ{background:#fecaca}
.bed-hint{font-size:11.5px;color:var(--forest,#0b3d2c);opacity:.8;margin-top:6px;font-weight:600}
.progress{height:8px;background:#eee;border-radius:10px;margin:8px 0}
.progress div{height:100%;background:#1f8a5f;border-radius:10px}
.stats-mini{font-size:.8rem;color:var(--muted);margin-top:6px}
.interest{background:#fff3cd;padding:4px 8px;border-radius:8px;margin-top:6px;font-size:12px;cursor:pointer}


.enquiry-container{margin-top:6px;padding:6px 8px;background:#fff3cd;border-radius:8px;font-size:12px;position:relative;display:inline-block}
.enquiry-tooltip{display:none;position:absolute;left:0;bottom:120%;background:#222;color:#fff;padding:8px;border-radius:8px;min-width:180px;z-index:999}
.enquiry-container:hover .enquiry-tooltip{display:block}
.enquiry-edit-btn{display:none;margin-top:6px;font-size:11px;padding:2px 6px}
.admin-mode .enquiry-edit-btn{display:inline-block}

/* ---------- Preference Questionnaire ---------- */
.pref-card{background:linear-gradient(135deg, rgba(255,255,255,0.95), rgba(250,247,240,0.9));border:2px solid transparent;border-image:linear-gradient(135deg, var(--gold), var(--gold-light)) 1;border-top:5px solid var(--gold);border-radius:var(--radius-lg);padding:32px;margin-bottom:28px;box-shadow:var(--shadow);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);transition:var(--transition);}
.pref-title{font-size:1.25rem;font-weight:800;color:var(--forest);margin-bottom:4px;display:flex;align-items:center;gap:8px;}
.pref-sub{color:var(--muted);font-size:0.88rem;margin-bottom:18px;}
.pref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;}
.pref-field label{display:block;font-size:0.82rem;font-weight:700;color:var(--forest);margin-bottom:6px;line-height:1.3;}
.pref-field input, .pref-field select{width:100%;padding:12px 14px;border-radius:10px;border:2px solid var(--sand);background:linear-gradient(135deg, rgba(255,255,255,0.98), rgba(253,251,244,0.95));color:var(--ink);font-size:0.9rem;transition:var(--transition);font-weight:500;}
.pref-field input:focus, .pref-field select:focus{outline:2px solid var(--gold-light);}
.pref-actions{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;}
.pref-actions button{padding:14px 26px;border-radius:12px;border:none;background:linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);color:var(--forest);font-weight:700;cursor:pointer;font-size:0.94rem;box-shadow:0 6px 20px rgba(201,150,47,0.3);transition:var(--transition);text-transform:uppercase;letter-spacing:0.4px;}
.pref-actions button:hover{background:linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);box-shadow:0 10px 30px rgba(201,150,47,0.4);transform:translateY(-2px);}
.pref-skip{background:transparent!important;border:1px solid var(--sand)!important;color:var(--muted)!important;}
.pref-skip:hover{background:var(--sand)!important;}
.pref-summary-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;background:linear-gradient(90deg,var(--sand),#fff);border:1px solid var(--sand);border-radius:12px;padding:14px 18px;margin-bottom:20px;font-size:0.9rem;font-weight:700;color:var(--forest);box-shadow:var(--shadow);}
.pref-summary-bar button{padding:9px 16px;border-radius:9px;border:1px solid var(--gold);background:#fff;color:var(--forest);font-weight:700;cursor:pointer;white-space:nowrap;}
.pref-summary-bar button:hover{background:var(--sand);}
.pref-admin-item{background:#fff;border:1px solid var(--sand);border-radius:10px;padding:14px;margin-bottom:14px;}
.pref-admin-item .pref-admin-tag{display:inline-block;background:var(--emerald);color:#fff;font-size:0.7rem;font-weight:700;padding:2px 10px;border-radius:20px;margin-bottom:8px;}
.pref-admin-item label{display:block;font-size:0.8rem;color:var(--muted);font-weight:700;margin:8px 0 4px;}
.pref-admin-item input{width:100%;padding:9px 10px;border-radius:7px;border:1px solid var(--sand);}

/* ---------- Preference Modal (popup presentation for the questionnaire above) ---------- */
.pref-modal-overlay{
  position:fixed; inset:0; z-index:3000;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(11,61,44,0.55);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.35s ease;
}
.pref-modal-overlay.pref-modal-open{
  opacity:1; visibility:visible; pointer-events:auto;
}
.pref-modal-overlay .pref-card{
  position:relative;
  width:100%; max-width:620px; max-height:88vh; overflow-y:auto;
  margin:0;
  background:rgba(250,246,236,0.88);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid rgba(201,150,47,0.55);
  box-shadow:0 26px 70px rgba(11,61,44,0.5), 0 0 0 1px rgba(201,150,47,0.15) inset;
  transform:scale(0.92) translateY(14px);
  opacity:0;
  transition:transform 0.4s cubic-bezier(.16,1,.3,1), opacity 0.32s ease;
}
.pref-modal-overlay.pref-modal-open .pref-card{
  transform:scale(1) translateY(0);
  opacity:1;
}
.pref-modal-overlay .pref-title{ padding-right:40px; }
.pref-modal-msg{
  background:var(--sand);
  color:var(--teal);
  font-size:0.85rem;
  font-weight:600;
  border-radius:10px;
  padding:10px 14px;
  margin:0 0 18px;
}
.pref-modal-close{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--sand); background:#fff; color:var(--forest);
  font-size:1.05rem; font-weight:700; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow);
  transition:transform 0.15s ease, background 0.2s ease, color 0.2s ease;
}
.pref-modal-close:hover, .pref-modal-close:focus-visible{ background:var(--gold); color:#fff; transform:rotate(90deg); }
body.pref-modal-active{ overflow:hidden; }
.pref-update-btn{
  padding:9px 16px; border-radius:9px; border:1px solid var(--gold);
  background:#fff; color:var(--forest); font-weight:700; cursor:pointer; font-size:0.85rem;
  white-space:nowrap;
}
.pref-update-btn:hover{ background:var(--gold); color:#fff; }
.filter-bar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-bottom:15px; padding:12px; background:#fff; border-radius:10px; box-shadow:var(--shadow);
}
@media (max-width:600px){
  .pref-modal-overlay{ padding:12px; }
  .pref-modal-overlay .pref-card{ padding:20px; max-height:92vh; }
  .pref-modal-overlay .pref-grid{ grid-template-columns:1fr; }
  .pref-modal-close{ top:10px; right:10px; }
}
@media (prefers-reduced-motion: reduce){
  .pref-modal-overlay, .pref-modal-overlay .pref-card{ transition:none; }
}


.reveal{opacity:0;transform:translateY(50px) scale(.96);filter:blur(8px);transition:all .9s cubic-bezier(.2,.8,.2,1);will-change:transform,opacity}
.reveal.show{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}

/* ============================================================
   NEW: Premium hospitality landing-flow sections (sc- prefix)
   Additive only — does not touch any existing rule above.
   ============================================================ */
.sc-fade{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);}
.sc-fade.sc-show{opacity:1;transform:translateY(0);}
.sc-lede{max-width:760px;margin:0 auto 22px;text-align:center;color:var(--muted);font-size:1.02rem;line-height:1.7;}
.sc-lede b{color:var(--forest);}
.sc-checklist{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:800px;margin:0 auto 8px;}
.sc-checklist span{background:#fff;border:1px solid var(--sand);border-left:4px solid var(--emerald);border-radius:10px;padding:10px 16px;font-weight:600;color:var(--forest);box-shadow:var(--shadow);}
.sc-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;}
.sc-card{background:var(--cream-card);border:1px solid var(--sand);border-radius:16px;padding:20px;box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease;text-align:center;}
.sc-card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(11,61,44,0.18);}
.sc-card .sc-icon{font-size:1.7rem;color:var(--gold);margin-bottom:10px;}
.sc-card h4{margin:0 0 6px;color:var(--forest);font-size:1.02rem;}
.sc-card p{margin:0;color:var(--muted);font-size:0.86rem;line-height:1.5;}
.sc-stay-card{background:linear-gradient(180deg,#fff,var(--cream));border:1px solid var(--sand);border-top:4px solid var(--gold);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);transition:transform .25s ease;}
.sc-stay-card:hover{transform:translateY(-5px);}
.sc-stay-photo{height:150px;background:linear-gradient(135deg,var(--emerald),var(--teal));display:flex;align-items:center;justify-content:center;font-size:2.4rem;color:rgba(255,255,255,0.9);}
.sc-stay-body{padding:16px;}
.sc-stay-body h4{margin:0 0 8px;color:var(--forest);}
.sc-stay-body p{margin:0 0 14px;color:var(--muted);font-size:0.88rem;line-height:1.55;}
.sc-stay-actions{display:flex;gap:8px;flex-wrap:wrap;}
.sc-stay-actions button, .sc-stay-actions a{flex:1;text-align:center;padding:9px 10px;border-radius:8px;border:none;background:var(--gold);color:var(--forest);font-weight:700;cursor:pointer;text-decoration:none;font-size:0.86rem;}
.sc-stay-actions a.secondary{background:rgba(31,138,95,0.12);color:var(--emerald);border:1px solid var(--emerald);}
.sc-chip-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.sc-chip{background:#fff;border:1px solid var(--gold);color:var(--forest);border-radius:30px;padding:9px 18px;font-weight:600;font-size:0.88rem;box-shadow:var(--shadow);}
.sc-community-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.sc-community-card{background:var(--forest);color:#fff;border-radius:16px;padding:20px;box-shadow:var(--shadow);}
.sc-community-card h4{margin:0 0 6px;color:var(--gold-light);}
.sc-community-card p{margin:0;color:rgba(255,255,255,0.82);font-size:0.86rem;line-height:1.55;}
.sc-vacancy-box{max-width:640px;margin:0 auto;background:linear-gradient(135deg,var(--forest),var(--teal));color:#fff;border-radius:18px;padding:32px 26px;text-align:center;box-shadow:var(--shadow);border:1px solid var(--gold);}
.sc-vacancy-box p{margin:8px 0;line-height:1.7;color:rgba(255,255,255,0.92);}
.sc-vacancy-box .sc-icon{font-size:2.2rem;color:var(--gold-light);}
.sc-cta-block{text-align:center;margin:34px 0 6px;}
.sc-cta-block button{background:var(--gold);color:var(--forest);border:none;padding:16px 34px;border-radius:40px;font-weight:800;font-size:1.02rem;cursor:pointer;box-shadow:0 8px 24px rgba(201,150,47,0.4);animation:scGoldPulse 2.6s infinite;}
@keyframes scGoldPulse{0%,100%{box-shadow:0 8px 24px rgba(201,150,47,0.4);}50%{box-shadow:0 8px 30px rgba(201,150,47,0.7);}}
.sc-home-hero{text-align:center;padding:6px 0 10px;}
.sc-home-hero h2{color:var(--forest);font-size:1.5rem;margin:0 0 8px;}
.sc-hero-btn-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px;}
.sc-hero-btn-grid button, .sc-hero-btn-grid a{padding:12px 20px;border-radius:30px;border:none;background:var(--emerald);color:#fff;font-weight:700;cursor:pointer;font-size:0.9rem;text-decoration:none;box-shadow:var(--shadow);transition:transform .2s ease,filter .2s ease;}
.sc-hero-btn-grid button:hover, .sc-hero-btn-grid a:hover{transform:translateY(-3px);filter:brightness(1.08);}
.sc-hero-btn-grid .sc-primary{background:var(--gold);color:var(--forest);}
.sc-breadcrumb{max-width:1000px;margin:0 auto 10px;padding:0 18px;font-size:0.84rem;color:var(--muted);}
.sc-breadcrumb b{color:var(--forest);}
.sc-search-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.sc-search-bar input{flex:1;min-width:180px;padding:10px 14px;border-radius:30px;border:1px solid var(--sand);background:#fff;font-size:0.9rem;}
@media(max-width:640px){.sc-home-hero h2{font-size:1.25rem;}}

/* ========== GLOBAL SCROLLBAR STYLING ========== */
::-webkit-scrollbar{
  width:12px;
  height:12px;
}
::-webkit-scrollbar-track{
  background:linear-gradient(180deg, rgba(201,150,47,0.05), transparent);
}
::-webkit-scrollbar-thumb{
  background:linear-gradient(135deg, var(--gold), var(--gold-light));
  border-radius:10px;
  border:2px solid transparent;
  background-clip:content-box;
  transition:var(--transition);
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(135deg, var(--gold-light), var(--gold));
  background-clip:content-box;
}

/* ========== SMOOTH ANIMATIONS ========== */
@keyframes slideInUp{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.unit-card{
  animation:slideInUp 0.6s ease forwards;
}
.unit-card:nth-child(1){animation-delay:0.05s;}
.unit-card:nth-child(2){animation-delay:0.1s;}
.unit-card:nth-child(3){animation-delay:0.15s;}
.unit-card:nth-child(4){animation-delay:0.2s;}
.unit-card:nth-child(n+5){animation-delay:0.25s;}

/* ========== FOCUS STATES ========== */
button:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}

input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
}

/* ========== ENHANCED CTA BUTTON ========== */
.sc-cta-block button{
  background:linear-gradient(135deg, var(--gold), var(--gold-light));
  color:var(--forest);
  border:none;
  padding:16px 34px;
  border-radius:40px;
  font-weight:800;
  font-size:1.02rem;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(201,150,47,0.35);
  animation:scGoldPulse 2.6s infinite;
  transition:var(--transition);
}
.sc-cta-block button:hover{
  box-shadow:0 12px 36px rgba(201,150,47,0.45);
  transform:translateY(-2px);
}

/* ========== ENHANCED HERO BUTTONS ========== */
.sc-hero-btn-grid button, .sc-hero-btn-grid a{
  padding:13px 24px;
  border-radius:32px;
  border:none;
  background:linear-gradient(135deg, var(--emerald), var(--emerald-soft));
  color:#fff;
  font-weight:700;
  cursor:pointer;
  font-size:0.92rem;
  text-decoration:none;
  box-shadow:var(--shadow);
  transition:var(--transition);
}
.sc-hero-btn-grid button:hover, .sc-hero-btn-grid a:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
  background:linear-gradient(135deg, var(--emerald-soft), var(--emerald));
}
.sc-hero-btn-grid .sc-primary{
  background:linear-gradient(135deg, var(--gold), var(--gold-light));
  color:var(--forest);
}
.sc-hero-btn-grid .sc-primary:hover{
  background:linear-gradient(135deg, var(--gold-light), var(--gold));
}

/* ========== RESPONSIVE ENHANCEMENTS ========== */
@media(max-width:768px){
  .units-grid{
    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    gap:18px;
  }
  
  header h1{
    font-size:2rem;
  }
  
  .section-title{
    font-size:1.5rem;
  }
  
  nav button{
    padding:10px 18px;
    font-size:0.82rem;
  }
}

@media(max-width:480px){
  .units-grid{
    grid-template-columns:1fr;
  }
  
  .unit-card{
    padding:20px;
  }
  
  header{
    padding:24px 16px 18px;
  }
  
  header img{
    width:64px;
    height:64px;
  }
  
  header h1{
    margin:12px 0 6px;
    font-size:1.4rem;
  }

  header p{
    font-size:0.92rem;
    line-height:1.5;
  }
}

/* ---- style block 2 ---- */
  /* ---- Units stack full-width; each unit now hosts its own room grid ---- */
  #unitsGrid{
    display:flex;
    flex-direction:column;
    gap:34px;
  }

  /* ---- Unit header: premium title treatment ---- */
  #unitsGrid .unit-card{
    padding:24px 24px 26px;
  }
  #unitsGrid .unit-card h3{
    font-size:1.35rem;
    letter-spacing:0.3px;
    padding-bottom:14px;
    margin-bottom:16px;
    border-bottom:1px solid rgba(201,150,47,0.35);
    position:relative;
  }
  #unitsGrid .unit-card h3::before{
    content:"🏠";
    font-size:1.05rem;
    margin-right:9px;
    filter:drop-shadow(0 2px 4px rgba(201,150,47,0.35));
  }
  #unitsGrid .unit-card h3::after{
    content:"";
    position:absolute;
    left:0; bottom:-1px;
    width:56px; height:3px;
    border-radius:3px;
    background:linear-gradient(90deg,var(--gold),var(--gold-light));
  }

  /* ---- Unit summary strip: elegant status chip row ---- */
  #unitsGrid .unit-summary-strip{
    margin-bottom:6px;
  }
  #unitsGrid .mini-badge{
    padding:4px 12px;
    border-radius:20px;
    box-shadow:0 3px 8px rgba(11,61,44,0.15);
    letter-spacing:0.3px;
  }
  #unitsGrid .unit-toggle-btn{
    border-radius:30px;
    padding:6px 16px;
    font-weight:800;
    box-shadow:0 2px 8px rgba(11,61,44,0.08);
  }

  /* ---- Room grid: 3–4 cards desktop / 2 tablet / 1 mobile ---- */
  #unitsGrid .room-rows-wrap{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:18px;
    margin-top:12px;
    counter-reset:pgRoomCounter;
  }
  @media (max-width:900px){
    #unitsGrid .room-rows-wrap{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:600px){
    #unitsGrid .room-rows-wrap{ grid-template-columns:1fr; }
  }

  /* ---- Individual room card ---- */
  #unitsGrid .room-row{
    position:relative;
    background:linear-gradient(165deg, rgba(255,255,255,0.95), rgba(250,246,236,0.88));
    backdrop-filter:blur(10px) saturate(140%);
    -webkit-backdrop-filter:blur(10px) saturate(140%);
    border:1px solid var(--sand);
    border-radius:18px;
    padding:34px 18px 18px;
    box-shadow:0 8px 22px -8px rgba(11,61,44,0.16);
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
    animation:pgRoomCardIn .6s cubic-bezier(.16,1,.3,1) both;
    overflow:hidden;
  }
  #unitsGrid .room-row:nth-child(1){ animation-delay:.04s; }
  #unitsGrid .room-row:nth-child(2){ animation-delay:.10s; }
  #unitsGrid .room-row:nth-child(3){ animation-delay:.16s; }
  #unitsGrid .room-row:nth-child(4){ animation-delay:.22s; }
  #unitsGrid .room-row:nth-child(5){ animation-delay:.28s; }
  #unitsGrid .room-row:nth-child(6){ animation-delay:.34s; }
  @keyframes pgRoomCardIn{
    0%{ opacity:0; transform:translateY(20px) scale(.96); }
    100%{ opacity:1; transform:translateY(0) scale(1); }
  }
  #unitsGrid .room-row:hover{
    transform:translateY(-7px);
    box-shadow:0 20px 40px -10px rgba(201,150,47,0.35), 0 8px 18px -6px rgba(11,61,44,0.18);
    border-color:var(--gold-light);
  }
  #unitsGrid .room-row::before{
    counter-increment:pgRoomCounter;
    content:"Room " counter(pgRoomCounter);
    position:absolute;
    top:14px; left:18px;
    font-size:0.66rem;
    font-weight:800;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:var(--gold);
  }
  #unitsGrid .room-row.is-none{
    opacity:0.55;
    filter:grayscale(0.3);
  }

  /* ---- Room type label + status badge row ---- */
  #unitsGrid .room-row > div:first-child{
    align-items:flex-start;
    flex-wrap:wrap;
    gap:8px;
  }
  #unitsGrid .room-row b{
    font-size:1.08rem;
    color:var(--forest);
    font-weight:800;
  }
  #unitsGrid .badge{
    box-shadow:0 3px 10px rgba(0,0,0,0.15);
    text-transform:uppercase;
  }

  /* ---- Occupancy / notice line ---- */
  #unitsGrid .stats-mini{
    color:var(--muted);
    font-size:0.78rem;
    margin:8px 0 4px;
  }

  /* ---- Bed layout: neat bed-icon chips ---- */
  #unitsGrid .bed-hint{
    font-size:0.7rem;
    color:var(--gold);
    font-weight:600;
    margin:6px 0 2px;
  }
  #unitsGrid .bed-layout{
    padding:10px;
    margin:10px 0;
    background:rgba(31,138,95,0.06);
    border:1px dashed rgba(31,138,95,0.25);
    border-radius:14px;
    gap:9px;
  }
  #unitsGrid .bed{
    width:40px; height:40px;
    display:flex; align-items:center; justify-content:center;
    border-radius:10px;
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
  }
  #unitsGrid .bed.free{
    background:linear-gradient(135deg,#eafaf1,#d3f2e1);
    border-color:var(--available);
  }
  #unitsGrid .bed.occ{
    background:linear-gradient(135deg,#fdecea,#f9d6d4);
    border-color:var(--booked);
  }
  #unitsGrid .bed:hover{ transform:scale(1.14); box-shadow:0 6px 14px rgba(0,0,0,0.16); }

  /* ---- Progress bar ---- */
  #unitsGrid .progress{
    border-radius:20px;
    margin:10px 0;
  }

  /* ---- Interested members chip ---- */
  #unitsGrid .enquiry-container{
    display:inline-flex;
    align-items:center;
    border-radius:24px;
    padding:6px 13px;
    font-weight:700;
    letter-spacing:0.2px;
    box-shadow:0 3px 10px rgba(201,150,47,0.2);
  }

  /* ---- Room info / amenities panel (pricing-box) ---- */
  #unitsGrid .pricing-box{
    margin-top:14px;
    padding:14px;
    background:rgba(11,61,44,0.035);
    border:1px solid var(--sand);
    border-radius:14px;
    font-size:0.78rem;
    color:var(--ink);
    line-height:1.75;
  }
  #unitsGrid .pricing-box div{
    margin-bottom:2px;
  }
  #unitsGrid .pricing-box input{
    border:1px solid var(--sand);
    border-radius:7px;
    padding:3px 7px;
    font-size:0.76rem;
  }

  /* ---- Admin controls inside room card header ---- */
  #unitsGrid .room-row select{
    border:1px solid var(--sand);
    border-radius:8px;
    padding:3px 6px;
    font-size:0.75rem;
  }

/* ---- style block 3 ---- */
  /* ---- Beds: inviting hover + click states ---- */
  #unitsGrid .bed{
    position:relative;
    cursor:pointer;
    transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, outline-color .25s ease, filter .2s ease;
    outline:2px solid transparent;
    outline-offset:2px;
  }
  #unitsGrid .bed.free:hover{
    transform:translateY(-4px) scale(1.08);
    box-shadow:0 10px 20px -6px rgba(201,150,47,0.45);
    outline-color:var(--gold-light);
  }
  #unitsGrid .bed.occ:hover{
    transform:translateY(-2px);
    filter:saturate(1.15);
  }
  #unitsGrid .bed.pg-selected{
    outline:2px solid var(--gold);
    box-shadow:0 0 0 5px rgba(201,150,47,0.22), 0 10px 22px -6px rgba(31,138,95,0.5);
    background:linear-gradient(135deg,#e3f7ec,#c9f0da) !important;
    border-color:var(--emerald) !important;
    animation:pgSelectedPulse 2.2s ease-in-out infinite;
  }
  @keyframes pgSelectedPulse{
    0%,100%{ box-shadow:0 0 0 5px rgba(201,150,47,0.22), 0 10px 22px -6px rgba(31,138,95,0.5); }
    50%{ box-shadow:0 0 0 9px rgba(201,150,47,0.08), 0 10px 22px -6px rgba(31,138,95,0.5); }
  }
  #unitsGrid .bed.pg-bump{ animation:pgBedBump .42s cubic-bezier(.34,1.56,.64,1); }
  @keyframes pgBedBump{
    0%{ transform:scale(1); }
    35%{ transform:scale(1.28) rotate(-6deg); }
    65%{ transform:scale(0.94) rotate(4deg); }
    100%{ transform:scale(1) rotate(0); }
  }
  .pg-selected-badge{
    position:absolute;
    top:-11px; left:50%;
    transform:translateX(-50%);
    background:var(--emerald);
    color:#fff;
    font-size:0.55rem;
    font-weight:800;
    letter-spacing:0.3px;
    padding:2px 7px;
    border-radius:10px;
    white-space:nowrap;
    box-shadow:0 2px 6px rgba(0,0,0,0.25);
    animation:badgeIn .3s ease;
  }
  .pg-bed-ripple{
    position:absolute;
    border-radius:50%;
    transform:scale(0);
    background:rgba(201,150,47,0.45);
    pointer-events:none;
    animation:pgRippleAnim .65s ease-out forwards;
  }
  @keyframes pgRippleAnim{ to{ transform:scale(1); opacity:0; } }

  /* ---- Bed selection info panel ---- */
  .pg-bed-panel{
    grid-column:1 / -1;
    margin-top:16px;
    max-height:0;
    opacity:0;
    overflow:hidden;
    transform:translateY(10px);
    transition:max-height .45s cubic-bezier(.16,1,.3,1), opacity .35s ease, transform .35s ease;
  }
  .pg-bed-panel.pg-panel-open{
    max-height:600px;
    opacity:1;
    transform:translateY(0);
  }
  .pg-bed-panel > *{
    animation:fadeInUp .4s ease both;
  }
  .pg-panel-head{
    font-size:1.02rem;
    font-weight:800;
    color:var(--forest);
    margin-top:14px;
  }
  .pg-panel-sub{
    font-size:0.82rem;
    color:var(--muted);
    margin:6px 0 10px;
    line-height:1.5;
  }
  .pg-panel-divider{
    height:1px;
    background:linear-gradient(90deg, transparent, var(--sand), transparent);
    margin:10px 0;
  }
  .pg-panel-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(120px,1fr));
    gap:10px 16px;
  }
  .pg-panel-grid div{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .pg-panel-grid span{
    font-size:0.66rem;
    text-transform:uppercase;
    letter-spacing:0.5px;
    color:var(--muted);
    font-weight:700;
  }
  .pg-panel-grid b{
    font-size:0.95rem;
    color:var(--forest);
  }
  .pg-panel-checks{
    font-size:0.78rem;
    font-weight:700;
    color:var(--emerald);
    line-height:1.9;
  }
  .pg-panel-actions{
    display:flex;
    gap:10px;
    margin-top:14px;
    flex-wrap:wrap;
  }
  .pg-continue-btn, .pg-another-btn{
    flex:1;
    min-width:150px;
    border:none;
    border-radius:12px;
    padding:11px 16px;
    font-weight:800;
    font-size:0.85rem;
    cursor:pointer;
    transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
  }
  .pg-continue-btn{
    background:linear-gradient(120deg,var(--gold),var(--gold-light));
    color:var(--forest);
    box-shadow:0 8px 20px -6px rgba(201,150,47,0.55);
  }
  .pg-another-btn{
    background:#fff;
    color:var(--forest);
    border:1.5px solid var(--sand);
  }
  .pg-continue-btn:hover, .pg-another-btn:hover{
    transform:translateY(-2px);
    filter:brightness(1.05);
  }

  /* ---- Elegant toast (customer-facing bed/room messages) ---- */
  .pg-toast{
    position:fixed;
    left:50%;
    bottom:26px;
    transform:translateX(-50%) translateY(20px);
    max-width:min(420px, 88vw);
    background:var(--forest);
    color:#fff;
    padding:13px 20px;
    border-radius:14px;
    font-size:0.85rem;
    font-weight:600;
    line-height:1.45;
    box-shadow:0 14px 34px rgba(0,0,0,0.3);
    border:1px solid rgba(255,255,255,0.12);
    opacity:0;
    pointer-events:none;
    z-index:9998;
    transition:opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
  }
  .pg-toast-warn{ border-left:4px solid #d9534f; }
  .pg-toast-info{ border-left:4px solid var(--gold); }
  .pg-toast-show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }

  /* ---- Premium 4-step booking progress indicator ---- */
  .pg-steps{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:4px;
    max-width:720px;
    margin:0 auto 22px;
    padding:16px 14px 12px;
    background:linear-gradient(180deg, rgba(11,61,44,0.04), rgba(212,175,55,0.04));
    border:1px solid rgba(212,175,55,0.25);
    border-radius:16px;
  }
  .pg-step{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    position:relative;
    min-width:0;
  }
  .pg-step-circle{
    width:30px;
    height:30px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.8rem;
    font-weight:700;
    background:#fff;
    border:2px solid var(--sand);
    color:#9a9a9a;
    transition:all .35s cubic-bezier(.16,1,.3,1);
    z-index:1;
  }
  .pg-step-label{
    margin-top:6px;
    font-size:0.72rem;
    font-weight:600;
    color:#9a9a9a;
    letter-spacing:.2px;
    transition:color .35s ease;
    line-height:1.2;
  }
  .pg-step-line{
    position:absolute;
    top:15px;
    left:calc(50% + 20px);
    right:calc(-50% + 20px);
    height:2px;
    background:var(--sand);
    z-index:0;
    transition:background .5s ease;
  }
  .pg-step:last-child .pg-step-line{ display:none; }
  .pg-step.pg-step-done .pg-step-circle{
    background:var(--forest);
    border-color:var(--forest);
    color:#fff;
  }
  .pg-step.pg-step-done .pg-step-label{ color:var(--forest); }
  .pg-step.pg-step-done .pg-step-line{ background:var(--forest); }
  .pg-step.pg-step-active .pg-step-circle{
    background:#fff;
    border-color:var(--gold);
    color:var(--gold);
    box-shadow:0 0 0 4px rgba(212,175,55,0.18);
    animation:pgStepPulse 1.8s ease-in-out infinite;
  }
  .pg-step.pg-step-active .pg-step-label{ color:var(--forest); font-weight:700; }
  @keyframes pgStepPulse{
    0%,100%{ box-shadow:0 0 0 4px rgba(212,175,55,0.18); }
    50%{ box-shadow:0 0 0 8px rgba(212,175,55,0.10); }
  }
  @media (max-width:520px){
    .pg-steps{ padding:12px 6px 10px; border-radius:12px; }
    .pg-step-label{ font-size:0.62rem; }
    .pg-step-circle{ width:26px; height:26px; font-size:0.72rem; }
    .pg-step-line{ top:13px; }
  }

/* ---- style block 4 ---- */
  /* ---- Preloader ---- */
  #scPreloader{
    position:fixed; inset:0; z-index:99999;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
    background:linear-gradient(160deg, var(--forest-deep) 0%, var(--forest) 55%, #0c4531 100%);
    transition:opacity .5s ease, visibility .5s ease;
  }
  #scPreloader.sc-pl-hide{ opacity:0; visibility:hidden; pointer-events:none; }
  .sc-pl-mark{
    font-family:var(--font-display); font-weight:700; font-size:2.2rem; letter-spacing:2px;
    color:var(--gold); box-shadow:0 0 0 3px var(--gold); border-radius:50%;
    width:76px; height:76px; display:flex; align-items:center; justify-content:center;
    animation:scPlPulse 1.4s ease-in-out infinite;
  }
  @keyframes scPlPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.08); opacity:.75; } }
  .sc-pl-bar{ width:140px; height:3px; border-radius:3px; background:rgba(255,255,255,0.15); overflow:hidden; }
  .sc-pl-bar span{
    display:block; height:100%; width:40%; border-radius:3px;
    background:linear-gradient(90deg, var(--gold), var(--gold-light));
    animation:scPlSlide 1.1s ease-in-out infinite;
  }
  @keyframes scPlSlide{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(320%); } }

  /* ---- Back to top ---- */
  #scToTop{
    position:fixed; right:22px; bottom:22px; z-index:410;
    width:44px; height:44px; border-radius:50%; border:1px solid rgba(201,150,47,0.55);
    background:var(--forest); color:var(--gold-light); font-size:1.15rem; font-weight:700;
    box-shadow:var(--shadow); cursor:pointer;
    opacity:0; visibility:hidden; transform:translateY(12px);
    transition:opacity .25s ease, transform .25s ease, background .2s ease, visibility .25s ease;
  }
  #scToTop.sc-show{ opacity:1; visibility:visible; transform:translateY(0); }
  #scToTop:hover{ background:var(--gold); color:var(--forest-deep); }

  /* ---- Footer redesign ---- */
  footer{
    background:linear-gradient(160deg, var(--forest-deep) 0%, var(--forest) 100%);
    color:rgba(255,255,255,0.82);
    padding:44px 20px 22px;
    border-top:1px solid rgba(201,150,47,0.5);
  }
  .sc-foot-grid{
    max-width:1100px; margin:0 auto;
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px;
  }
  .sc-foot-logo{
    font-family:var(--font-display); font-weight:700; color:#fff; font-size:1.15rem; letter-spacing:.5px; margin-bottom:10px;
  }
  .sc-foot-logo span{ color:var(--gold-light); }
  .sc-foot-brand p{ font-size:.88rem; line-height:1.6; color:rgba(255,255,255,0.65); max-width:320px; }
  .sc-foot-col h4{
    color:var(--gold-light); font-family:var(--font-body); font-size:.82rem; letter-spacing:1px;
    text-transform:uppercase; margin:0 0 12px;
  }
  .sc-foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
  .sc-foot-col a{
    color:rgba(255,255,255,0.72); text-decoration:none; font-size:.9rem; transition:color .15s ease, padding-left .15s ease;
  }
  .sc-foot-col a:hover{ color:var(--gold-light); padding-left:3px; }
  .sc-foot-bottom{
    max-width:1100px; margin:34px auto 0; padding-top:18px;
    border-top:1px solid rgba(255,255,255,0.12);
    display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center;
    font-size:.8rem; color:rgba(255,255,255,0.55);
  }
  .sc-foot-tag{ color:var(--gold-light); letter-spacing:.3px; }
  @media (max-width:760px){
    .sc-foot-grid{ grid-template-columns:1fr 1fr; }
    .sc-foot-brand{ grid-column:1 / -1; }
  }
  @media (max-width:460px){
    .sc-foot-grid{ grid-template-columns:1fr; }
  }

/* ---- style block 5 ---- */
/* 1. Premium Gold Shimmer for Header Text */
header h1 {
  background: linear-gradient(90deg, var(--gold-light) 0%, #ffffff 50%, var(--gold-light) 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shine 4s linear infinite;
  transition: transform 0.3s ease;
}

@keyframes shine {
  to { background-position: 200% center; }
}

header h1:hover {
  transform: scale(1.05);
}

/* 2. Magnetic Focus Glow on Cards */
.unit-card, .pref-card, .form-card {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.unit-card::before, .pref-card::before, .form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(400px circle at var(--mouse-x, -500px) var(--mouse-y, -500px), rgba(201, 150, 47, 0.12), transparent 40%);
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.3s ease;
  opacity: 0;
}

.unit-card:hover::before, .pref-card:hover::before, .form-card:hover::before {
  opacity: 1;
}

/* 3. Action Success Button State */
.btn-success-anim {
  background: var(--available) !important;
  color: white !important;
  transform: scale(0.95) !important;
  box-shadow: 0 0 15px rgba(34, 160, 107, 0.5) !important;
  pointer-events: none;
}

/* 4. Elastic 3D Bed Flip (Admin Mode) */
@keyframes bedFlip {
  0% { transform: perspective(400px) rotateY(0deg) scale(1); }
  50% { transform: perspective(400px) rotateY(180deg) scale(1.3); background: var(--gold); }
  100% { transform: perspective(400px) rotateY(360deg) scale(1); }
}

.bed.tapped {
  animation: bedFlip 0.5s cubic-bezier(0.25, 1.5, 0.5, 1) forwards;
}

/* Smooth Tab Entrance */
section.active {
  animation: smoothEnter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes smoothEnter {
  0% { opacity: 0; transform: translateY(30px) scale(0.98); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.reveal{opacity:0;transform:translateY(50px) scale(.96);filter:blur(8px);transition:all .9s cubic-bezier(.2,.8,.2,1);will-change:transform,opacity}
.reveal.show{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}

/* ---- style block 6 ---- */
/* Smooth scrolling + nicer selection color */
html{ scroll-behavior: smooth; }
::selection{ background: var(--gold); color: var(--forest); }

/* ---- Sticky nav gains depth once page is scrolled ---- */
nav{ position: sticky; top: 0; z-index: 500; transition: box-shadow .3s ease, padding .25s ease; }
nav.scrolled{ box-shadow: 0 8px 24px rgba(0,0,0,0.35); padding-top: 10px; padding-bottom: 14px; }

/* ---- Button ripple ---- */
button, .loc-btn-row a{ position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .25s ease, filter .2s ease; }
button:active{ transform: scale(0.96); }
button:hover{ filter: brightness(1.06); box-shadow: 0 4px 14px rgba(201,150,47,0.35); }
.ripple{
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(255,255,255,0.55); pointer-events: none;
  animation: rippleAnim .6s ease-out forwards;
}
@keyframes rippleAnim{ to{ transform: scale(2.6); opacity: 0; } }

/* ---- Inputs: focus glow ---- */
.form-card input, .form-card select, .form-card textarea, .loc-card input, .admin-bar input{
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus,
.loc-card input:focus, .admin-bar input:focus{
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(201,150,47,0.18);
  transform: translateY(-1px);
}

/* ---- Badges: gentle pop when status changes + soft pulse for "soon" ---- */
.badge{ transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
.badge.available{ animation: badgeIn .35s ease; }
.badge.soon{ animation: softPulse 1.8s ease-in-out infinite; }
@keyframes badgeIn{ 0%{ transform: scale(0.5); opacity:0; } 100%{ transform: scale(1); opacity:1; } }
@keyframes softPulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(243,156,18,0.5);} 50%{ box-shadow: 0 0 0 7px rgba(243,156,18,0);} }

/* ---- Enquiry fire count: tiny bounce ---- */
.enquiry-container{ transition: transform .2s ease; }
.enquiry-container:hover{ transform: scale(1.05); }

/* ---- Staggered card entrance on render ---- */
.reveal-stagger{
  animation: fadeInUp .55s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--stagger-i, 0) * 60ms);
}
@keyframes fadeInUp{
  0%{ opacity: 0; transform: translateY(22px) scale(0.97); }
  100%{ opacity: 1; transform: translateY(0) scale(1); }
}
.unit-card, .loc-card{ transition: transform .25s ease, box-shadow .25s ease; }
.unit-card:hover, .loc-card:hover{ transform: translateY(-4px); box-shadow: 0 14px 30px rgba(11,61,44,0.18); }

/* ---- Skeleton loading cards (shown before first data render) ---- */
.skeleton-card{
  height: 210px; border-radius: 14px;
  background: linear-gradient(100deg, var(--sand) 30%, #f7f0dd 50%, var(--sand) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border: 1px solid var(--sand);
}
@keyframes shimmer{ 0%{ background-position: 140% 0; } 100%{ background-position: -40% 0; } }

/* ---- Save/status toast: slide + fade instead of plain opacity ---- */
#saveStatusToast{
  transform: translateY(16px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1) !important;
}
#saveStatusToast[style*="opacity: 1"]{ transform: translateY(0); }

/* ---- Copy feedback flash ---- */
.copy-flash{ animation: copyFlash .5s ease; }
@keyframes copyFlash{ 0%{ background: var(--available) !important; color:#fff !important;} 100%{ } }

/* ---- UPI QR: gentle glow to draw the eye ---- */
#upiQrImg{ transition: transform .25s ease, box-shadow .3s ease; animation: qrGlow 2.6s ease-in-out infinite; }
#upiQrImg:hover{ transform: scale(1.04); }
@keyframes qrGlow{
  0%,100%{ box-shadow: 0 0 0 0 rgba(31,138,95,0.0), var(--shadow); }
  50%{ box-shadow: 0 0 0 8px rgba(31,138,95,0.12), var(--shadow); }
}

/* ---- Razorpay button: shimmering border to invite the tap ---- */
#razorpayBtn{ position: relative; }
#razorpayBtn::after{
  content:''; position:absolute; inset:-2px; border-radius:10px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  background-size: 200% 100%; animation: shimmerBorder 2.5s linear infinite; pointer-events:none;
}
@keyframes shimmerBorder{ 0%{ background-position: -150% 0; } 100%{ background-position: 150% 0; } }

/* ---- Scroll-to-top button ---- */
#scrollTopBtn{
  position: fixed; right: 18px; bottom: 18px; z-index: 998;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--gold); color: var(--forest); font-size: 1.2rem; font-weight: 900;
  box-shadow: var(--shadow); cursor: pointer;
  opacity: 0; transform: translateY(16px) scale(0.8); pointer-events: none;
  transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
#scrollTopBtn.show{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
#scrollTopBtn:hover{ background: var(--gold-light); transform: translateY(-3px) scale(1.05); }

/* ---- Confetti burst ---- */
.confetti-piece{
  position: fixed; top: -12px; width: 8px; height: 14px; z-index: 9998;
  pointer-events: none; opacity: 0.95; border-radius: 2px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall{
  0%{ transform: translateY(0) rotate(0deg); opacity: 1; }
  100%{ transform: translateY(105vh) rotate(540deg); opacity: 0; }
}

/* ---- Reduced motion respect ---- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.reveal{opacity:0;transform:translateY(50px) scale(.96);filter:blur(8px);transition:all .9s cubic-bezier(.2,.8,.2,1);will-change:transform,opacity}
.reveal.show{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}

/* ---- style block 7 ---- */
/* ============================================================
   1. TYPOGRAPHY & FOUNDATION
   ============================================================ */
body{
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ============================================================
   2. SCROLL PROGRESS INDICATOR
   ============================================================ */
#pwScrollProgress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--emerald-soft),var(--gold-light));
  z-index:10000; transition:width .1s linear;
  box-shadow:0 0 8px rgba(201,150,47,.6);
}

/* ============================================================
   3. AURORA HERO BACKGROUND + ENTRANCE ANIMATION
   ============================================================ */
header{
  position:relative; overflow:hidden;
  padding-top:30px; padding-bottom:22px;
  background:
    radial-gradient(circle at 18% 20%, #123b2c 0%, transparent 55%),
    radial-gradient(circle at 82% 0%, #0f3d3a 0%, transparent 50%),
    linear-gradient(160deg,#071c14 0%, #0b3d2c 55%, #0a2e22 100%);
}
header > *{ position:relative; z-index:2; }

.pw-aurora{ position:absolute; inset:-20%; pointer-events:none; z-index:0; filter:blur(60px); opacity:.55; }
.pw-aurora span{ position:absolute; border-radius:50%; mix-blend-mode:screen; animation:pwAuroraDrift 22s ease-in-out infinite; }
.pw-aurora span:nth-child(1){ width:420px; height:420px; background:var(--gold); top:-10%; left:0%; animation-duration:24s; }
.pw-aurora span:nth-child(2){ width:360px; height:360px; background:var(--teal); top:8%; right:-5%; animation-duration:28s; animation-delay:-6s; }
.pw-aurora span:nth-child(3){ width:300px; height:300px; background:var(--emerald-soft); bottom:-18%; left:30%; animation-duration:20s; animation-delay:-3s; }
@keyframes pwAuroraDrift{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(40px,-30px) scale(1.15); }
  66%{ transform:translate(-30px,20px) scale(.9); }
}

.pw-particles{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.pw-particle{ position:absolute; bottom:-10px; border-radius:50%; background:rgba(224,182,90,.55); animation:pwFloatUp linear infinite; }
@keyframes pwFloatUp{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:.5; }
  100%{ transform:translateY(-620px) translateX(var(--drift,20px)); opacity:0; }
}

.pw-float-icon{ position:absolute; z-index:1; opacity:.16; font-size:1.6rem; animation:pwIconFloat 8s ease-in-out infinite; pointer-events:none; }
@keyframes pwIconFloat{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-18px) rotate(8deg); } }

/* Hero entrance choreography, plus a premium, always-on logo animation:
   a gentle float + subtle 100%->103% scale + a soft golden glow pulse.
   Only `transform` and `opacity` are animated (compositor-friendly,
   no layout reflow) — the logo never rotates, spins, bounces or distorts. */
.pw-logo-wrap{ position:relative; display:inline-block; line-height:0; }
.pw-logo-wrap::before{
  content:''; position:absolute; inset:-16px; border-radius:50%;
  background:radial-gradient(circle, rgba(224,182,90,.65), rgba(224,182,90,0) 70%);
  opacity:.35; z-index:0; pointer-events:none;
  animation:pwLogoGlow 5.6s ease-in-out infinite;
}
.pw-logo-wrap img{ position:relative; z-index:1; }
header img{
  opacity:0;
  animation:pwFadeIn .8s ease forwards .05s, pwLogoFloat 5.6s ease-in-out infinite .85s;
}
header h1{ opacity:0; animation:pwHeroIn .9s cubic-bezier(.16,1,.3,1) .25s forwards, shine 4s linear infinite 1.2s; }
header p{ opacity:0; animation:pwHeroIn .9s cubic-bezier(.16,1,.3,1) .4s forwards; }
@keyframes pwFadeIn{ to{ opacity:1; } }
@keyframes pwHeroIn{
  0%{ opacity:0; transform:translateY(24px) scale(.96); filter:blur(6px); }
  100%{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
@keyframes pwLogoFloat{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-8px) scale(1.03); }
}
@keyframes pwLogoGlow{
  0%,100%{ opacity:.35; transform:scale(1); }
  50%{ opacity:.75; transform:scale(1.06); }
}
@media (prefers-reduced-motion: reduce){
  header img{ animation:pwFadeIn .8s ease forwards .05s; }
  .pw-logo-wrap::before{ animation:none; opacity:.45; }
}

/* ============================================================
   3b. PREMIUM ANIMATED STATISTIC CARDS
   Replaces the old inline hero stats row with a dedicated,
   glassmorphic 5-card statistics section that sits below the
   header divider, on the cream body background.
   ============================================================ */
#pwStatsSection{
  max-width:1120px;
  margin:-34px auto 34px;
  padding:34px 18px 0;
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
  isolation:isolate;
}
/* Tablet: 3 cards on the first row, 2 on the second (equal spacing/alignment) */
@media (max-width:900px) and (min-width:601px){
  #pwStatsSection{ grid-template-columns:repeat(6,1fr); gap:16px; }
  #pwStatsSection .pw-stat-card:nth-child(-n+3){ grid-column:span 2; }
  #pwStatsSection .pw-stat-card:nth-child(n+4){ grid-column:span 3; }
}
/* Mobile: one card per row */
@media (max-width:600px){
  #pwStatsSection{ grid-template-columns:1fr; margin-top:-20px; gap:14px; }
  #pwStatsSection .pw-stat-card{ grid-column:auto; }
}

/* Attractive decorative background: soft glowing color blobs +
   a faint dot grid, sitting behind the cards only (not the whole page) */
.pw-stats-bg{
  position:absolute; inset:-40px -12px -20px; z-index:-1;
  border-radius:28px; overflow:hidden; pointer-events:none;
}
.pw-stats-bg::before{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(11,61,44,0.10) 1.4px, transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 90%);
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 40%, transparent 90%);
}
.pw-stats-blob{
  position:absolute; border-radius:50%; filter:blur(46px);
  opacity:.35; mix-blend-mode:multiply;
  animation:pwStatsBlobDrift 16s ease-in-out infinite;
}
.pw-stats-blob:nth-child(2){ width:210px; height:210px; background:var(--gold-light); top:-30px; left:-20px; animation-duration:18s; }
.pw-stats-blob:nth-child(3){ width:240px; height:240px; background:var(--emerald-soft); top:10px; right:-40px; animation-duration:21s; animation-delay:-4s; }
.pw-stats-blob:nth-child(4){ width:190px; height:190px; background:var(--gold); bottom:-60px; left:38%; animation-duration:19s; animation-delay:-8s; }
@keyframes pwStatsBlobDrift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(18px,-14px) scale(1.12); }
}
.pw-stats-dot{
  position:absolute; bottom:-6px; border-radius:50%;
  background:rgba(201,150,47,.5);
  animation:pwStatsDotRise linear infinite;
}
@keyframes pwStatsDotRise{
  0%{ transform:translateY(0); opacity:0; }
  12%{ opacity:.8; }
  85%{ opacity:.3; }
  100%{ transform:translateY(-230px); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .pw-stats-blob, .pw-stats-dot{ animation:none; }
}

.pw-stat-card{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:23px 16px 21px;
  border-radius:16px;
  background:linear-gradient(160deg, rgba(255,255,255,0.82), rgba(255,255,255,0.55));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 30px -10px rgba(11,61,44,0.25), 0 2px 8px rgba(11,61,44,0.08);
  border:1px solid rgba(255,255,255,0.6);
  isolation:isolate;
  overflow:hidden;
  opacity:0; transform:translateY(24px);
  animation:pwStatCardIn .7s cubic-bezier(.16,1,.3,1) forwards;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
  will-change:transform;
  height:100%;
}
.pw-stat-card:nth-child(1){ animation-delay:.05s; }
.pw-stat-card:nth-child(2){ animation-delay:.15s; }
.pw-stat-card:nth-child(3){ animation-delay:.25s; }
.pw-stat-card:nth-child(4){ animation-delay:.35s; }
.pw-stat-card:nth-child(5){ animation-delay:.45s; }
@keyframes pwStatCardIn{ to{ opacity:1; transform:translateY(0); } }

/* Gradient border ring, drawn with a padding-box/border-box mask so the
   card content and backdrop-blur above stay untouched. The gradient
   itself slowly shifts for a subtle "living" shimmer. */
.pw-stat-card::before{
  content:''; position:absolute; inset:0; border-radius:18px; padding:1.5px;
  background:linear-gradient(135deg, var(--gold), var(--emerald-soft), var(--gold-light), var(--gold));
  background-size:260% 260%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.75; z-index:-1; pointer-events:none;
  animation:pwStatBorderShift 7s ease-in-out infinite;
}
@keyframes pwStatBorderShift{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

/* Diagonal shine that sweeps across the card on hover */
.pw-stat-card::after{
  content:''; position:absolute; top:-60%; left:-30%; width:40%; height:220%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform:rotate(20deg) translateX(-220%);
  pointer-events:none; z-index:2;
}
.pw-stat-card:hover::after{
  transform:rotate(20deg) translateX(420%);
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}

.pw-stat-card:hover, .pw-stat-card:focus-within{
  transform:translateY(-10px) scale(1.035);
  box-shadow:0 22px 44px -14px rgba(11,61,44,0.32), 0 6px 16px rgba(201,150,47,0.18);
}

.pw-stat-icon{
  position:relative;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--forest), var(--teal));
  color:var(--gold-light);
  font-size:1.15rem;
  margin-bottom:11px;
  box-shadow:0 8px 18px -6px rgba(11,61,44,0.45);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.pw-stat-icon::before{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1.5px solid var(--gold-light); opacity:0; z-index:-1;
}
.pw-stat-card:hover .pw-stat-icon{ transform:rotate(-10deg) scale(1.08); }
.pw-stat-card:hover .pw-stat-icon::before{
  animation:pwStatPulseRing 1.1s cubic-bezier(.16,1,.3,1);
}
@keyframes pwStatPulseRing{
  0%{ opacity:.7; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.55); }
}

.pw-stat-number{
  font-size:clamp(1.55rem,4.1vw,2.05rem);
  font-weight:800;
  color:var(--forest);
  line-height:1;
  font-variant-numeric:tabular-nums;
  display:flex; align-items:baseline; gap:2px;
}
.pw-stat-number .pw-stat-plus{ font-size:0.7em; color:var(--gold); font-weight:800; }

.pw-stat-title{
  margin-top:7px;
  font-size:.85rem;
  font-weight:700;
  color:var(--forest);
  letter-spacing:.2px;
}
.pw-stat-sub{
  margin-top:5px;
  font-size:.7rem;
  color:var(--muted);
  line-height:1.4;
  max-width:185px;
}
@media (prefers-reduced-motion: reduce){
  .pw-stat-card{ opacity:1; transform:none; animation:none; }
}

/* Hero call-to-action buttons */
#pwHeroCtas{
  display:flex; gap:14px; justify-content:center; margin-top:28px; flex-wrap:wrap;
  opacity:0; animation:pwHeroIn .9s cubic-bezier(.16,1,.3,1) .7s forwards;
}
.pw-hero-btn{ padding:13px 28px; border-radius:32px; font-weight:700; font-size:.92rem; cursor:pointer; border:none; letter-spacing:.3px; }
.pw-hero-btn.primary{ background:linear-gradient(120deg,var(--gold),var(--gold-light)); color:var(--forest); box-shadow:0 10px 30px -8px rgba(201,150,47,.6); }
.pw-hero-btn.ghost{ background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.pw-hero-btn:hover{ filter:brightness(1.08); }

/* ============================================================
   4. ANIMATED SVG DIVIDERS
   ============================================================ */
.pw-divider{ display:block; width:100%; line-height:0; position:relative; z-index:2; }
.pw-divider svg{ width:100%; height:40px; display:block; }

/* ============================================================
   5. GLASSMORPHISM CARD UPGRADE
   ============================================================ */
.unit-card, .loc-card, .pref-card, .form-card{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.55);
  border-radius:20px;
  box-shadow:0 8px 30px -10px rgba(11,61,44,.18), 0 1px 0 rgba(255,255,255,.6) inset;
  transition:box-shadow .35s ease;
  will-change:transform;
}
.unit-card:hover, .loc-card:hover{
  box-shadow:0 20px 46px -12px rgba(11,61,44,.28), 0 1px 0 rgba(255,255,255,.6) inset;
}

/* ============================================================
   6. 3D TILT (desktop only, applied via JS custom properties)
   ============================================================ */
.pw-tilt{
  transform:perspective(900px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg)) translateY(var(--liftY,0px));
  transition:transform .12s ease-out;
}

/* ============================================================
   7. CURSOR GLOW TRAIL (desktop only)
   ============================================================ */
#pwCursorGlow{
  position:fixed; width:260px; height:260px; border-radius:50%; pointer-events:none; z-index:9997;
  background:radial-gradient(circle,rgba(201,150,47,.16),transparent 70%);
  transform:translate(-50%,-50%); left:-999px; top:-999px; opacity:0;
  transition:opacity .3s ease; mix-blend-mode:multiply;
}

/* ============================================================
   8. PULSING "AVAILABLE" BADGE
   ============================================================ */
.badge.available{ position:relative; }
.badge.available::after{
  content:''; position:absolute; inset:0; border-radius:20px;
  box-shadow:0 0 0 0 rgba(34,160,107,.55);
  animation:pwAvailPulse 2.2s ease-out infinite;
}
@keyframes pwAvailPulse{ 0%{ box-shadow:0 0 0 0 rgba(34,160,107,.55); } 100%{ box-shadow:0 0 0 12px rgba(34,160,107,0); } }

/* ============================================================
   9. ANIMATED / SHIMMERING PROGRESS BARS
   ============================================================ */
.progress{ overflow:hidden; position:relative; }
.progress div{
  transition:width 1s cubic-bezier(.16,1,.3,1);
  background:linear-gradient(90deg,var(--emerald),var(--emerald-soft));
  position:relative; overflow:hidden;
}
.progress div::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  background-size:200% 100%; animation:pwShimmerBar 2.4s linear infinite;
}
@keyframes pwShimmerBar{ 0%{ background-position:150% 0; } 100%{ background-position:-50% 0; } }

/* ============================================================
   10. "WHY CHOOSE US" SERVICE CARDS
   ============================================================ */
.pw-services{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:22px; }
.pw-service-card{
  background:rgba(255,255,255,.75); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.5); border-top:3px solid var(--gold); border-radius:16px;
  padding:16px; text-align:center; box-shadow:0 6px 20px -8px rgba(11,61,44,.15);
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.pw-service-card:hover{ transform:translateY(-6px); box-shadow:0 16px 30px -10px rgba(11,61,44,.25); }
.pw-service-icon{ font-size:1.8rem; display:inline-block; animation:pwIconFloat 5s ease-in-out infinite; }
.pw-service-card h4{ margin:8px 0 4px; color:var(--forest); font-size:.92rem; }
.pw-service-card p{ margin:0; font-size:.76rem; color:var(--muted); }

/* ============================================================
   11. LIVE AVAILABILITY DASHBOARD
   ============================================================ */
.pw-dashboard{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:18px; }
.pw-dash-card{
  background:rgba(255,255,255,.75); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.5); border-radius:14px; padding:14px; text-align:center;
  box-shadow:0 6px 18px -8px rgba(11,61,44,.14); transition:transform .3s ease;
}
.pw-dash-card:hover{ transform:translateY(-3px); }
.pw-dash-num{ font-size:1.5rem; font-weight:800; color:var(--forest); font-variant-numeric:tabular-nums; }
.pw-dash-label{ font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-top:2px; }
.pw-dash-card.pw-dash-avail .pw-dash-num{ color:var(--available); }
.pw-dash-card.pw-dash-booked .pw-dash-num{ color:var(--booked); }
.pw-dash-card.pw-dash-soon .pw-dash-num{ color:#f39c12; }

/* ============================================================
   12. FLOATING ACTION BUTTONS (WhatsApp / Call / Book / Map)
   ============================================================ */
#pwFab{ position:fixed; left:18px; bottom:18px; z-index:998; display:flex; flex-direction:column-reverse; align-items:flex-start; gap:10px; }
.pw-fab-item{
  height:48px; border-radius:26px; border:none; color:#fff; font-weight:700; font-size:.85rem;
  display:flex; align-items:center; gap:8px; padding:0; width:0; overflow:hidden; white-space:nowrap;
  cursor:pointer; box-shadow:0 8px 20px -6px rgba(0,0,0,.35); opacity:0; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, width .25s ease, padding .25s ease;
}
#pwFab.open .pw-fab-item{ width:auto; padding:0 16px 0 14px; opacity:1; transform:translateY(0); }
.pw-fab-item .pw-fab-ic{ font-size:1.1rem; }
.pw-fab-wa{ background:linear-gradient(135deg,#25D366,#1DA851); }
.pw-fab-call{ background:linear-gradient(135deg,var(--teal),#0b5750); }
.pw-fab-book{ background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--forest-deep); }
.pw-fab-map{ background:linear-gradient(135deg,var(--forest-deep),#0c4531); }
.pw-fab-item{ box-shadow:0 8px 20px -6px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,0.06) inset; }
.pw-fab-item .pw-fab-ic{ font-size:1.05rem; width:1.2em; display:inline-flex; align-items:center; justify-content:center; }
#pwFabToggle{
  width:56px; height:56px; border-radius:50%; border:none;
  background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--forest-deep);
  font-size:1.3rem; box-shadow:0 10px 24px -6px rgba(201,150,47,.6), 0 0 0 4px rgba(201,150,47,0.12); cursor:pointer;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
  display:flex; align-items:center; justify-content:center;
}
#pwFab.open #pwFabToggle{ transform:rotate(45deg); }

/* ============================================================
   13. SCROLL REVEAL (Intersection Observer driven)
   ============================================================ */
[data-pw-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
[data-pw-reveal].pw-inview{ opacity:1; transform:translateY(0); }

/* ============================================================
   14. PREMIUM TOAST UPGRADE (visual only — logic untouched)
   ============================================================ */
#saveStatusToast{ border-radius:14px !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }

/* ============================================================
   15. PREMIUM PAGE TRANSITIONS (section switch: scale + blur + slide)
   Replaces the old simple wipe/fade with a modern motion system.
   Sections keep their original display:none / section.active{display:block}
   rules untouched — these classes only layer an animation on top,
   and are added/removed by JS around the exact same class toggle
   the site already used, so no section-switching logic changes.
   ============================================================ */
section.pw-leaving{
  animation: pwSectionLeave 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: opacity, transform, filter;
}
section.pw-entering{
  animation: pwSectionEnter 480ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: opacity, transform, filter;
}
@keyframes pwSectionLeave{
  0%   { opacity:1; transform:scale(1);    filter:blur(0px); }
  100% { opacity:0; transform:scale(0.98); filter:blur(5px); }
}
@keyframes pwSectionEnter{
  0%   { opacity:0; transform:translateY(40px) scale(0.96); filter:blur(5px); }
  65%  { filter:blur(1px); }
  100% { opacity:1; transform:translateY(0)    scale(1);    filter:blur(0px); }
}

/* Golden animated progress line shown while a section transition runs */
#pwTransitionBar{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--gold-light),var(--gold),var(--emerald-soft));
  z-index:10001; opacity:0; pointer-events:none;
  box-shadow:0 0 10px rgba(201,150,47,.7);
  transition:width .78s cubic-bezier(0.22, 1, 0.36, 1), opacity .25s ease;
}
#pwTransitionBar.run{ width:100%; opacity:1; }

/* Liquid highlight pill that slides behind the active nav button */
.pw-nav-highlight{
  position:absolute; top:0; left:0; height:0; width:0;
  border-radius:30px; z-index:0; opacity:0; pointer-events:none;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  box-shadow:0 0 16px 3px rgba(201,150,47,.55);
  transition:transform .5s cubic-bezier(0.22, 1, 0.36, 1),
             width .5s cubic-bezier(0.22, 1, 0.36, 1),
             height .3s ease, opacity .3s ease;
}
.pw-nav-highlight.pw-visible{ opacity:1; }
nav button{ position:relative; z-index:1; } /* keep label above the sliding pill */

/* Subtle glow behind the active nav button */
nav button.active{
  box-shadow:0 0 0 1px var(--gold), 0 0 18px 4px rgba(201,150,47,.45);
}

/* ============================================================
   16. RESPONSIVE / PERFORMANCE GUARDS
   ============================================================ */
@media (max-width:640px){
  .pw-hero-btn{ padding:11px 20px; font-size:.85rem; }
  #pwStatsSection{ gap:16px; }
}
@media (hover:none), (pointer:coarse){
  #pwCursorGlow{ display:none !important; }
}

/* ============================================================
   17. PREMIUM SUPPORT BADGE (Contact section)
   ============================================================ */
.pw-support-badge{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:linear-gradient(135deg,#ffffff,var(--cream));
  border:1px solid var(--sand);
  border-radius:16px;
  padding:14px 18px;
  margin-bottom:18px;
  box-shadow:var(--shadow);
}
.pw-support-icon{
  flex:none;
  font-size:1.5rem; width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--forest),var(--teal));
  box-shadow:0 4px 14px rgba(11,61,44,.28);
}
.pw-support-copy{ display:flex; flex-direction:column; gap:2px; flex:1 1 180px; }
.pw-support-copy strong{ color:var(--forest); font-size:1rem; letter-spacing:.2px; }
.pw-support-copy small{ color:var(--muted); font-size:.8rem; }
.pw-support-online{
  display:flex; align-items:center; gap:7px; flex:none;
  font-size:.8rem; font-weight:700; color:var(--available);
  background:rgba(34,160,107,0.12);
  padding:6px 14px; border-radius:20px;
}
.pw-support-dot{
  width:9px; height:9px; border-radius:50%; background:var(--available);
  animation:pwSupportPulse 1.8s infinite;
}
@keyframes pwSupportPulse{
  0%  { box-shadow:0 0 0 0 rgba(34,160,107,.55); }
  70% { box-shadow:0 0 0 9px rgba(34,160,107,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,160,107,0); }
}
@media (max-width:480px){
  .pw-support-badge{ flex-direction:column; align-items:flex-start; }
}
.pw-support-online.is-busy{ color:#b8860b; background:rgba(184,134,11,0.12); }
.pw-support-online.is-busy .pw-support-dot{ background:#d4a017; animation:none; }
.pw-support-online.is-offline{ color:#8a8f98; background:rgba(138,143,152,0.14); }
.pw-support-online.is-offline .pw-support-dot{ background:#9aa0a8; animation:none; }

.reveal{opacity:0;transform:translateY(50px) scale(.96);filter:blur(8px);transition:all .9s cubic-bezier(.2,.8,.2,1);will-change:transform,opacity}
.reveal.show{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}

/* ---- style block 8 ---- */
:root{
  --pw-sb-w: 280px;
  --pw-sb-w-collapsed: 80px;
}

/* Push normal-flow page content clear of the fixed sidebar. Fixed/absolute
   elements elsewhere on the page (modals, FAB, toasts, scroll button) are
   positioned relative to the viewport, so this padding does not affect them. */
body{
  padding-left: var(--pw-sb-w);
  transition: padding-left .35s cubic-bezier(.22,1,.36,1);
}
body.pw-sb-collapsed{ padding-left: var(--pw-sb-w-collapsed); }

/* ---- Turn the existing <nav> (buttons untouched) into the fixed sidebar ---- */
nav{
  position: fixed !important;
  top:0; left:0; bottom:0; height:100vh;
  width: var(--pw-sb-w);
  display:flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap:6px;
  padding: 14px 14px 24px;
  margin:0;
  overflow-y:auto;
  overflow-x:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.97), rgba(253,246,230,0.94) 55%, rgba(245,225,180,0.92));
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-right: 1px solid rgba(201,150,47,0.35);
  box-shadow: 10px 0 34px rgba(0,0,0,0.12);
  z-index: 900;
  transition: width .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1), padding .25s ease;
}
nav::-webkit-scrollbar{ width:6px; }
nav::-webkit-scrollbar-thumb{ background:rgba(201,150,47,.5); border-radius:6px; }

body.pw-sb-collapsed nav{ width: var(--pw-sb-w-collapsed); }
body.pw-sb-collapsed nav:hover{ width: var(--pw-sb-w); } /* auto-expand on hover while collapsed */

/* Mouse-follow spotlight glow inside the sidebar */
nav::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(220px circle at var(--pw-sb-spot-x,50%) var(--pw-sb-spot-y,0%), rgba(201,150,47,0.22), transparent 62%);
  opacity:0; transition: opacity .35s ease;
}
nav:hover::before{ opacity:1; }

/* ---- Nav buttons restyled for a vertical premium list (same elements, same
   data-tab, same classes — only presentation changes) ---- */
nav button{
  display:flex; align-items:center; gap:14px;
  width:100%; text-align:left;
  padding:12px 14px; margin:0;
  border-radius:14px;
  background:rgba(201,150,47,0.06);
  border:1px solid rgba(201,150,47,0.18);
  color: var(--forest);
  font-size:.9rem; font-weight:700; letter-spacing:.2px;
  white-space:nowrap;
  position:relative; z-index:1;
  flex:none;
}
nav button .pw-nav-ico{
  flex:none; width:20px; text-align:center; font-size:1.05rem;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
nav button .pw-nav-label{
  overflow:hidden; text-overflow:ellipsis; transition: opacity .2s ease, width .2s ease;
}
body.pw-sb-collapsed nav:not(:hover) button .pw-nav-label{ opacity:0; width:0; }

nav button:hover:not(.active){
  background:rgba(31,138,95,0.14);
  border:1px solid rgba(31,138,95,0.4);
  transform: translateY(-2px);
  box-shadow:0 8px 18px rgba(31,138,95,.16), 0 0 12px rgba(201,150,47,.12);
}
nav button:hover:not(.active) .pw-nav-ico{ transform: scale(1.08); }
nav button:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* Keep the site's existing "liquid highlight pill" (moving gold active
   indicator, spring transition) rounded to match the vertical pill shape —
   its JS positioning logic already works for any layout since it reads
   getBoundingClientRect(), so nothing else needs to change for it to work
   inside the sidebar. */
.pw-nav-highlight{ border-radius:14px; }

/* ---- Sidebar brand removed per request (v19): the logo+"STAY CONFIDENT"
   badge that used to sit at the top of the sidebar has been taken out
   entirely. Nav now starts straight with the menu buttons. ---- */

/* ---- Collapse toggle (desktop) ---- */
#pwSbCollapseBtn{
  position:fixed; top:20px; z-index:902;
  left: calc(var(--pw-sb-w) - 16px);
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--gold); background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:#3d2f0a;
  cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.75rem;
  box-shadow:0 6px 16px rgba(201,150,47,.35);
  transition: left .35s cubic-bezier(.22,1,.36,1), transform .3s ease;
}
#pwSbCollapseBtn i{ transition: transform .3s ease; }
body.pw-sb-collapsed #pwSbCollapseBtn{ left: calc(var(--pw-sb-w-collapsed) - 16px); }
body.pw-sb-collapsed #pwSbCollapseBtn i{ transform: rotate(180deg); }

/* ---- Mobile hamburger + slide-in drawer ---- */
#pwSbHamburger{ display:none; }
#pwSbOverlay{ display:none; }

@media (max-width: 880px){
  body{ padding-left:0 !important; }
  nav{ transform: translateX(-100%); width:min(82vw,300px); padding-top:96px; }
  body.pw-sb-mobile-open nav{ transform: translateX(0); }
  #pwSbCollapseBtn{ display:none; }
  #pwSbHamburger{
    display:flex; align-items:center; justify-content:center;
    position:fixed; top:14px; left:14px; z-index:950;
    width:44px; height:44px; border-radius:12px; border:1px solid var(--gold);
    background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:#3d2f0a; font-size:1.1rem; cursor:pointer;
    box-shadow:0 6px 16px rgba(201,150,47,.35);
  }
  #pwSbOverlay{
    position:fixed; inset:0; z-index:890; opacity:0; pointer-events:none;
    background:rgba(0,0,0,0); transition:opacity .3s ease, background .3s ease;
  }
  body.pw-sb-mobile-open #pwSbOverlay{
    display:block; opacity:1; pointer-events:auto; background:rgba(0,0,0,.5); backdrop-filter:blur(2px);
  }
}

/* ---- Smooth fade/slide transition when a section becomes active (purely
   visual — the underlying section.active{display:block} rule is untouched) ---- */
section.active{ animation: pwSbSectionIn .45s cubic-bezier(.22,1,.36,1); }
@keyframes pwSbSectionIn{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---- style block 9 ---- */
/* ---- Smooth, consistent 300ms state transitions on every sidebar button ---- */
nav button{
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease,
              color .3s ease, transform .25s ease, border-radius .3s ease;
}

/* ---- Emerald + Gold active state (only one button can ever carry .active —
   enforced by the existing tab-switch logic, which always removes it from
   every button before adding it to the clicked one) ---- */
nav button.active{
  color:#ffffff;
  background:linear-gradient(135deg, var(--emerald), var(--forest) 120%);
  border:1px solid var(--emerald-soft);
  border-radius:18px;
  font-weight:800;
  box-shadow:
    0 0 0 1px rgba(201,150,47,.55),
    0 0 22px 3px rgba(31,138,95,.45),
    0 10px 24px -4px rgba(11,61,44,.55);
}
nav button.active .pw-nav-ico,
nav button.active .pw-nav-label{ color:#ffffff; }

/* Gold left indicator that grows in on activation */
nav button::before{
  content:''; position:absolute; left:2px; top:50%;
  width:4px; height:0;
  background:linear-gradient(180deg, var(--gold-light), var(--gold));
  border-radius:4px;
  transform:translateY(-50%);
  transition: height .3s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
nav button.active::before{ height:64%; }

/* The liquid pill behind the active button becomes a soft glow instead of a
   solid fill, since the button itself now carries the emerald surface. */
.pw-nav-highlight{
  background:linear-gradient(135deg, rgba(201,150,47,.30), rgba(224,182,90,.18));
  box-shadow:0 0 26px 6px rgba(201,150,47,.35);
}

/* ---- Fix: the legacy "sticky top-nav shadow on scroll" rule (written back
   when <nav> was a horizontal top bar) still fires now that <nav> is the
   fixed sidebar, and its padding-top/bottom override was clobbering the
   sidebar's logo clearance padding whenever the page scrolled. Scrolling
   must never move or resize the sidebar or its active button, so this
   neutralises that old rule for the sidebar layout while keeping the
   scrolled-shadow effect. */
nav.scrolled{ padding:112px 14px 24px; box-shadow:10px 0 34px rgba(0,0,0,0.12); }
@media (max-width:880px){
  nav.scrolled{ padding-top:96px; }
}

/* ---- Breadcrumb: "Home > Current Page", auto-updated on every tab switch ---- */
.pw-crumb{
  max-width:1000px; margin:14px auto 0; padding:0 18px;
  display:flex; align-items:center; gap:8px;
  font-size:.84rem; font-weight:600; color:var(--muted);
}
.pw-crumb i{ color:var(--gold); font-size:.78rem; }
.pw-crumb .pw-crumb-sep{ color:var(--sand); }
.pw-crumb b{ color:var(--forest); font-weight:800; }

/* ---- Admin dashboard: occupancy status badges ---- */
.pw-dash-badge{
  display:inline-block; padding:2px 10px; border-radius:20px;
  font-size:.68rem; font-weight:800; letter-spacing:.3px; color:#fff;
  margin-left:8px; vertical-align:middle;
}
.pw-dash-badge.full{ background:var(--booked); }
.pw-dash-badge.high{ background:var(--emerald); }
.pw-dash-badge.medium{ background:#f39c12; }
.pw-dash-badge.low{ background:var(--none); }

/* ---- Admin dashboard: top-interest insights panel ---- */
.pw-dash-insight-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 4px; border-bottom:1px dashed var(--sand); font-size:.85rem;
}
.pw-dash-insight-row:last-child{ border-bottom:none; }
.pw-dash-insight-name{ color:var(--forest); font-weight:700; }
.pw-dash-insight-count{
  background:var(--forest); color:var(--gold-light); font-weight:800;
  font-size:.72rem; padding:2px 10px; border-radius:20px;
}

/* ---- style block 10 ---- */
/* ---------- Photo Gallery ---------- */
/* ---- On-page "Add Photos" card on the Gallery tab, admin only ---- */
#pwGalleryAdminUpload{ display:none; }
body.admin-mode #pwGalleryAdminUpload{
  display:block;
  margin-bottom:22px;
  padding:18px;
  border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(255,255,255,0.92), rgba(253,246,230,0.75));
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow);
}
.pw-gal-quick-upload-head{
  display:flex; align-items:flex-start; gap:12px; margin-bottom:12px;
}
.pw-gal-quick-upload-head i{ font-size:1.4rem; color:var(--gold); margin-top:2px; }
.pw-gal-quick-upload-title{ font-weight:800; color:var(--forest); font-size:1rem; }
.pw-gal-quick-upload-sub{ font-size:0.8rem; color:var(--muted); margin-top:2px; }
#pwGalleryAdminUpload select{
  width:100%; padding:10px 12px; margin-top:6px; margin-bottom:14px;
  border-radius:10px; border:1px solid var(--sand); font-size:0.9rem;
  background:#fff; color:var(--ink);
}
.pw-gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:14px;
}
.pw-gallery-tile{
  position:relative;
  height:150px;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:var(--shadow);
  border:1px solid var(--sand);
  transition:transform .25s ease, box-shadow .25s ease;
}
.pw-gallery-tile:hover{ transform:translateY(-4px) scale(1.02); box-shadow:0 14px 30px rgba(11,61,44,0.25); }
.pw-gallery-tile{ background-size:cover; background-position:center; }
.pw-gallery-count{
  position:absolute; top:8px; right:8px;
  background:rgba(11,61,44,0.75); color:#fff;
  font-size:0.72rem; font-weight:700;
  padding:3px 8px; border-radius:20px;
  display:flex; align-items:center; gap:5px;
}
.pw-lightbox-img{
  width:100%; height:100%; object-fit:cover; display:block;
}
/* ---------- Admin gallery photo manager ---------- */
.pw-gal-admin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:12px;
}
.pw-gal-admin-thumb{
  position:relative; border-radius:10px; overflow:hidden;
  height:100px; background-size:cover; background-position:center;
  border:2px solid transparent;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
}
.pw-gal-admin-thumb.pw-gal-is-cover{ border-color:var(--gold); }
.pw-gal-admin-thumb .pw-gal-cover-tag{
  position:absolute; top:4px; left:4px;
  background:var(--gold); color:var(--forest);
  font-size:0.62rem; font-weight:800; letter-spacing:.03em;
  padding:2px 6px; border-radius:5px; text-transform:uppercase;
}
.pw-gal-admin-thumb .pw-gal-thumb-actions{
  position:absolute; inset:auto 0 0 0;
  display:flex; gap:4px; padding:4px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.7));
}
.pw-gal-admin-thumb .pw-gal-thumb-actions button{
  flex:1; border:none; border-radius:5px; cursor:pointer;
  font-size:0.68rem; font-weight:700; padding:4px 2px;
  background:rgba(255,255,255,0.92); color:var(--forest);
}
.pw-gal-admin-thumb .pw-gal-thumb-actions button:hover{ background:#fff; }
.pw-gal-admin-thumb .pw-gal-thumb-remove{ background:#d9534f; color:#fff; }
.pw-gal-admin-thumb .pw-gal-thumb-remove:hover{ background:#c9302c; }
.pw-gal-uploading{ opacity:0.6; pointer-events:none; }

/* ---- Drag & drop upload zone ---- */
.pw-gal-dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; cursor:pointer;
  border:2px dashed var(--sand);
  border-radius:14px;
  padding:26px 16px;
  background:rgba(201,150,47,0.05);
  color:var(--muted);
  transition:var(--transition);
  position:relative;
}
.pw-gal-dropzone i{ font-size:1.6rem; color:var(--gold); }
.pw-gal-dropzone:hover{ border-color:var(--gold-light); background:rgba(201,150,47,0.1); }
.pw-gal-dropzone.pw-gal-drag-over{
  border-color:var(--gold); background:rgba(201,150,47,0.16);
  box-shadow:0 0 0 3px rgba(201,150,47,0.18) inset;
}
.pw-gal-dropzone #galFileInput{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer;
}

/* ---- Upload progress bar ---- */
.pw-gal-progress-wrap{
  display:flex; align-items:center; gap:10px;
  margin-top:10px;
}
.pw-gal-progress-bar{
  flex:1; height:8px; border-radius:6px;
  background:var(--sand); overflow:hidden;
}
.pw-gal-progress-fill{
  height:100%; border-radius:6px;
  background:linear-gradient(90deg, var(--gold), var(--gold-light));
  transition:width .25s ease;
}
.pw-gal-progress-text{ font-size:0.75rem; font-weight:700; color:var(--forest); min-width:96px; text-align:right; }

/* ---- Drag-to-reorder thumbnails + caption input ---- */
.pw-gal-admin-thumb{ cursor:grab; }
.pw-gal-admin-thumb.pw-gal-dragging{ opacity:0.4; cursor:grabbing; }
.pw-gal-admin-thumb.pw-gal-drop-target{ outline:3px solid var(--gold); outline-offset:-3px; }
.pw-gal-admin-thumb .pw-gal-drag-handle{
  position:absolute; top:4px; right:4px;
  width:22px; height:22px; border-radius:6px;
  background:rgba(11,61,44,0.55); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:0.65rem; pointer-events:none;
}
.pw-gal-admin-thumb .pw-gal-caption-input{
  position:absolute; left:4px; right:4px; bottom:32px;
  font-size:0.66rem; padding:4px 6px; border-radius:6px;
  border:1px solid rgba(255,255,255,0.5);
  background:rgba(0,0,0,0.55); color:#fff;
  cursor:text;
}
.pw-gal-admin-thumb .pw-gal-caption-input::placeholder{ color:rgba(255,255,255,0.7); }
.pw-gal-admin-thumb.pw-gal-is-cover .pw-gal-caption-input{ bottom:32px; }
.pw-gallery-tile .pw-gallery-bg{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; color:rgba(255,255,255,0.92);
}
.pw-gallery-tile .pw-gallery-label{
  position:absolute; left:0; right:0; bottom:0;
  padding:8px 10px;
  background:linear-gradient(180deg, transparent, rgba(11,61,44,0.85));
  color:#fff; font-weight:700; font-size:0.85rem;
}
.pw-lightbox-overlay{
  position:fixed; inset:0; z-index:4000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(7,20,15,0.92);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease;
}
.pw-lightbox-overlay.pw-lightbox-open{ opacity:1; visibility:visible; pointer-events:auto; }
.pw-lightbox-stage{
  width:min(88vw,560px); height:min(60vh,420px);
  border-radius:18px; overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center;
  font-size:4rem; color:rgba(255,255,255,0.95);
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
  transform:scale(0.94); transition:transform .3s ease;
}
.pw-lightbox-open .pw-lightbox-stage{ transform:scale(1); }
.pw-lightbox-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 18px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.75));
  color:#fff; font-weight:700;
  display:flex; justify-content:space-between; align-items:center;
}
.pw-lightbox-close, .pw-lightbox-prev, .pw-lightbox-next{
  position:fixed;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.35);
  color:#fff; border-radius:50%;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1.1rem;
  transition:background .2s ease;
}
.pw-lightbox-close:hover, .pw-lightbox-prev:hover, .pw-lightbox-next:hover{ background:var(--gold); color:var(--forest); }
.pw-lightbox-close{ top:24px; right:24px; }
.pw-lightbox-prev{ left:24px; top:50%; transform:translateY(-50%); }
.pw-lightbox-next{ right:24px; top:50%; transform:translateY(-50%); }
@media(max-width:640px){
  .pw-lightbox-prev{ left:8px; } .pw-lightbox-next{ right:8px; } .pw-lightbox-close{ top:12px; right:12px; }
}

/* ==========================================================
   PREMIUM REVIEWS MODULE
   Airbnb / Booking.com / Google Business Profile inspired.
   Glassmorphism + Emerald/Gold luxury design language, built
   entirely from the site's existing CSS variables.
========================================================== */

/* ---- shared bits ---- */
.rv-section-label{ font-weight:800; color:var(--forest); font-size:1.05rem; margin:22px 0 12px; display:flex; align-items:center; gap:8px; }
.rv-tag{
  display:inline-block; background:rgba(31,138,95,0.1); color:var(--teal);
  border:1px solid rgba(31,138,95,0.25); border-radius:20px; padding:3px 10px;
  font-size:0.72rem; font-weight:700; margin:0 6px 6px 0;
}
.rv-btn{
  padding:9px 16px; border-radius:10px; border:1px solid var(--gold);
  background:#fff; color:var(--forest); font-weight:700; font-size:0.82rem; cursor:pointer;
  transition:.2s;
}
.rv-btn:hover{ background:var(--gold); color:#fff; }
.rv-btn:disabled{ opacity:.6; cursor:wait; }
.rv-btn-primary{ background:linear-gradient(135deg,var(--emerald),var(--teal)); color:#fff; border-color:var(--teal); }
.rv-btn-primary:hover{ filter:brightness(1.08); }
.rv-input, .rv-select{
  padding:9px 12px; border-radius:10px; border:1px solid var(--sand);
  background:#fff; color:var(--ink); font-size:0.85rem; font-family:inherit;
}
.rv-input:focus, .rv-select:focus{ outline:2px solid var(--gold-light); }

/* ---- Hero: overall Google rating + distribution (glass, on gradient) ---- */
.rv-hero{
  position:relative; display:flex; flex-wrap:wrap; gap:26px;
  background:linear-gradient(135deg,var(--forest) 0%, var(--teal) 100%);
  border-radius:22px; padding:26px 28px; box-shadow:0 14px 40px rgba(11,61,44,0.28);
  overflow:hidden; margin-bottom:18px;
}
.rv-hero::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 85% 15%, rgba(224,182,90,0.25), transparent 55%);
  pointer-events:none;
}
.rv-hero-left{ position:relative; min-width:170px; text-align:center; }
.rv-hero-score{ font-size:3rem; font-weight:800; color:#fff; line-height:1; text-shadow:0 4px 14px rgba(0,0,0,0.25); }
.rv-hero-stars{ color:var(--gold-light); font-size:1.3rem; letter-spacing:3px; margin:6px 0; }
.rv-hero-meta{ color:rgba(255,255,255,0.85); font-size:0.82rem; }
.rv-hero-google{
  margin-top:12px; display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,0.14); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.25); color:#fff; border-radius:20px;
  padding:5px 12px; font-size:0.72rem; font-weight:700;
}
.rv-hero-right{ position:relative; flex:1; min-width:220px; display:flex; flex-direction:column; justify-content:center; gap:6px; }
.rv-dist-row{ display:flex; align-items:center; gap:10px; }
.rv-dist-label{ width:26px; color:rgba(255,255,255,0.85); font-size:0.78rem; font-weight:700; }
.rv-dist-track{ flex:1; height:9px; border-radius:6px; background:rgba(255,255,255,0.18); overflow:hidden; }
.rv-dist-fill{ height:100%; border-radius:6px; background:linear-gradient(90deg,var(--gold-light),var(--gold)); transition:width .6s cubic-bezier(.16,1,.3,1); }
.rv-dist-count{ width:26px; text-align:right; color:rgba(255,255,255,0.75); font-size:0.72rem; }

/* ---- Toolbar ---- */
.rv-toolbar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }

/* ---- Featured reviews (pinned showcase row) ---- */
.rv-featured-wrap{ margin-bottom:6px; }
.rv-featured-title{ font-weight:800; color:var(--forest); font-size:1.05rem; margin-bottom:12px; }
.rv-featured-row{ display:flex; gap:16px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x proximity; }
.rv-featured-row .rv-card{ flex:0 0 min(300px,86vw); scroll-snap-align:start; }
.rv-card-featured{ border-top-color:var(--gold) !important; background:linear-gradient(180deg,#fffdf6,var(--cream-card)); }

/* ---- Review grid + cards (glassmorphism, gold accent, animated) ---- */
.rv-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.rv-card{
  position:relative;
  background:rgba(255,255,255,0.72); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.5); border-top:4px solid var(--emerald);
  border-radius:18px; padding:18px; box-shadow:0 10px 26px rgba(11,61,44,0.1);
  transition:transform .25s ease, box-shadow .25s ease;
}
.rv-card:hover{ transform:translateY(-5px); box-shadow:0 18px 36px rgba(11,61,44,0.18); }
.rv-pin{
  position:absolute; top:-10px; right:14px; background:var(--gold); color:#fff;
  font-size:0.68rem; font-weight:800; padding:3px 10px; border-radius:20px;
  box-shadow:0 4px 10px rgba(201,150,47,0.4);
}
.rv-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.rv-avatar, .rv-avatar-img{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:0.9rem;
  box-shadow:0 0 0 3px #fff, 0 4px 10px rgba(0,0,0,0.15);
  object-fit:cover;
}
.rv-card-name{ font-weight:800; color:var(--forest); font-size:0.92rem; }
.rv-card-date{ color:var(--muted); font-size:0.72rem; margin-top:2px; }
.rv-card-stars{ color:var(--gold); letter-spacing:2px; margin-bottom:8px; }
.rv-card-text{ color:var(--ink); font-size:0.88rem; line-height:1.55; margin-bottom:10px; }
.rv-card-tags{ margin-bottom:8px; }
.rv-card-foot{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.rv-badge-verified{
  display:inline-flex; align-items:center; gap:3px; background:rgba(31,138,95,0.12);
  color:var(--emerald); border-radius:20px; padding:2px 8px; font-size:0.68rem; font-weight:800;
}
.rv-badge-helpful{
  background:var(--sand); color:var(--forest); border-radius:20px; padding:3px 10px;
  font-size:0.7rem; font-weight:700;
}
.rv-badge-featured{
  background:linear-gradient(135deg,var(--gold-light),var(--gold)); color:#fff;
  border-radius:20px; padding:3px 10px; font-size:0.7rem; font-weight:800;
}
.rv-loadmore-wrap{ text-align:center; margin:20px 0; }
.rv-loadmore-btn{
  padding:10px 22px; border-radius:30px; border:1px solid var(--gold);
  background:#fff; color:var(--forest); font-weight:700; cursor:pointer; transition:.2s;
}
.rv-loadmore-btn:hover{ background:var(--gold); color:#fff; }

/* ---- Analytics ---- */
.rv-analytics{
  margin-top:30px; background:var(--cream-card); border:1px solid var(--sand);
  border-radius:18px; padding:22px; box-shadow:var(--shadow);
}
.rv-analytics-title{ font-weight:800; color:var(--forest); font-size:1.1rem; margin-bottom:16px; }
.rv-analytics-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-bottom:20px; }
.rv-analytics-card{
  background:linear-gradient(135deg,#fff,var(--cream)); border:1px solid var(--sand); border-left:4px solid var(--gold);
  border-radius:14px; padding:14px 16px; text-align:center;
}
.rv-analytics-num{ font-size:1.5rem; font-weight:800; color:var(--forest); }
.rv-analytics-label{ font-size:0.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-top:2px; }
.rv-analytics-row2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.rv-analytics-block{ background:var(--cream); border:1px solid var(--sand); border-radius:14px; padding:14px; }
.rv-analytics-block-title{ font-weight:800; color:var(--forest); font-size:0.85rem; margin-bottom:8px; }
.rv-analytics-mini{ font-size:0.82rem; color:var(--ink); line-height:1.5; }
.rv-keyword-row{ display:flex; flex-wrap:wrap; }
.rv-growth-chart{ display:flex; align-items:flex-end; gap:10px; height:120px; margin-top:10px; padding:0 4px; }
.rv-growth-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.rv-growth-bar{
  width:100%; max-width:34px; border-radius:8px 8px 4px 4px;
  background:linear-gradient(180deg,var(--gold-light),var(--emerald));
  display:flex; align-items:flex-start; justify-content:center;
  transition:height .6s cubic-bezier(.16,1,.3,1); position:relative; min-height:6px;
}
.rv-growth-bar span{ position:absolute; top:-20px; font-size:0.7rem; font-weight:800; color:var(--forest); }
.rv-growth-label{ font-size:0.7rem; color:var(--muted); margin-top:6px; }

/* ---- Homepage: Google rating + auto-rotating testimonial ---- */
.rv-home-widget{
  margin-top:22px; background:linear-gradient(135deg,var(--forest),var(--teal)); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.25); border-radius:18px; padding:20px;
  box-shadow:0 8px 24px rgba(11,61,44,0.25);
}
.rv-home-rating{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:14px; }
.rv-home-gicon{ color:var(--gold-light); font-size:1.1rem; }
.rv-home-score{ font-size:1.3rem; font-weight:800; color:#fff; }
.rv-home-stars{ color:var(--gold-light); letter-spacing:2px; }
.rv-home-count{ color:rgba(255,255,255,0.8); font-size:0.8rem; }
.rv-home-carousel{ position:relative; min-height:96px; }
.rv-home-slide{
  text-align:center; max-width:640px; margin:0 auto;
  transition:opacity .35s ease, transform .35s ease;
  opacity:1; transform:translateY(0) translateX(0);
}
.rv-home-slide.rv-slide-out{ opacity:0; transform:translateY(6px) translateX(-14px); }
.rv-home-slide.rv-slide-in{ animation:rvSlideIn .5s ease; }
@keyframes rvSlideIn{
  0%{ opacity:0; transform:translateY(6px) translateX(14px); }
  100%{ opacity:1; transform:translateY(0) translateX(0); }
}
.rv-home-stars-sm{ color:var(--gold-light); letter-spacing:2px; margin-bottom:6px; }
.rv-home-text{ color:#fff; font-size:0.95rem; line-height:1.6; font-style:italic; }
.rv-home-author{ color:var(--gold-light); font-weight:700; margin-top:8px; font-size:0.85rem; }

/* ---- Admin: reviews management ---- */
.rv-admin-toolbar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; align-items:flex-start; }
.rv-add-form{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; width:100%; background:var(--cream); border:1px solid var(--sand); border-radius:12px; padding:14px; margin-top:8px; }
.rv-admin-list{ display:flex; flex-direction:column; gap:10px; }
.rv-admin-row{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--cream-card); border:1px solid var(--sand); border-left:4px solid var(--emerald);
  border-radius:12px; padding:12px 16px; transition:.2s;
}
.rv-admin-row:hover{ box-shadow:0 6px 16px rgba(11,61,44,0.1); }
.rv-admin-row-main{ flex:1; min-width:220px; }
.rv-admin-row-name{ font-weight:800; color:var(--forest); font-size:0.9rem; }
.rv-admin-stars{ color:var(--gold); letter-spacing:1px; font-size:0.8rem; margin-left:6px; }
.rv-admin-row-text{ color:var(--muted); font-size:0.82rem; margin-top:3px; }
.rv-admin-row-meta{ color:var(--muted); font-size:0.72rem; margin-top:4px; }
.rv-admin-badge{ background:var(--sand); color:var(--forest); border-radius:10px; padding:1px 7px; font-weight:700; }
.rv-admin-badge.rv-badge-featured{ background:var(--gold); color:#fff; }
.rv-admin-badge-hidden{ background:var(--booked); color:#fff; }
.rv-admin-row-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.rv-mini-btn{
  padding:6px 11px; border-radius:8px; border:1px solid var(--sand); background:#fff;
  color:var(--forest); font-size:0.72rem; font-weight:700; cursor:pointer; transition:.2s;
}
.rv-mini-btn:hover{ background:var(--forest); color:#fff; border-color:var(--forest); }
.rv-mini-btn-danger:hover{ background:var(--booked); border-color:var(--booked); }

@media(max-width:640px){
  .rv-hero{ flex-direction:column; align-items:center; text-align:center; }
  .rv-hero-right{ width:100%; }
  .rv-admin-row{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Admin Dashboard ---------- */
.pw-dash-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:14px; margin-bottom:22px;
}
.pw-dash-card{
  background:var(--cream-card); border:1px solid var(--sand); border-left:4px solid var(--gold);
  border-radius:14px; padding:16px; box-shadow:var(--shadow);
}
.pw-dash-card .pw-dash-num{ font-size:1.6rem; font-weight:800; color:var(--forest); }
.pw-dash-card .pw-dash-label{ font-size:0.78rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:0.4px; }
.pw-dash-chart-title{ font-weight:800; color:var(--forest); margin:18px 0 10px; }
.pw-dash-bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.pw-dash-bar-label{ width:110px; font-size:0.8rem; color:var(--muted); flex-shrink:0; text-align:right; }
.pw-dash-bar-track{ flex:1; height:14px; border-radius:8px; background:var(--sand); overflow:hidden; }
.pw-dash-bar-fill{ height:100%; background:linear-gradient(90deg,var(--emerald),var(--gold)); border-radius:8px; transition:width .4s ease; }
.pw-dash-bar-pct{ width:42px; font-size:0.78rem; font-weight:700; color:var(--forest); }
.pw-dash-refresh{
  padding:8px 16px; border-radius:9px; border:1px solid var(--gold); background:#fff;
  color:var(--forest); font-weight:700; cursor:pointer; margin-bottom:16px;
}
.pw-dash-refresh:hover{ background:var(--gold); color:#fff; }

/* ---------- Mobile Bottom Nav ---------- */
.pw-bottom-nav{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:2500;
  background:rgba(11,61,44,0.96);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid var(--gold);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 20px rgba(0,0,0,0.25);
}
.pw-bottom-nav-inner{ display:flex; justify-content:space-around; }
.pw-bottom-nav button{
  background:none; border:none; color:rgba(255,255,255,0.75);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:0.65rem; font-weight:700; padding:4px 6px; cursor:pointer;
}
.pw-bottom-nav button i{ font-size:1.05rem; }
.pw-bottom-nav button.pw-bn-active{ color:var(--gold-light); }
@media(max-width:880px){
  .pw-bottom-nav{ display:block; }
  body{ padding-bottom:64px; }
}

/* ---- style block 11 ---- */
/* ---- Sidebar search box ---- */
.pw-sb-search{
  position:relative; flex:none; margin:0 0 10px;
}
.pw-sb-search input{
  width:100%; box-sizing:border-box;
  padding:9px 12px 9px 34px; border-radius:12px;
  border:1px solid rgba(201,150,47,0.35);
  background:rgba(255,255,255,0.55);
  color:var(--forest); font-size:.82rem; font-weight:600;
  outline:none; transition:border-color .2s ease, background .2s ease;
}
.pw-sb-search input:focus{ border-color:var(--gold); background:#fff; }
.pw-sb-search i{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--muted); font-size:.8rem; pointer-events:none;
}
body.pw-sb-collapsed nav:not(:hover) .pw-sb-search{ opacity:0; height:0; margin:0; overflow:hidden; pointer-events:none; }
nav button.pw-nav-hidden{ display:none !important; }

/* ---- Gallery filter bar ---- */
.pw-gal-tools{ display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.pw-gal-search{ position:relative; max-width:320px; }
.pw-gal-search input{
  width:100%; box-sizing:border-box; padding:10px 14px 10px 36px;
  border-radius:12px; border:1px solid var(--sand); font-size:.88rem;
  color:var(--forest); outline:none; transition:border-color .2s ease;
}
.pw-gal-search input:focus{ border-color:var(--gold); }
.pw-gal-search i{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:.85rem; }
.pw-gal-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.pw-gal-chip{
  padding:6px 14px; border-radius:20px; border:1px solid var(--sand);
  background:#fff; color:var(--forest); font-size:.78rem; font-weight:700;
  cursor:pointer; transition:all .2s ease;
}
.pw-gal-chip:hover{ border-color:var(--gold); }
.pw-gal-chip.pw-gal-chip-active{ background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:#3d2f0a; border-color:var(--gold); }
.pw-gal-empty{ text-align:center; padding:30px 10px; color:var(--muted); font-size:.9rem; display:none; }
.pw-gallery-tile{ opacity:0; transform:translateY(14px) scale(.97); transition:opacity .45s ease, transform .45s ease; }
.pw-gallery-tile.pw-gal-in{ opacity:1; transform:translateY(0) scale(1); }
.pw-gallery-tile.pw-gal-filtered-out{ display:none; }

/* ---- Admin dashboard card polish: glass + gradient border + hover lift ---- */
.pw-dash-card{
  position:relative;
  background:linear-gradient(135deg, rgba(255,255,255,0.8), rgba(253,246,230,0.6));
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  box-shadow:0 10px 26px rgba(11,61,44,0.12);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
  overflow:hidden;
}
.pw-dash-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(11,61,44,0.2); }
.pw-dash-card::after{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, var(--gold), transparent 45%, var(--emerald));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; pointer-events:none;
}

/* ---- style block 12 ---- */
  /* ---- Sticky nav gets a deeper glass shadow once scrolled ---- */
  nav.sc15-scrolled{
    box-shadow:0 12px 30px -10px rgba(11,61,44,0.45);
    backdrop-filter:blur(10px) saturate(140%);
  }

  /* ---- Trust strip injected right under the header ---- */
  .sc15-trust{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 18px;
    padding:14px 16px;
    background:linear-gradient(180deg, rgba(11,61,44,0.04), transparent);
    border-bottom:1px solid rgba(201,150,47,0.25);
  }
  .sc15-trust span{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:0.8rem;
    font-weight:700;
    color:var(--forest);
    background:#fff;
    border:1px solid var(--sand);
    padding:7px 14px;
    border-radius:30px;
    box-shadow:0 3px 10px rgba(11,61,44,0.08);
    letter-spacing:0.2px;
  }
  .sc15-trust span b{
    color:var(--gold);
    font-size:0.95rem;
  }
  @media(max-width:640px){
    .sc15-trust span{ font-size:0.72rem; padding:6px 11px; }
  }

  /* ---- Floating quick-action buttons (WhatsApp / Call) ---- */
  .sc15-float{
    position:fixed;
    right:18px;
    bottom:22px;
    z-index:900;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .sc15-float button{
    width:56px;
    height:56px;
    border-radius:50%;
    border:none;
    cursor:pointer;
    font-size:1.4rem;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 26px -6px rgba(11,61,44,0.45);
    transition:transform .25s ease, box-shadow .25s ease;
    color:#fff;
  }
  .sc15-float button:hover{
    transform:translateY(-4px) scale(1.06);
  }
  .sc15-float button i{ font-size:1.3rem; line-height:1; }
  .sc15-float .sc15-wa{
    background:linear-gradient(135deg,#25D366,#1DA851);
    box-shadow:0 10px 26px -6px rgba(29,168,81,0.55), 0 0 0 1px rgba(255,255,255,0.08) inset;
  }
  .sc15-float .sc15-call{
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:var(--forest-deep);
    animation:sc15Pulse 2.6s infinite;
    box-shadow:0 10px 26px -6px rgba(201,150,47,0.55), 0 0 0 1px rgba(255,255,255,0.08) inset;
  }
  @keyframes sc15Pulse{
    0%,100%{ box-shadow:0 10px 26px -6px rgba(201,150,47,0.5); }
    50%{ box-shadow:0 10px 34px -6px rgba(201,150,47,0.85); }
  }

  /* ---- Subtle extra shine on primary hero buttons (additive only) ---- */
  .sc-hero-btn-grid .sc-primary{
    position:relative;
    overflow:hidden;
  }
  .sc-hero-btn-grid .sc-primary::after{
    content:'';
    position:absolute;
    top:0; left:-60%;
    width:40%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
    transform:skewX(-20deg);
    animation:sc15Shine 3.2s ease-in-out infinite;
  }
  @keyframes sc15Shine{
    0%{ left:-60%; }
    45%{ left:120%; }
    100%{ left:120%; }
  }

  @media (prefers-reduced-motion:reduce){
    .sc15-float .sc15-call, .sc-hero-btn-grid .sc-primary::after{ animation:none; }
  }

/* ---- style block 13 ---- */
.sc16-wish-btn{
  position:absolute; top:12px; right:12px; z-index:5;
  width:38px; height:38px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.92); color:var(--muted);
  font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(11,61,44,0.18); transition:transform .2s ease, color .2s ease;
}
/* Reserve room next to the heart button so unit names never get hidden behind it */
#unitsGrid .unit-card{ position:relative; }
#unitsGrid .unit-card h3{
  padding-right:46px;
  box-sizing:border-box;
}
.sc16-wish-btn:hover{ transform:scale(1.12); }
.sc16-wish-btn.active{ color:#e0435a; }

.sc16-recent-wrap{ margin:18px 0 26px; }
.sc16-recent-wrap h4{ font-family:'Fraunces',serif; color:var(--forest); margin:0 0 10px; font-size:1.05rem; }
.sc16-recent-strip{ display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; }
.sc16-recent-chip{
  flex:0 0 auto; background:#fff; border:1px solid var(--sand); border-radius:12px;
  padding:10px 16px; font-weight:700; color:var(--forest); cursor:pointer;
  box-shadow:var(--shadow); white-space:nowrap; transition:transform .2s ease;
}
.sc16-recent-chip:hover{ transform:translateY(-2px); border-color:var(--gold); }

.sc16-compare-row{ margin-top:8px; font-size:12px; }
.sc16-compare-row label{ cursor:pointer; user-select:none; }

.sc16-compare-bar{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(120%);
  background:var(--forest); color:#fff; padding:12px 20px; border-radius:14px;
  display:flex; align-items:center; gap:14px; box-shadow:0 10px 30px rgba(0,0,0,0.3);
  z-index:9998; transition:transform .3s ease;
}
.sc16-compare-bar.show{ transform:translateX(-50%) translateY(0); }
.sc16-compare-bar button{ border:none; border-radius:8px; padding:8px 14px; font-weight:700; cursor:pointer; }
.sc16-compare-bar .sc16-cbtn-go{ background:var(--gold); color:var(--forest-deep); }
.sc16-compare-bar .sc16-cbtn-clear{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.4); }

.sc16-modal-overlay{
  position:fixed; inset:0; background:rgba(11,61,44,0.55); z-index:99999;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.sc16-modal{
  background:#fff; border-radius:16px; max-width:720px; width:100%; max-height:85vh;
  overflow:auto; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,0.35); position:relative;
}
.sc16-modal h3{ font-family:'Fraunces',serif; color:var(--forest); margin-top:0; }
.sc16-modal-close{
  position:absolute; top:14px; right:16px; border:none; background:none; font-size:1.3rem;
  cursor:pointer; color:var(--muted);
}
.sc16-compare-table{ width:100%; border-collapse:collapse; font-size:13px; }
.sc16-compare-table th, .sc16-compare-table td{ border:1px solid var(--sand); padding:8px 10px; text-align:left; }
.sc16-compare-table th{ background:var(--cream); color:var(--forest); }
.sc16-wish-empty{ color:var(--muted); font-size:14px; }
.sc16-wish-item{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--sand); }
.sc16-wish-item button{ border:none; background:var(--teal); color:#fff; border-radius:8px; padding:6px 12px; cursor:pointer; font-weight:700; font-size:12px; }

.sc16-calc-card{
  background:#fff; border-radius:16px; padding:20px; margin:0 0 24px; box-shadow:var(--shadow);
  border:1px solid var(--sand);
}
.sc16-calc-card h3{ font-family:'Fraunces',serif; color:var(--forest); margin:0 0 12px; }
.sc16-calc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:14px; }
.sc16-calc-grid label{ display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:4px; }
.sc16-calc-grid select, .sc16-calc-grid input{
  width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--sand); font-size:14px; box-sizing:border-box;
}
.sc16-calc-results{ display:flex; gap:16px; flex-wrap:wrap; }
.sc16-calc-box{ flex:1; min-width:160px; background:var(--cream); border-radius:12px; padding:14px 16px; }
.sc16-calc-box b{ display:block; font-size:1.3rem; color:var(--forest); font-family:'Fraunces',serif; }
.sc16-calc-box span{ font-size:12px; color:var(--muted); }

.sc16-wish-fab{
  position:fixed; left:22px; bottom:22px; z-index:9997;
  background:#fff; border:1px solid var(--sand); border-radius:50px; padding:12px 18px;
  box-shadow:var(--shadow-lg); cursor:pointer; font-weight:700; color:var(--forest);
  display:none; align-items:center; gap:8px;
}
.sc16-wish-fab .sc16-wish-count{
  background:#e0435a; color:#fff; border-radius:50%; min-width:20px; height:20px; font-size:11px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 4px;
}
@media (max-width:640px){
  .sc16-wish-fab{ left:12px; bottom:12px; padding:10px 14px; font-size:13px; }
  .sc16-compare-bar{ flex-wrap:wrap; justify-content:center; text-align:center; }
}

/* ---- style block 14 ---- */
  .pw-stat-card, .pw-gallery-tile, .unit-card{ position:relative; overflow:hidden; }
  .pw-stat-card::after, .pw-gallery-tile::after, .unit-card::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:0;
    z-index:1;
    transition:opacity .35s ease;
    background:radial-gradient(240px circle at var(--pw-mx,50%) var(--pw-my,50%), rgba(201,150,47,0.20), transparent 65%);
  }
  .pw-stat-card:hover::after, .pw-gallery-tile:hover::after, .unit-card:hover::after{ opacity:1; }
  @media (prefers-reduced-motion: reduce){
    .pw-stat-card::after, .pw-gallery-tile::after, .unit-card::after{ display:none; }
  }

/* ---- style block 15 ---- */
  nav button[data-tab="admin"]{ display:none !important; }
  .pw-bottom-nav button[data-bn-tab="admin"]{ display:none !important; }
  body.sc-admin-tab-visible nav button[data-tab="admin"]{ display:inline-block !important; }
  body.sc-admin-tab-visible .pw-bottom-nav button[data-bn-tab="admin"]{ display:flex !important; }

/* ---- style block 16 ---- */
  .sc-avail-toolbar{
    max-width:1000px;margin:0 auto 20px;
    background:var(--cream-card);
    border:1px solid var(--sand);
    border-radius:var(--radius);
    box-shadow:var(--shadow-soft);
    padding:16px 18px;
  }
  .sc-avail-stats{
    display:flex;flex-wrap:wrap;gap:10px;
    margin-bottom:14px;
  }
  .sc-avail-stat{
    flex:1 1 110px;
    text-align:center;
    background:linear-gradient(160deg, rgba(31,138,95,0.08), rgba(201,150,47,0.06));
    border:1px solid var(--sand);
    border-radius:12px;
    padding:8px 6px 10px;
  }
  .sc-avail-stat b{
    display:block;font-family:var(--font-display);font-size:1.4rem;color:var(--forest);line-height:1.15;
  }
  .sc-avail-stat span{
    font-size:0.72rem;color:var(--muted);font-weight:600;letter-spacing:0.2px;text-transform:uppercase;
  }
  .sc-avail-controls{
    display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  }
  .sc-avail-controls .sc-avail-search-wrap{
    position:relative;flex:2 1 220px;
  }
  .sc-avail-controls .sc-avail-search-wrap i{
    position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:0.85rem;
  }
  .sc-avail-controls input[type="text"]{
    width:100%;padding:10px 12px 10px 32px;border-radius:30px;border:1px solid var(--sand);
    font-size:0.88rem;color:var(--ink);background:#fff;
  }
  .sc-avail-controls select{
    flex:1 1 150px;padding:10px 12px;border-radius:30px;border:1px solid var(--sand);
    font-size:0.85rem;color:var(--ink);background:#fff;cursor:pointer;
  }
  .sc-avail-controls input[type="text"]:focus,
  .sc-avail-controls select:focus{ outline:2px solid var(--gold);outline-offset:1px; }
  .sc-avail-clear{
    border:1px solid var(--sand);background:transparent;color:var(--forest);
    padding:9px 16px;border-radius:30px;font-size:0.82rem;font-weight:700;cursor:pointer;
  }
  .sc-avail-clear:hover{ background:var(--sand); }
  #scAvailEmpty{
    display:none;max-width:1000px;margin:0 auto 20px;text-align:center;
    padding:26px 18px;color:var(--muted);font-size:0.95rem;
    border:1px dashed var(--sand);border-radius:var(--radius);
  }
  @media (max-width:640px){
    .sc-avail-stat{ flex:1 1 42%; }
  }

/* ---- style block 17 ---- */
  /* ---- The sidebar itself: a rich forest-to-deep-forest gradient (same
     family as the header) instead of the pale cream glass panel ---- */
  nav{
    background:
      radial-gradient(520px 340px at 15% 0%, rgba(201,150,47,0.10), transparent 60%),
      linear-gradient(190deg, var(--forest-deep) 0%, var(--forest) 58%, #0c3d2c 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-right: none !important;
    box-shadow: 12px 0 34px rgba(0,0,0,0.28) !important;
  }
  nav::after{
    content:'';
    position:absolute; top:0; right:0; bottom:0; width:2px;
    background:linear-gradient(180deg, transparent, var(--gold) 15%, var(--gold-light) 50%, var(--gold) 85%, transparent);
    opacity:.85;
  }
  nav::-webkit-scrollbar-thumb{ background:rgba(224,182,90,.55) !important; }

  /* ---- Menu buttons: light text/icons on the dark panel, capsule shape ---- */
  nav button{
    color:rgba(255,255,255,0.88) !important;
    background:rgba(255,255,255,0.05) !important;
    border:1px solid rgba(255,255,255,0.09) !important;
    border-radius:999px !important;
    gap:12px !important;
    transition: background .28s ease, border-color .28s ease, color .28s ease,
                transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease !important;
  }
  nav button .pw-nav-ico{
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%;
    background:rgba(255,255,255,0.08);
    color:var(--gold-light);
    font-size:0.92rem !important;
    transition: background .28s ease, color .28s ease, transform .3s cubic-bezier(.34,1.56,.64,1) !important;
  }

  /* Hover: gentle gold tint + slide, no more green "lift" card look */
  nav button:hover:not(.active){
    background:rgba(224,182,90,0.12) !important;
    border-color:rgba(224,182,90,0.45) !important;
    color:#ffffff !important;
    transform:translateX(5px) !important;
    box-shadow:0 6px 16px rgba(0,0,0,0.25) !important;
  }
  nav button:hover:not(.active) .pw-nav-ico{
    background:rgba(224,182,90,0.22);
    transform:scale(1.1);
  }

  /* Active: a solid gold capsule with dark forest text — pops cleanly
     against the dark panel instead of the previous emerald-glow card */
  nav button.active{
    background:linear-gradient(120deg, var(--gold-light), var(--gold)) !important;
    border:1px solid var(--gold-light) !important;
    color:var(--forest-deep) !important;
    box-shadow:
      0 8px 20px -4px rgba(0,0,0,0.35),
      0 0 0 3px rgba(201,150,47,0.18) !important;
    transform:none !important;
  }
  nav button.active .pw-nav-ico,
  nav button.active .pw-nav-label{ color:var(--forest-deep) !important; }
  nav button.active .pw-nav-ico{ background:rgba(11,61,44,0.14); }
  /* the old growing left-edge accent bar is redundant now the whole pill
     fills gold, so it's neutralised for a cleaner capsule */
  nav button.active::before{ display:none !important; }
  .pw-nav-highlight{
    background:linear-gradient(120deg, rgba(224,182,90,.20), rgba(201,150,47,.10)) !important;
    box-shadow:0 0 20px 4px rgba(201,150,47,.25) !important;
  }

  /* ---- Collapse toggle: refine to a small gold coin that matches the
     rest of the palette (kept functionally identical) ---- */
  #pwSbCollapseBtn{
    background:linear-gradient(135deg,var(--gold-light),var(--gold)) !important;
    box-shadow:0 6px 16px rgba(0,0,0,.35), 0 0 0 3px rgba(11,61,44,0.55) !important;
  }

  /* ---- Mobile bottom nav: same dark palette, but the active tab now gets
     its own soft gold pill behind the icon+label instead of a plain color
     swap, so it visually matches the new sidebar language ---- */
  .pw-bottom-nav-inner{ gap:2px; }
  .pw-bottom-nav button{
    border-radius:14px; padding:6px 8px !important;
    transition: background .25s ease, color .25s ease, transform .2s ease;
  }
  .pw-bottom-nav button.pw-bn-active{
    background:rgba(224,182,90,0.16);
    color:var(--gold-light) !important;
    transform:translateY(-2px);
  }

/* ---- style block 18 ---- */
  /* ---------- Advanced filter bar ---------- */
  .sc23-bar{
    background:var(--cream-card);
    border:1px solid var(--sand);
    border-radius:var(--radius);
    box-shadow:var(--shadow-soft);
    padding:16px 18px;
    margin:14px 0 18px;
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    align-items:flex-end;
  }
  .sc23-field{ display:flex; flex-direction:column; gap:6px; }
  .sc23-field label{ font-size:0.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.4px; }
  .sc23-price-inputs{ display:flex; align-items:center; gap:6px; }
  .sc23-price-inputs input{
    width:88px; padding:8px 10px; border:1.5px solid var(--sand); border-radius:9px;
    font-size:0.85rem; font-weight:600; color:var(--ink);
  }
  .sc23-price-inputs input:focus{ border-color:var(--gold); }
  .sc23-price-presets{ display:flex; gap:6px; flex-wrap:wrap; }
  .sc23-preset-btn{
    border:1.5px solid var(--sand); background:var(--cream); color:var(--forest);
    padding:6px 12px; border-radius:20px; font-size:0.76rem; font-weight:700; cursor:pointer;
  }
  .sc23-preset-btn.active, .sc23-preset-btn:hover{ background:var(--forest); color:#fff; border-color:var(--forest); }
  .sc23-chips{ display:flex; gap:8px; flex-wrap:wrap; }
  .sc23-chip{
    border:1.5px solid var(--sand); background:var(--cream); color:var(--forest);
    padding:7px 14px; border-radius:20px; font-size:0.8rem; font-weight:700; cursor:pointer;
    transition:var(--transition);
  }
  .sc23-chip.active{
    background:linear-gradient(135deg, var(--gold), var(--gold-light));
    color:var(--forest-deep); border-color:var(--gold); box-shadow:0 4px 12px rgba(201,150,47,0.35);
  }
  .sc23-field select{
    padding:9px 12px; border:1.5px solid var(--sand); border-radius:9px; font-size:0.85rem; font-weight:600; color:var(--ink); background:#fff;
  }
  .sc23-view-toggle{ display:flex; border:1.5px solid var(--sand); border-radius:9px; overflow:hidden; }
  .sc23-view-toggle button{
    border:none; background:#fff; color:var(--forest); padding:9px 14px; font-size:0.8rem; font-weight:700; cursor:pointer;
  }
  .sc23-view-toggle button.active{ background:var(--forest); color:#fff; }
  .sc23-reset{
    margin-left:auto; border:1.5px solid var(--booked); background:transparent; color:var(--booked);
    padding:9px 16px; border-radius:9px; font-size:0.8rem; font-weight:700; cursor:pointer; height:fit-content;
  }
  .sc23-reset:hover{ background:var(--booked); color:#fff; }
  .sc23-result-count{ font-size:0.82rem; color:var(--muted); font-weight:600; margin:-6px 0 8px; }

  /* ---------- Quick-jump strip ---------- */
  .sc23-jump-wrap{
    position:sticky; top:66px; z-index:20;
    background:rgba(250,247,240,0.94); backdrop-filter:blur(8px);
    border:1px solid var(--sand); border-radius:14px;
    padding:10px 12px; margin-bottom:18px;
    display:flex; align-items:center; gap:10px;
  }
  .sc23-jump-label{ font-size:0.76rem; font-weight:800; color:var(--forest); white-space:nowrap; }
  .sc23-jump-track{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:thin; padding-bottom:2px; }
  .sc23-jump-track::-webkit-scrollbar{ height:5px; }
  .sc23-jump-track::-webkit-scrollbar-thumb{ background:var(--sand); border-radius:6px; }
  .sc23-jump-pill{
    flex:0 0 auto; border:1px solid var(--sand); background:#fff; color:var(--forest);
    padding:6px 13px; border-radius:20px; font-size:0.76rem; font-weight:700; cursor:pointer; white-space:nowrap;
  }
  .sc23-jump-pill:hover{ border-color:var(--gold); color:var(--gold); }
  .sc23-jump-pill.sc23-pulse{ animation:sc23JumpPulse .9s ease; }
  @keyframes sc23JumpPulse{
    0%{ box-shadow:0 0 0 0 rgba(201,150,47,0.55); }
    100%{ box-shadow:0 0 0 14px rgba(201,150,47,0); }
  }

  /* ---------- Occupancy ring on each card header ---------- */
  .sc23-ring{
    display:inline-flex; align-items:center; gap:8px; float:right;
    font-size:0.72rem; font-weight:800; color:var(--forest); vertical-align:middle;
  }
  .sc23-ring-dial{
    width:34px; height:34px; border-radius:50%; position:relative; flex:0 0 auto;
  }
  .sc23-ring-dial::after{
    content:''; position:absolute; inset:4px; background:var(--cream-card); border-radius:50%;
  }
  .sc23-ring-txt{ position:relative; z-index:1; }

  /* ---------- Compact view ---------- */
  #unitsGrid.sc23-compact{ gap:12px; }
  #unitsGrid.sc23-compact .unit-card{ padding:16px 18px; }
  #unitsGrid.sc23-compact .room-rows-wrap{ margin-top:8px; }
  #unitsGrid.sc23-compact .unit-card h3{ font-size:1.1rem; padding-bottom:8px; margin-bottom:10px; }

  /* ---------- Share + Notify buttons ---------- */
  .sc23-share-btn{
    border:1px solid var(--sand); background:#fff; color:var(--forest);
    padding:5px 12px; border-radius:20px; font-size:0.74rem; font-weight:700; cursor:pointer;
    display:inline-flex; align-items:center; gap:6px;
  }
  .sc23-share-btn:hover{ border-color:#25D366; color:#1a9e4f; }
  .sc23-notify-btn{
    margin-top:8px; width:100%; border:none; border-radius:9px; padding:9px 10px;
    background:linear-gradient(135deg, var(--teal), var(--emerald));
    color:#fff; font-size:0.8rem; font-weight:700; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .sc23-notify-btn:hover{ filter:brightness(1.08); }
  .sc23-notify-btn.sc23-done{ background:var(--muted); cursor:default; }

  /* ---------- Notify modal ---------- */
  .sc23-modal-overlay{
    position:fixed; inset:0; background:rgba(8,32,22,0.55); backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center; z-index:9999;
    opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .sc23-modal-overlay.show{ opacity:1; pointer-events:auto; }
  .sc23-modal{
    background:var(--cream-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-xl);
    padding:26px 24px; width:min(380px, 90vw); transform:translateY(14px); transition:transform .25s ease;
  }
  .sc23-modal-overlay.show .sc23-modal{ transform:translateY(0); }
  .sc23-modal h4{ margin:0 0 6px; color:var(--forest); font-size:1.1rem; }
  .sc23-modal p{ margin:0 0 16px; color:var(--muted); font-size:0.85rem; line-height:1.5; }
  .sc23-modal input{
    width:100%; padding:10px 12px; border:1.5px solid var(--sand); border-radius:9px;
    font-size:0.88rem; margin-bottom:12px; box-sizing:border-box;
  }
  .sc23-modal-actions{ display:flex; gap:10px; margin-top:6px; }
  .sc23-modal-actions button{ flex:1; border:none; border-radius:9px; padding:11px; font-weight:700; font-size:0.85rem; cursor:pointer; }
  .sc23-modal-send{ background:linear-gradient(135deg, var(--gold), var(--gold-light)); color:var(--forest-deep); }
  .sc23-modal-cancel{ background:var(--sand); color:var(--forest); }
  .sc23-modal-close{
    position:absolute; top:14px; right:16px; background:none; border:none; font-size:1.2rem;
    color:var(--muted); cursor:pointer;
  }
  .sc23-modal{ position:relative; }

  /* ---------- Admin notify-requests panel ---------- */
  .sc23-admin-notify-btn{
    display:none !important; align-items:center; gap:6px; margin-top:10px;
    background:var(--forest); color:#fff; border:none; border-radius:9px;
    padding:8px 14px; font-size:0.8rem; font-weight:700; cursor:pointer;
  }
  .sc23-admin-notify-btn.sc23-admin-visible{
    display:inline-flex !important;
  }
  .sc23-admin-panel{
    background:var(--cream-card); border:1px solid var(--sand); border-radius:var(--radius);
    box-shadow:var(--shadow-soft); padding:16px; margin-top:12px; max-height:340px; overflow:auto;
  }
  .sc23-admin-panel.sc23-hidden{
    display:none;
  }
  .sc23-admin-panel table{ width:100%; border-collapse:collapse; font-size:0.82rem; }
  .sc23-admin-panel th, .sc23-admin-panel td{ text-align:left; padding:7px 8px; border-bottom:1px solid var(--sand); }
  .sc23-admin-panel th{ color:var(--forest); }
  .sc23-admin-del{ border:none; background:var(--booked); color:#fff; border-radius:6px; padding:4px 9px; font-size:0.72rem; cursor:pointer; }

  @media (max-width:640px){
    .sc23-bar{ padding:14px; }
    .sc23-reset{ margin-left:0; width:100%; }
    .sc23-jump-wrap{ top:0; }
  }

/* ---- style block 19 ---- */
@media (max-width:880px){
  /* Never allow a stray wide element to force horizontal scroll on mobile */
  html, body{ max-width:100%; overflow-x:hidden; }
  img, video, iframe, svg{ max-width:100%; height:auto; }

  /* Comfortable tap targets (Apple/Google guidance ~44px) for buttons and
     nav-style links that might currently be smaller on small screens */
  button, .pw-bottom-nav button, nav button, .btn, a.btn,
  .sc-avail-toolbar button, .pw-gal-admin-thumb button{
    min-height:40px;
  }

  /* Prevent iOS Safari auto-zoom when focusing inputs/selects with a
     font-size below 16px — purely cosmetic, does not change layout */
  input, select, textarea{
    font-size:16px !important;
  }

  /* Any dynamically-built tables (compare table, admin bookings table,
     etc.) get a horizontal scroll wrapper instead of breaking layout */
  table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

  /* Keep floating/sticky panels comfortably inside the viewport */
  .pw-logo-wrap{ max-width:70vw; }
  .pw-logo-wrap img{ max-width:100%; height:auto; }

  /* Give room at the bottom of the page so content isn't hidden behind
     the fixed bottom nav bar on phones with a home-indicator */
  body{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
}

/* ---- style block 20 ---- */
  .sc15-float,
  #scrollTopBtn,
  #scToTop{
    display:none !important;
  }

/* ---- style block 21 ---- */
  /* ---- turn each room card into a flex column so its existing pieces
     can be visually re-ordered with `order`, without moving them in the
     DOM (so every script that appends to `.room-row` still works) ---- */
  #unitsGrid .room-row{
    display:flex !important;
    flex-direction:column;
  }
  #unitsGrid .room-row.pc-decorated::before{ content:none; } /* old "Room N" corner tag — replaced by the bed-count row */

  #unitsGrid .room-row > div:first-child{ order:2; }   /* existing room-type / room-number / status row */
  #unitsGrid .room-row > .stats-mini{ order:6; }
  #unitsGrid .room-row > .bed-layout{ order:7; }
  #unitsGrid .room-row > .pg-bed-panel{ order:7; margin-top:10px; }
  #unitsGrid .room-row > .pricing-box{ order:8; }
  #unitsGrid .room-row > .sc23-notify-btn{ order:10; align-self:flex-start; margin-top:6px; }

  /* ---- image / rating / verified header ---- */
  #unitsGrid .pc-head{
    order:1;
    position:relative;
    margin:-34px -18px 14px -18px;
    height:132px;
    border-radius:16px 16px 0 0;
    background:linear-gradient(135deg, var(--forest-deep) 0%, var(--forest) 45%, var(--emerald-soft) 100%);
    overflow:hidden;
  }
  #unitsGrid .pc-head-media{ position:absolute; inset:0; }
  #unitsGrid .pc-head-img{ width:100%; height:100%; object-fit:cover; display:block; }
  #unitsGrid .pc-head-icon{
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    font-size:2.6rem;
    color:rgba(255,255,255,0.92);
    filter:drop-shadow(0 4px 10px rgba(0,0,0,0.25));
  }
  #unitsGrid .pc-rating{
    position:absolute; top:10px; left:10px;
    background:rgba(255,255,255,0.96);
    color:var(--forest);
    font-weight:800;
    font-size:0.76rem;
    padding:4px 10px;
    border-radius:20px;
    box-shadow:0 3px 10px rgba(0,0,0,0.25);
  }
  #unitsGrid .pc-rating[onclick]{ cursor:pointer; }
  #unitsGrid .pc-verified{
    position:absolute; top:10px; right:10px;
    background:linear-gradient(135deg, var(--gold), var(--gold-light));
    color:var(--forest-deep);
    font-weight:800;
    font-size:0.7rem;
    padding:4px 10px;
    border-radius:20px;
    box-shadow:0 3px 10px rgba(0,0,0,0.3);
  }
  #unitsGrid .pc-verified.pc-verified-off{ background:rgba(255,255,255,0.3); color:#fff; }
  #unitsGrid .pc-verified[onclick]{ cursor:pointer; }
  #unitsGrid .pc-img-edit-btn{
    position:absolute; bottom:8px; right:8px;
    font-size:0.66rem; padding:4px 9px; border-radius:16px;
    border:none; cursor:pointer;
    background:rgba(0,0,0,0.45); color:#fff;
  }

  /* ---- title / location / distance ---- */
  #unitsGrid .pc-loc{ order:3; margin-bottom:2px; }
  #unitsGrid .pc-brand{ font-size:0.6rem; letter-spacing:1px; text-transform:uppercase; color:var(--gold); font-weight:700; display:block; }
  #unitsGrid .pc-unit-name{ margin:2px 0 4px; font-size:1.05rem; color:var(--forest); font-family:var(--font-display,inherit); }
  #unitsGrid .pc-loc-main{ font-size:0.82rem; color:var(--forest); font-weight:600; }
  #unitsGrid .pc-loc-main a{ color:var(--forest); text-decoration:underline; text-decoration-color:var(--gold); }
  #unitsGrid .pc-loc-sub{ font-size:0.74rem; color:var(--muted); margin-top:2px; }
  #unitsGrid .pc-edit-mini{ border:none; background:none; color:var(--gold); cursor:pointer; font-size:0.72rem; text-decoration:underline; padding:0; margin-left:4px; }

  /* ---- bed count / room type / room number ---- */
  #unitsGrid .pc-bedcount{ order:4; font-size:0.8rem; color:var(--forest); font-weight:600; margin-top:4px; }

  /* ---- amenity chips ---- */
  #unitsGrid .pc-amenities{ order:5; display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  #unitsGrid .pc-chip{
    background:rgba(31,138,95,0.10);
    color:var(--forest);
    border:1px solid rgba(31,138,95,0.28);
    font-size:0.7rem; font-weight:700;
    padding:4px 10px; border-radius:20px;
  }

  /* ---- interested-count chip (also powers the existing v23 "notify me" feature) ---- */
  #unitsGrid .pc-interest{
    order:9;
    margin-top:8px;
    background:rgba(201,150,47,0.12) !important;
    border:1px solid rgba(201,150,47,0.3);
    font-size:0.76rem;
  }
  #unitsGrid .enquiry-edit-btn{ border:none; background:none; cursor:pointer; margin-left:4px; }

  /* ---- Book Now + heart ---- */
  #unitsGrid .pc-actions{
    order:11;
    display:flex; align-items:center; gap:10px;
    margin-top:14px; padding-top:14px;
    border-top:1px dashed var(--sand);
  }
  #unitsGrid .pc-book-btn{
    flex:1;
    background:linear-gradient(135deg, var(--emerald), var(--emerald-soft));
    color:#fff; font-weight:800; letter-spacing:0.3px;
    border:none; border-radius:14px; padding:12px 14px; cursor:pointer;
    box-shadow:0 8px 18px -6px rgba(31,138,95,0.5);
    transition:transform .2s ease, box-shadow .2s ease;
    font-size:0.86rem;
  }
  #unitsGrid .pc-book-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 22px -6px rgba(31,138,95,0.6); }
  #unitsGrid .pc-book-btn:disabled{ background:#b0b6b2; cursor:not-allowed; box-shadow:none; transform:none; }
  #unitsGrid .pc-heart-btn{
    width:44px; height:44px; flex-shrink:0;
    border-radius:50%;
    border:1px solid var(--sand);
    background:#fff; font-size:1.1rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 3px 10px rgba(0,0,0,0.08);
    transition:transform .2s ease;
  }
  #unitsGrid .pc-heart-btn:hover{ transform:scale(1.12); }
  #unitsGrid .pc-heart-btn.active{ border-color:#e88; }

  /* ---- admin-only "show interested counts" toggle, next to the existing filter bar ---- */
  .pc-admin-only{ display:none; align-items:center; gap:6px; font-size:0.85rem; font-weight:600; color:var(--forest); }
  body.admin-mode .pc-admin-only{ display:inline-flex !important; }

  @media(max-width:480px){
    #unitsGrid .pc-head{ height:112px; }
  }

/* ---- style block 22 ---- */
  /* ---- exact 3 / 2 / 1 responsive grid ---- */
  #unitsGrid .room-rows-wrap{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
  @media (max-width:900px){
    #unitsGrid .room-rows-wrap{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
  }
  @media (max-width:600px){
    #unitsGrid .room-rows-wrap{ grid-template-columns:1fr !important; }
  }

  /* ---- left-aligned, consistent-width cards ---- */
  #unitsGrid .room-row{
    text-align:left;
    width:100%;
    max-width:none;
    box-sizing:border-box;
    padding:22px 20px 18px;
  }
  #unitsGrid .room-row .pc-loc,
  #unitsGrid .room-row .pc-bedcount,
  #unitsGrid .room-row .pc-amenities,
  #unitsGrid .room-row .stats-mini,
  #unitsGrid .room-row .pricing-box,
  #unitsGrid .room-row .pc-interest{
    text-align:left;
  }

  /* ---- pin Book Now / heart row to the bottom of every card ---- */
  #unitsGrid .room-row > .pc-actions{
    margin-top:auto !important;
  }

  /* ---- status badge: compact top-right pill, dot + label ---- */
  #unitsGrid .room-row .badge{
    padding:4px 12px;
    font-size:0.68rem;
    border-radius:20px;
  }
  #unitsGrid .room-row .badge::before{ content:"● "; }
  body:not(.admin-mode) #unitsGrid .room-row > div:first-child{
    position:absolute;
    top:14px; right:14px;
    z-index:5;
  }
  body:not(.admin-mode) #unitsGrid .room-row > div:first-child > b,
  body:not(.admin-mode) #unitsGrid .room-row > div:first-child > .room-number-label{
    display:none; /* room type + number are already shown clearly in the bed-count row below */
  }

  /* ---- "BED AVAILABILITY" section label (reuses the existing occupancy line) ---- */
  #unitsGrid .room-row > .stats-mini::before{
    content:"BED AVAILABILITY";
    display:block;
    font-size:0.66rem;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:4px;
  }

  /* ---- each bed becomes a small labeled card: "Bed N" / icon / AVAILABLE-OCCUPIED ---- */
  #unitsGrid .bed-layout{ counter-reset:bedNum; align-items:stretch; }
  #unitsGrid .room-row .bed{
    width:auto;
    height:auto;
    min-width:78px;
    flex-direction:column;
    gap:3px;
    padding:9px 8px 8px;
  }
  #unitsGrid .room-row .bed::before{
    counter-increment:bedNum;
    content:"Bed " counter(bedNum);
    order:-1;
    font-size:0.62rem;
    font-weight:800;
    letter-spacing:0.3px;
    color:var(--forest);
  }
  #unitsGrid .room-row .bed.free::after{
    content:"AVAILABLE";
    font-size:0.6rem;
    font-weight:800;
    letter-spacing:0.3px;
    color:#16a34a;
  }
  #unitsGrid .room-row .bed.occ::after{
    content:"OCCUPIED";
    font-size:0.6rem;
    font-weight:800;
    letter-spacing:0.3px;
    color:#dc2626;
    opacity:0.85;
  }

  /* ---- customer price summary ---- */
  #unitsGrid .pricing-box{ line-height:1.4; }
  #unitsGrid .price-main{ display:flex; flex-direction:column; margin-bottom:8px; }
  #unitsGrid .price-amount{ font-size:1.55rem; font-weight:800; color:var(--forest); }
  #unitsGrid .price-sub{ font-size:0.72rem; color:var(--muted); }
  #unitsGrid .price-divider{ border-top:1px dashed var(--sand); margin:6px 0 8px; }
  #unitsGrid .price-row{ display:flex; justify-content:space-between; font-size:0.82rem; padding:3px 0; }
  #unitsGrid .price-row.price-total{
    margin-top:6px;
    padding-top:8px;
    border-top:1px solid var(--sand);
    font-weight:800;
    color:var(--forest);
    font-size:0.9rem;
  }

  /* ---- admin "Edit Room" panel ---- */
  #unitsGrid .edit-room-title{ font-size:0.78rem; font-weight:800; color:var(--forest); margin-bottom:6px; letter-spacing:0.2px; }
  #unitsGrid .edit-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 0; }
  #unitsGrid .edit-row label{ font-size:0.76rem; color:var(--muted); }
  #unitsGrid .edit-row.edit-total{ margin-top:4px; padding-top:6px; border-top:1px dashed var(--sand); font-weight:800; color:var(--forest); }
  #unitsGrid .edit-checks{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; font-size:0.74rem; }

/* ---- style block 23 ---- */
  /* ---- shrink the header image band ---- */
  #unitsGrid .pc-head{ height:96px; margin:-22px -18px 10px -18px; }
  #unitsGrid .pc-head-icon{ font-size:2rem; }
  @media(max-width:480px){ #unitsGrid .pc-head{ height:90px; } }

  /* ---- tighter card padding ---- */
  #unitsGrid .room-row{ padding:16px 16px 14px; }

  /* ---- tighter gaps between every section (order 1–11 from v27/v28) ---- */
  #unitsGrid .pc-loc{ margin-bottom:0; }
  #unitsGrid .pc-loc-sub{ margin-top:1px; }
  #unitsGrid .pc-bedcount{ margin-top:6px; font-size:0.78rem; }
  #unitsGrid .pc-amenities{ margin-top:6px; gap:5px; }
  #unitsGrid .pc-chip{ padding:5px 9px; font-size:0.68rem; }
  #unitsGrid .room-row > .stats-mini{ margin:8px 0 4px; }
  #unitsGrid .room-row > .stats-mini::before{
    display:inline;
    margin-right:6px;
  }
  #unitsGrid .bed-layout{ padding:8px; margin:6px 0 8px; gap:6px; }
  #unitsGrid .pricing-box{ margin-top:0; padding:10px 12px; }
  #unitsGrid .pc-interest{ margin-top:6px; padding:5px 11px; font-size:0.72rem; }
  #unitsGrid .pc-actions{ margin-top:10px !important; padding-top:10px; gap:8px; }
  #unitsGrid .pc-book-btn{ padding:10px 12px; font-size:0.8rem; }
  #unitsGrid .pc-heart-btn{ width:42px; height:42px; }

  /* ---- beds: compact single-line pills instead of stacked cards ---- */
  #unitsGrid .room-row .bed{
    font-size:0; /* collapse the raw 🛏️ text node; the pseudo-elements below carry all visible text */
    display:inline-flex;
    flex-direction:row;
    align-items:center;
    gap:4px;
    width:auto;
    height:auto;
    min-width:0;
    padding:6px 10px;
    border-radius:16px;
  }
  #unitsGrid .room-row .bed::before{
    counter-increment:bedNum;
    content:"🛏️ Bed " counter(bedNum) " •";
    order:0;
    font-size:0.68rem;
    font-weight:800;
    color:var(--forest);
    letter-spacing:0;
  }
  #unitsGrid .room-row .bed.free::after{
    content:"AVAILABLE";
    font-size:0.62rem;
  }
  #unitsGrid .room-row .bed.occ::after{
    content:"OCCUPIED";
    font-size:0.62rem;
  }

  /* ---- compact 3-line price summary ---- */
  #unitsGrid .price-main{ margin-bottom:2px; }
  #unitsGrid .price-amount{ font-size:1.25rem; }
  #unitsGrid .price-sub{ font-size:0.7rem; }
  #unitsGrid .price-line{ font-size:0.78rem; color:var(--ink); padding:2px 0; }
  #unitsGrid .price-line.price-total{
    margin-top:2px;
    padding-top:6px;
    border-top:1px solid var(--sand);
    font-weight:800;
    color:var(--forest);
    font-size:0.84rem;
  }

/* ---- style block 24 ---- */
  /* ---- explicit 2-column room layout (no CSS column-balancing,
     so no possibility of leftover empty space) ---- */
  #unitsGrid .room-2col-wrap{
    display:flex;
    align-items:flex-start;
    gap:20px;
    margin-top:10px;
  }
  #unitsGrid .room-2col-col{
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  @media (max-width:600px){
    #unitsGrid .room-2col-wrap{ flex-direction:column; gap:18px; }
  }

  /* ---- compact premium unit-summary line (Rooms / Available /
     Soon / Occupied), sitting above the existing mini-badge strip ---- */
  #unitsGrid .unit-count-summary{
    font-size:0.8rem;
    font-weight:700;
    color:var(--forest);
    letter-spacing:0.2px;
    margin:2px 0 10px;
    display:flex;
    flex-wrap:wrap;
    gap:4px 10px;
  }
  #unitsGrid .unit-count-summary b{ color:var(--forest); font-weight:800; }
  #unitsGrid .unit-count-summary .ucs-avail{ color:#16a34a; }
  #unitsGrid .unit-count-summary .ucs-soon{ color:#f97316; }
  #unitsGrid .unit-count-summary .ucs-occ{ color:#dc2626; }

/* ---- style block 25 ---- */
  /* ---- give the Unit Availability tab more width (other tabs,
     which share the base `section{max-width:1000px}` rule, are
     completely unaffected) ---- */
  #availability{
    max-width:1300px;
  }

  /* ---- each room type stacks full width; the outer 3-column
     type-group grid from the earlier pass no longer applies.
     NOTE (fix): this must NOT be !important — the "Hide Rooms"
     toggle button sets this element's inline style.display to
     'none' when collapsed, and an !important rule in a stylesheet
     always beats a plain (non-!important) inline style. With
     !important here, the rooms-list never actually hid: the button
     label/arrow flipped to "View Rooms" but the room cards stayed
     visible underneath. Removing !important lets the inline style
     win again, while this rule still correctly wins over the older,
     now-removed 3-column grid rule it was originally added for. ---- */
  #unitsGrid .room-rows-wrap{
    display:block;
    width:100%;
  }
  #unitsGrid .room-type-group{
    display:block;
    width:100%;
  }

  /* ---- the ACTUAL two-column room grid: deterministic 50/50
     CSS Grid columns, always full width, never narrower than the
     section regardless of how many room types/rooms exist ---- */
  #unitsGrid .room-2col-wrap{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:20px;
    width:100%;
    align-items:stretch;
  }
  #unitsGrid .room-2col-col{
    display:flex;
    flex-direction:column;
    gap:18px;
    width:100%;
    min-width:0;
  }
  @media (max-width:600px){
    #unitsGrid .room-2col-wrap{ grid-template-columns:1fr !important; }
  }

  /* ---- room cards must always fill their column — never a fixed
     or narrow width, regardless of any earlier rule ---- */
  #unitsGrid .room-row{
    width:100% !important;
    max-width:none !important;
    min-width:0;
    box-sizing:border-box;
  }

/* ---- style block 26 ---- */
  #unitsGrid .room-2col-wrap.room-2col-single{
    display:block !important;
    width:100%;
  }

/* ---- style block 27 ---- */
  #unitsGrid .unit-typebars-strip{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:12px;
  }
  #unitsGrid .unit-typebars-strip .room-type-admin-bar{
    flex:1 1 150px;
    min-width:150px;
    margin:0 !important;
  }