/* 
CSS File Last Update : 29 April 2026
Project: bwhospitlity.com (BW Hospitality)
Website Designed & Coded by: Aditama (pandavamedia.net)
Main colors:
- Grey: #dbdee0; rgba(219,222,224, 1);
- Gold: #d0b157; rgba(208,177,87, 1);
- Black: #333333;
Left-right margin from screen 5%
Desktop max width: 94%; max: 1360px;
Mobile max width: 92%;
*/
/* ══ STICKY FILTER BAR ════════════════════════════════════════════ */
  .filter-bar{
    position:sticky;top:62px;z-index:90;
    background:var(--white);border-top:1px solid var(--pdv-box-line);
    border-bottom:1px solid var(--pdv-box-line);border-radius:5px;
    box-shadow:0 2px 16px rgba(0,0,0,.06);
  }
  .filter-bar-inner{
    max-width:1280px;margin:0 auto;
    display:flex;align-items:center;gap:.8rem;
    padding:.85rem 2.5rem;
    overflow-x:auto;
  }
  .filter-bar-inner::-webkit-scrollbar{height:0;}
  .filter-label{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap;flex-shrink:0;}
  .filter-sep{width:1px;height:20px;background:var(--pdv-box-line);flex-shrink:0;}
  .f-btn{
    font-size:.7em;letter-spacing:.12em;font-weight:var(--font-weight-medium);text-transform:uppercase;
    border:1px solid var(--pdv-box-line);background:none;cursor:pointer;
    padding:.45rem .95rem;color:var(--muted);white-space:nowrap;
    transition:all .2s;flex-shrink:0;
  }
  .f-btn:hover{border-color:var(--pdv-ink);color:var(--white);}
  .f-btn.active{background:var(--pdv-gold);border-color:var(--pdv-gold);color:var(--white);}

  /* View toggle */
  .view-toggle{margin-left:auto;display:flex;gap:.3rem;flex-shrink:0;}
  .view-btn{
    width:32px;height:32px;border:1px solid var(--pdv-box-line);background:none;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:all .2s;color:var(--muted);
  }
  .view-btn:hover{border-color:var(--pdv-gold);background:none;color:var(--pdv-gold);}
  .view-btn.active{background:var(--pdv-ink);border:0;color:var(--white);}
  .view-btn svg{width:15px;height:15px;}

  
  /* Compare banner */
  .compare-banner{
    display:none;
    background:var(--pdv-ink);padding:1rem 1.5rem;
    align-items:center;justify-content:space-between;
    margin-bottom:2rem;gap:1rem;
  }
  .compare-banner.visible{display:flex;}
  .compare-slots{display:flex;gap:.8rem;flex-wrap:wrap;}
  .compare-slot{
    font-size:.72rem;font-weight:500;color:rgba(255,255,255,.6);
    padding:.3rem .8rem;border:1px solid rgba(255,255,255,.15);
    display:flex;align-items:center;gap:.5rem;
  }
  .compare-slot .rm-slot{cursor:pointer;color:rgba(255,255,255,.35);font-size:.8rem;transition:color .15s;}
  .compare-slot .rm-slot:hover{color:var(--pdv-gold);}
  .compare-slot.filled{border-color:var(--pdv-gold);color:var(--white);}
  .compare-actions{display:flex;gap:.6rem;flex-shrink:0;}
  .compare-go{font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:var(--pdv-gold);color:var(--white);border:none;padding:.5rem 1.2rem;cursor:pointer;transition:background .2s;}
  .compare-go:hover{background:var(--pdv-gold);}
  .compare-clear{font-size:.62rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;background:none;color:rgba(255,255,255,.4);border:none;cursor:pointer;transition:color .2s;}
  .compare-clear:hover{color:var(--white);}

  /* ══ CARD GRID VIEW ══════════════════════════════════════════════ */
  #cardView{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;margin-top:1.8rem;}
  #cardView.cols-2{grid-template-columns:repeat(2,1fr);}

  .meeting-card{
    background:var(--white);
    border:1px solid #EEEEEE;border-radius:18px;overflow:hidden;
    transition:box-shadow .3s,transform .3s;
    position:relative;
  }
  .meeting-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.1);transform:translateY(-3px);}
  .meeting-card.compare-selected{box-shadow:0 0 0 1px var(--pdv-gold);}

  /* Card image */
  .rc-img{height:200px;overflow:hidden;position:relative;}
  .rc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
  .meeting-card:hover .rc-img img{transform:scale(1.04);}
  .rc-badge{
    position:absolute;top:.8rem;left:.8rem;
    font-size:.52rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
    background:var(--pdv-gold);color:var(--white);padding:.2rem .65rem;
  }
  .rc-floor{
    position:absolute;top:.8rem;right:.8rem;
    font-size:.52rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    background:rgba(14,13,11,.7);color:rgba(255,255,255,.8);
    padding:.2rem .6rem;backdrop-filter:blur(4px);
  }
  .rc-compare-btn{
    position:absolute;bottom:.8rem;right:.8rem;
    width:28px;height:28px;border-radius:50%;
    background:rgba(14,13,11,.6);border:1px solid rgba(255,255,255,.5);
    color:rgba(255,255,255,.6);font-size:.7rem;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all .2s;backdrop-filter:blur(4px);
  }
  .rc-compare-btn:hover{background:var(--pdv-gold);border-color:var(--pdv-gold);color:var(--white);}
  .meeting-card.compare-selected .rc-compare-btn{background:var(--pdv-gold);border-color:var(--pdv-gold);color:var(--white);font-weight:bold;}

  /* Card body */
  .rc-body{padding:1.4rem 1.4rem 0;}
  .rc-name{font-size:1.6em;font-weight:600;margin-bottom:.3rem;}
  .rc-location{font-size:.72rem;color:var(--muted);margin-bottom:.9rem;display:flex;justify-content:center;align-items:center;gap:.3rem;}
  .rc-location svg{width:11px;height:11px;color:var(--pdv-gold);}

  /* Dimension strip */
  .rc-dims{
    display:flex;gap:0;
    border-top:1px solid var(--pdv-box-line);border-bottom:1px solid var(--pdv-box-line);
    margin:0 -1.4rem;padding:0 1.4rem;
  }
  .rc-dim{
    flex:1;padding:.9rem 0 .4rem;text-align:center;
    border-right:1px solid var(--pdv-box-line);
  }
  .rc-dim:last-child{border-right:none;}
  .rc-dim-val{color:var(--pdv-ink);line-height:1em;}
  .rc-dim-key{font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}

  /* Capacity grid — the main visual differentiator */
  .rc-caps{padding:1rem 0 1rem;}
  .rc-caps-title{
    font-size:.7em;letter-spacing:.28em;text-transform:uppercase;
    color:var(--pdv-gold);margin-bottom:.8rem;
  }
  .cap-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:#F0F0F0;
    /*border:1px solid var(--pdv-box-line);*/
  }
  .cap-cell{
    background:var(--white);
    padding:.45rem .5rem;
    display:flex;flex-direction:column;align-items:center;
    gap:.3rem;
    transition:background .2s;
  }
  .cap-cell:hover{background:rgba(201,168,76,.04);}
  .cap-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;}
  .cap-icon svg{width:22px;height:22px;color:var(--pdv-gold);}
  .cap-num{font-size:.95rem;font-weight:600;color:var(--pdv-ink);line-height:1;}
  .cap-label{font-size:.48rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;}
  .cap-na{color:var(--pdv-box-line);font-size:.8rem;}

  /* Card footer */
  .rc-foot{
    /*display:flex;*/display:none;align-items:center;justify-content:space-between;
    padding:1rem 1.4rem;margin-top:.8rem;
    border-top:1px solid var(--pdv-box-line);
  }
  .rc-max{font-size:.72rem;color:var(--muted);}
  .rc-max strong{color:var(--pdv-ink);font-weight:600;}
  .rc-enquire{
    font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    background:var(--pdv-ink);color:var(--white);border:none;padding:.5rem 1rem;
    cursor:pointer;transition:background .2s;
  }
  .rc-enquire:hover{background:var(--pdv-gold);}

  /* ══ TABLE VIEW ══════════════════════════════════════════════════ */
  #tableView{display:none;overflow-x:auto;margin-top:1.8rem;}
  #tableView.visible{display:block;}
  .meeting-table{width:100%;border-collapse:collapse;background:var(--white);font-size:.9em;}
  .meeting-table th{
    background:var(--pdv-ink);color:rgba(255,255,255,1);
    font-size:.8em;font-weight:bold;letter-spacing:.1em;text-transform:uppercase;
    padding:.75rem 1rem;text-align:center;white-space:nowrap;
    border-right:1px solid rgba(255,255,255,.06);
  }
  .meeting-table th:first-child{text-align:left;min-width:180px;}
  .meeting-table th.th-gold{color:var(--pdv-gold-l);}
  .meeting-table td{
    padding:.75rem 1rem;border-bottom:1px solid var(--pdv-box-line);
    border-right:1px solid var(--pdv-box-line);text-align:center;
    transition:background .15s;
  }
  .meeting-table td:first-child{text-align:left;font-weight:500;}
  .meeting-table tr:hover td{background:rgba(201,168,76,.01);}
  .meeting-table tr:last-child td{border-bottom:none;}
  .meeting-table td:last-child {border-right:none;}
  .t-name{font-weight:600;color:var(--pdv-ink);display:block;margin-bottom:0;font-size:1.1em;}
  .t-loc{font-size:.65rem;color:var(--muted);}
  .t-cap{font-weight:600;color:var(--pdv-ink);}
  .t-na{color:var(--pdv-box-line);font-size:.7rem;}
  .t-dim{font-size:.8rem;color:var(--muted);}

  /* ══ COMPARE MODAL ═══════════════════════════════════════════════ */
  .compare-modal-overlay{
    position:fixed;inset:0;z-index:2000;
    background:rgba(0,0,0,.85);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity .3s;
    padding:2rem;
  }
  .compare-modal-overlay.open{opacity:1;pointer-events:auto;}
  .compare-modal{
    background:var(--white);max-width:1100px;width:100%;
    max-height:88vh;overflow-y:auto;
    position:relative;
  }
  .compare-modal-head{
    position:sticky;top:0;background:var(--pdv-ink);
    padding:1.2rem 1.5rem;display:flex;align-items:center;justify-content:space-between;z-index:1;
  }
  .compare-modal-head h3{font-size:1.4rem;color:var(--white);}
  .compare-modal-close{background:none;border:none;color:rgba(255,255,255,.5);font-size:1.2rem;cursor:pointer;transition:color .2s;}
  .compare-modal-close:hover{color:var(--white);}
  .compare-modal-body{padding:0;}
  .compare-table{width:100%;border-collapse:collapse;font-size:.82rem;}
  .compare-table th{background:var(--cream);padding:.9rem 1.2rem;font-size:.58rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--pdv-box-line);border-right:1px solid var(--pdv-box-line);}
  .compare-table th:first-child{min-width:140px;}
  .compare-table td{padding:.85rem 1.2rem;border-bottom:1px solid var(--pdv-box-line);border-right:1px solid var(--pdv-box-line);vertical-align:middle;}
  .compare-table td:first-child{font-size:.65rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:var(--cream);}
  .compare-table .highlight{font-weight:700;color:var(--pdv-ink);font-size:.95rem;}
  .compare-table .best{color:var(--pdv-gold-d);font-weight:700;}
  .cmp-room-name{font-size:1.1rem;font-weight:600;}
  .cmp-room-loc{font-size:.65rem;color:var(--muted);}

  /* ══ ENQUIRY STRIP ════════════════════════════════════════════════ */
  .enquiry-strip{background:var(--dark);padding:4rem 0;}
  .enquiry-inner{max-width:1280px;margin:0 auto;padding:0 2.5rem;display:grid;grid-template-columns:1fr auto;gap:4rem;align-items:center;}
  .enq-text h2{font-size:clamp(1.6rem,3vw,2.4rem);color:var(--white);font-style:italic;margin-bottom:.6rem;}
  .enq-text p{font-size:.85rem;color:rgba(255,255,255,.45);max-width:520px;line-height:1.7;}
  .enq-actions{display:flex;flex-direction:column;gap:.7rem;align-items:flex-end;}
  .enq-btn{font-size:.65rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;background:var(--pdv-gold);color:var(--white);border:none;padding:.85rem 2rem;cursor:pointer;transition:background .2s;white-space:nowrap;}
  .enq-btn:hover{background:var(--pdv-gold-d);}
  .enq-btn-ghost{font-size:.65rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;background:none;color:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.15);padding:.75rem 2rem;cursor:pointer;transition:all .2s;white-space:nowrap;}
  .enq-btn-ghost:hover{border-color:var(--pdv-gold);color:var(--pdv-gold);}

  /* ══ RESPONSIVE ═══════════════════════════════════════════════════ */
  @media(max-width:1024px){#cardView{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:768px){
      .hero-stats{gap:1.5rem;}
      #cardView{grid-template-columns:1fr;}
      .page-body{padding:2rem 1.5rem 4rem;}
      .filter-bar-inner{padding:.75rem 1.5rem;}
      .enquiry-inner{grid-template-columns:1fr;gap:2rem;}
      .enq-actions{align-items:flex-start;}
    }