/* =====================================================================
   360 HOTEL SOLUTIONS — contact-us.css
   Page-specific styles for the Contact Us page.
   Reuses the global theme (tokens, header, footer, .eyebrow,
   .btn-primary, .label-tag). Responsive rules at the bottom.
   ===================================================================== */

/* ===== HERO ===== */
.contact-hero{position:relative;overflow:hidden;background:var(--white);padding:clamp(48px,8vw,84px) 0 0;text-align:center;}
.contact-hero .wrap{position:relative;z-index:1;max-width:740px;}
.contact-hero .eyebrow{margin-bottom:22px;}
.contact-hero h1{font-size:clamp(32px,4.6vw,52px);line-height:1.08;letter-spacing:-0.025em;margin-bottom:18px;}
.contact-hero p{font-size:clamp(16px,1.6vw,18.5px);color:var(--muted);max-width:560px;margin:0 auto;}
.contact-hero .contact-intl-note{font-size:14px;color:var(--muted-light,var(--muted));max-width:560px;margin:14px auto 0;}

/* ===== MAIN — form + info ===== */
.contact-main{padding:52px 0 90px;background:var(--white);}
.contact-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(28px,4vw,48px);align-items:start;}

/* form */
.contact-form{background:#fff;border:1px solid var(--gray);border-radius:22px;padding:clamp(24px,3vw,38px);box-shadow:0 30px 70px -34px rgba(2,15,77,0.22);}
.contact-form h2{font-size:21px;margin-bottom:6px;}
.contact-form .cf-intro{font-size:13.5px;color:var(--muted);margin-bottom:22px;}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.cf-field{margin-bottom:16px;}
.cf-field label{display:block;font-size:12.5px;font-weight:700;color:var(--navy);margin-bottom:7px;}
.cf-field label .req{color:var(--blue);}
.cf-field input,.cf-field textarea{width:100%;border:1.5px solid var(--gray);border-radius:11px;padding:12px 14px;font-size:14px;font-family:inherit;color:var(--navy);background:var(--bg);transition:border-color .15s,background .15s;}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:var(--muted-light);}
.cf-field input:focus,.cf-field textarea:focus{outline:none;border-color:var(--blue);background:#fff;}
.cf-field textarea{min-height:120px;resize:vertical;line-height:1.5;}
.cf-field.error input,.cf-field.error textarea{border-color:#dc2626;background:#fff;box-shadow:0 0 0 3px rgba(220,38,38,0.08);}
.cf-field.error input:focus,.cf-field.error textarea:focus{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,0.12);}
.cf-error{display:block;margin-top:6px;font-size:11.5px;font-weight:600;line-height:1.35;color:#dc2626;}
.cf-error:empty{display:none;}
.contact-form .btn-primary{width:100%;margin-top:4px;cursor:pointer;}
.cf-note{display:flex;align-items:center;gap:8px;justify-content:center;font-size:12px;color:var(--muted);margin-top:14px;}
.cf-note svg{width:14px;height:14px;color:#25D366;flex-shrink:0;}

/* info side */
.contact-info{display:flex;flex-direction:column;gap:14px;}
.ci-card{background:#fff;border:1px solid var(--gray);border-radius:16px;padding:20px;display:flex;gap:15px;align-items:flex-start;transition:transform .2s,box-shadow .2s;}
.ci-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -20px rgba(2,15,77,0.16);}
.ci-ico{width:46px;height:46px;border-radius:12px;background:rgba(14,99,255,0.1);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ci-ico svg{width:22px;height:22px;}
.ci-card.wa .ci-ico{background:rgba(37,211,102,0.12);color:#25D366;}
.ci-card.mail .ci-ico{background:rgba(123,46,255,0.1);color:var(--purple);}
.ci-label{font-size:11px;font-weight:700;color:var(--muted-light);text-transform:uppercase;letter-spacing:.04em;}
.ci-value{font-size:15px;font-weight:700;color:var(--navy);margin-top:5px;line-height:1.5;}
.ci-value a{color:var(--navy);}
.ci-value a:hover{color:var(--blue);}
.ci-sub{font-size:12.5px;color:var(--muted);margin-top:3px;font-weight:500;}
.ci-wa-btn{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#fff;font-size:13px;font-weight:700;padding:10px 18px;border-radius:100px;margin-top:10px;}
.ci-wa-btn svg{width:16px;height:16px;}

/* ===== MAP ===== */
.contact-map{margin-top:36px;border-radius:22px;overflow:hidden;border:1px solid var(--gray);box-shadow:0 30px 64px -32px rgba(2,15,77,0.25);height:clamp(300px,40vw,430px);}
.contact-map iframe{width:100%;height:100%;border:0;display:block;}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:920px){
  .contact-main{padding:40px 0 64px;}
  .contact-grid{grid-template-columns:1fr;gap:24px;}
}

@media(max-width:540px){
  .cf-row{grid-template-columns:1fr;gap:0;}
}