/* ==========================================================================
   GoodDay — homepage components (WhatsApp booking mockup)
   Clean, well-structured phone chat. Warm navy + orange system.
   ========================================================================== */

.wa2 { position: relative; overflow: hidden; background: var(--bg-soft); }
.wa2::before { content:""; position:absolute; inset:0; background: var(--gradient-sky); opacity:.7; pointer-events:none; }
.wa2-inner { position: relative; display: grid; gap: clamp(32px, 5vw, 64px); grid-template-columns: 1fr 1fr; align-items: center; }
.wa2-copy .kicker { color: var(--orange); }
.wa2-copy h2 { margin-top: 12px; }
.wa2-copy .lead { margin-top: 18px; }
.wa2-copy .wa2-ml { margin-top: 14px; color: var(--navy-soft); font-family: var(--ff-ml); font-size: var(--text-lg); }
.wa2-actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.wa2-actions .note { font-size: .88rem; color: var(--muted); }

/* Phone */
.wa2-phone-col { display: flex; justify-content: center; }
.wa2-phone {
  position: relative; width: 100%; max-width: 288px;
  border: 11px solid var(--navy-deep); border-radius: 44px;
  background: var(--navy-deep); box-shadow: var(--shadow-elegant);
}
.wa2-screen { overflow: hidden; border-radius: 33px; background: oklch(0.96 0.015 150); }
.wa2-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: #fff;
  background: oklch(0.34 0.06 158); }
.wa2-back { opacity:.85; } .wa2-back svg { width: 18px; height: 18px; }
.wa2-av { flex:none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: oklch(1 0 0 / .18); font-size: .78rem; font-weight: 700; }
.wa2-peer b { display:block; font-size: .92rem; font-weight: 600; line-height: 1.2; white-space:nowrap; }
.wa2-peer small { font-size: .72rem; opacity: .75; }
.wa2-thread { list-style: none; margin: 0; padding: 16px 14px; display: grid; gap: 10px; }
.wa2-day { text-align: center; }
.wa2-day span { display:inline-block; background: oklch(1 0 0 / .85); color: var(--muted); font-size: .68rem; font-weight: 600;
  padding: 4px 12px; border-radius: 999px; box-shadow: 0 1px 2px oklch(0 0 0 / .06); }
.wa2-msg { display: flex; }
.wa2-msg.out { justify-content: flex-end; }
.wa2-bubble { max-width: 82%; padding: 9px 12px 7px; border-radius: 14px; font-size: .84rem; line-height: 1.42;
  color: var(--ink); box-shadow: 0 1px 1px oklch(0 0 0 / .07); position: relative; }
.wa2-msg.in  .wa2-bubble { background: #fff; border-top-left-radius: 4px; }
.wa2-msg.out .wa2-bubble { background: oklch(0.90 0.07 145); border-top-right-radius: 4px; }
.wa2-bubble b { font-weight: 600; }
.wa2-time { display: block; text-align: right; font-size: .62rem; color: var(--muted); margin-top: 3px; }
.wa2-time i { font-style: normal; color: oklch(0.55 0.12 240); margin-left: 3px; }
.wa2-doc { display: flex; align-items: center; gap: 10px; background: oklch(1 0 0 / .7); border-radius: 9px; padding: 8px 10px; margin-bottom: 6px; }
.wa2-doc .ic { flex:none; width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; background: var(--navy-deep); color: #fff; }
.wa2-doc .ic svg { width: 16px; height: 16px; }
.wa2-doc b { font-size: .76rem; font-weight: 600; display: block; }
.wa2-doc small { font-size: .64rem; color: var(--muted); }
.wa2-composer { display: flex; align-items: center; gap: 8px; padding: 10px 12px 14px; }
.wa2-composer .inp { flex: 1; background: #fff; border-radius: 999px; padding: 9px 14px; font-size: .8rem; color: var(--muted); box-shadow: 0 1px 2px oklch(0 0 0 / .05); }
.wa2-composer .send { flex:none; width: 36px; height: 36px; border-radius: 50%; background: var(--whatsapp); color: #fff; display: grid; place-items: center; }
.wa2-composer .send svg { width: 17px; height: 17px; }
.wa2-badge { position: absolute; right: -14px; bottom: -14px; width: 60px; height: 60px; border-radius: 18px;
  background: var(--gradient-accent); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-glow); animation: gd-float 6s ease-in-out infinite; }
.wa2-badge svg { width: 26px; height: 26px; }

@media (max-width: 900px) {
  .wa2-inner { grid-template-columns: 1fr; }
  .wa2-phone { max-width: 248px; }
}

/* Full-services strip */
.svc-more { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:22px auto 0; max-width:880px; }
.svc-more .tag { font-size:.86rem; padding:9px 16px; background: var(--surface); box-shadow: var(--shadow-card); }


/* Home packages grid ---------------------------------------------------- */
.pkg-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-top: clamp(28px,4vw,44px); }
.pkg-card { position:relative; min-height:340px; border-radius: var(--r-2xl); overflow:hidden; display:flex; align-items:flex-end;
  color:#fff; background: var(--navy) center/cover no-repeat; box-shadow: var(--shadow-card);
  transition: transform .3s var(--ease), box-shadow .3s; }
.pkg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elegant); }
.pkg-card::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, oklch(0.15 0.07 262 / .92), oklch(0.2 0.09 262 / .3) 52%, oklch(0.2 0.09 262 / .04)); }
.pkg-card .pc-body { position:relative; z-index:1; padding:22px; width:100%; }
.pkg-card .pc-meta { font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color: var(--orange-glow); }
.pkg-card h3 { color:#fff; font-size:1.5rem; font-weight:600; margin-top:6px; }
.pkg-card .pc-price { display:inline-block; margin-top:12px; font-weight:600; font-size:.88rem; padding:6px 13px; border-radius: var(--pill); background: oklch(1 0 0 / .16); }
.pkg-cta { background: var(--gradient-brand); }
.pkg-cta::after { background: linear-gradient(140deg, oklch(0.72 0.18 55 / .30), transparent 62%); }
.pkg-cta h3 { max-width: 14ch; }
@media (max-width:900px){ .pkg-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .pkg-grid { grid-template-columns:1fr; } .pkg-card { min-height:240px; } }


/* Full-width photo band (Kerala -> Gulf) -------------------------------- */
.photo-band { position:relative; padding: clamp(84px,13vw,150px) 0; overflow:hidden;
  background: #0c1526 url("../img/gulf-dusk.jpg") center/cover no-repeat; }
.photo-band::before { content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, oklch(0.16 0.07 262 / .48), oklch(0.14 0.06 262 / .72)); }
.photo-band-inner { position:relative; z-index:1; }
.photo-band .kicker { justify-content:center; }

/* WhatsApp booking — clean "quote reply" card --------------------------- */
.quote-card { width:100%; max-width:400px; margin-inline:auto; background:var(--surface);
  border-radius:var(--r-3xl); box-shadow:var(--shadow-elegant); overflow:hidden; border:1px solid var(--line-soft); }
.quote-head { display:flex; align-items:center; gap:12px; padding:16px 20px; background:oklch(0.34 0.06 158); color:#fff; }
.quote-av { flex:none; width:42px; height:42px; border-radius:50%; background:#fff; display:grid; place-items:center; }
.quote-av img { width:26px; height:26px; }
.quote-peer { flex:1; display:flex; flex-direction:column; line-height:1.25; }
.quote-peer b { font-weight:600; font-size:1rem; }
.quote-peer small { font-size:.76rem; opacity:.82; }
.quote-wa { width:22px; height:22px; opacity:.85; }
.quote-body { padding:26px 24px 28px; }
.quote-tag { display:inline-block; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange); background:oklch(0.72 0.18 55 / .10); padding:7px 13px; border-radius:var(--pill); }
.quote-list { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:14px; }
.quote-list li { display:flex; align-items:flex-start; gap:11px; font-size:1.05rem; color:var(--ink-2); line-height:1.45; }
.quote-list li::before { content:""; flex:none; width:20px; height:20px; margin-top:2px; border-radius:50%;
  background:var(--whatsapp) center/12px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.quote-list li b { color:var(--ink); font-weight:600; }
.quote-card .btn-block { margin-top:24px; }