/* =====================================================================
   360 HOTEL SOLUTIONS — whatsapp-ai-concierge.css
   Page-specific styles for the WhatsApp Booking Chatbot solution page.
   Reuses the global theme (tokens, header, footer, the WhatsApp phone
   classes .phone-shell/.wa-*, .flow-step, .why, .results, .final-cta).
   Responsive rules live at the bottom of this file.
   ===================================================================== */

/* ===== GENERIC SUB-PAGE SECTION ===== */
.wac-section{padding:90px 0;background:var(--white);}
.wac-section.tint-cyan{background:var(--tint-cyan);}
.wac-section.tint-purple{background:var(--tint-purple);}

/* ===== HERO ===== */
.wac-hero .hero-sub{max-width:500px;}
/* feature pills as a 2x2 grid on desktop (mobile.css already makes them 2x2) */
.wac-hero .hero-pills{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:440px;}

.wac-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:540px;padding:0 44px;}

/* render the chat statically (no JS) — the global .wa-* classes start
   hidden because the home page animates them in; force them visible here */
.wac-phone .wa-msg,
.wac-phone .wa-system,
.wac-phone .wa-qr,
.wac-phone .wa-qr-btn,
.wac-phone .wa-room{opacity:1 !important;transform:none !important;animation:none !important;}
.wac-phone .wa-body{justify-content:flex-start;}

/* floating stat badges over the phone — reuse global float-in keyframe */
.wac-badge{position:absolute;z-index:3;background:#fff;border-radius:14px;padding:10px 14px;box-shadow:0 16px 36px -12px rgba(2,15,77,0.26);display:flex;align-items:center;gap:9px;white-space:nowrap;opacity:0;animation:float-in .6s ease forwards;}
.wac-badge .i{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wac-badge .i svg{width:15px;height:15px;}
.wac-badge .num{font-size:15px;font-weight:800;line-height:1;}
.wac-badge .lbl{font-size:10px;color:var(--muted);font-weight:600;margin-top:2px;}
.wac-badge.b1{top:13%;left:0;animation-delay:.5s;} .wac-badge.b1 .i{background:rgba(37,211,102,0.12);color:#25D366;}
.wac-badge.b2{bottom:15%;right:0;animation-delay:.9s;} .wac-badge.b2 .i{background:rgba(14,99,255,0.1);color:var(--blue);}

/* ===== FEATURE GRID (reuses .flow-step card styling) ===== */
.wac-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

/* ===== BENEFITS — for you / for your guests ===== */
.wac-benefits{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.wac-bcard{background:#fff;border:1px solid var(--gray);border-radius:20px;padding:30px 28px;}
.wac-bcard-head{display:flex;align-items:center;gap:13px;margin-bottom:20px;}
.wac-bcard-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wac-bcard-icon svg{width:23px;height:23px;}
.wac-bcard.you .wac-bcard-icon{background:rgba(14,99,255,0.1);color:var(--blue);}
.wac-bcard.guest .wac-bcard-icon{background:rgba(37,211,102,0.12);color:#16a34a;}
.wac-bcard h3{font-size:19px;line-height:1.2;}
.wac-bcard .sub{font-size:12.5px;color:var(--muted);margin-top:3px;}
.wac-blist{display:flex;flex-direction:column;gap:14px;}
.wac-blist li{display:flex;align-items:flex-start;gap:11px;font-size:14px;color:var(--navy);font-weight:500;line-height:1.45;}
.wac-blist .ck{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.wac-blist .ck svg{width:12px;height:12px;color:#fff;}
.wac-bcard.you .wac-blist .ck{background:var(--grad);}
.wac-bcard.guest .wac-blist .ck{background:#25D366;}

/* ===== COMMISSION SAVINGS — OTA vs WhatsApp direct ===== */
.wac-savings-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:820px;margin:0 auto;}
.sv-card{border:1px solid var(--gray);border-radius:18px;padding:24px;background:#fff;}
.sv-card.direct{border-color:rgba(22,163,74,0.35);background:var(--tint-green);}
.sv-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;}
.sv-label{font-size:13px;font-weight:700;color:var(--navy);}
.sv-tag{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:6px;white-space:nowrap;}
.sv-card.ota .sv-tag{background:rgba(239,68,68,0.12);color:#dc2626;}
.sv-card.direct .sv-tag{background:rgba(22,163,74,0.14);color:#16a34a;}
.sv-bar{height:34px;border-radius:9px;background:var(--gray);overflow:hidden;}
.sv-card.direct .sv-bar{background:rgba(22,163,74,0.12);}
.sv-bar-fill{height:100%;display:flex;align-items:center;padding-left:12px;font-size:12.5px;font-weight:800;color:#fff;border-radius:9px;white-space:nowrap;}
.sv-card.ota .sv-bar-fill{width:78%;background:linear-gradient(90deg,#dc2626,#f87171);}
.sv-card.direct .sv-bar-fill{width:100%;background:var(--grad);}
.sv-sub{font-size:11.5px;color:var(--muted);margin-top:9px;}
.sv-highlight{max-width:820px;margin:24px auto 0;background:var(--navy);color:#fff;border-radius:16px;padding:20px 26px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:16px;font-weight:600;line-height:1.5;}
.sv-highlight b{color:var(--cyan);font-weight:800;}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:920px){
  .wac-section{padding:56px 0;}
  .wac-visual{min-height:auto;padding:14px 0 0;}
  .wac-feature-grid{grid-template-columns:1fr 1fr;}
  .wac-benefits{grid-template-columns:1fr;gap:16px;}
  .wac-badge.b1{left:-4px;} .wac-badge.b2{right:-4px;}
}

@media(max-width:640px){
  .wac-feature-grid{grid-template-columns:1fr;}
  .wac-badge{display:none;}
}

@media(max-width:560px){
  .wac-savings-grid{grid-template-columns:1fr;}
  .sv-highlight{font-size:14.5px;}
}