/* =========================================================
   Contact page mobile-only styles (contact-mobile.css)
   Loaded ONLY by template/dafeult/contact.html
   Breakpoint: phones portrait (<=767px) + phones landscape
   ((<=1024px) and (<=500px height)) - same as m-lang entry.
   Desktop / tablet (768-1024 portrait) untouched.
   ========================================================= */

/* ---------------------------------------------------------
   Desktop & tablet restore block (Contact page only).
   The mobile redesign changed card markup (div -> <a> with
   info wrapper + arrow + WhatsApp card). These rules cancel
   that on >=768px (and non-landscape-short viewports) so the
   desktop/tablet rendering is identical to the pre-change
   3-card layout: Location -> Phone -> E-mail.
   --------------------------------------------------------- */
@media ((min-width:768px) and (min-height:501px)){

  /* anchor cards must look like the original plain divs */
  .contact-page .contact-list .contact-item{color:var(--fontcolortitle);text-decoration:none}
  .contact-page .contact-list .contact-item .contact-item-text{color:var(--fontcolortitle)}

  /* remove the mobile flex wrapper visually (original flow: icon / title / text) */
  .contact-page .contact-list .contact-item .contact-item-info{display:contents}

  /* the chevron arrow is mobile-only */
  .contact-page .contact-list .contact-item .contact-item-arrow{display:none}

  /* original desktop had 3 cards; WhatsApp card is mobile-only.
     DOM order is WhatsApp, Email, Phone, Location -> restore
     Location(1st), Phone(2nd), Email(3rd) via flex order. */
  .contact-page .contact-list .contact-item:nth-child(1){display:none}
  .contact-page .contact-list .contact-item:nth-child(2){order:3}
  .contact-page .contact-list .contact-item:nth-child(3){order:2}
  .contact-page .contact-list .contact-item:nth-child(4){order:1}
}

@media (max-width:767px), ((max-width:1024px) and (max-height:500px)){

  /* ---------- contact info cards : icon left / info middle / arrow right ---------- */
  .contact-page .contact-list{display:flex;flex-direction:column;gap:12px;align-items:stretch;justify-content:flex-start}

  .contact-page .contact-list .contact-item{display:flex;align-items:center;gap:12px;width:100%;margin:0;padding:14px 16px;box-sizing:border-box;background:#FFF;border:1px solid #ECEEF1;border-radius:10px;box-shadow:0 2px 6px rgba(19,20,21,.06);text-align:left;text-decoration:none;color:inherit;transition:box-shadow .15s linear}

  .contact-page .contact-list .contact-item:active{box-shadow:0 2px 10px rgba(19,20,21,.16)}

  .contact-page .contact-list .contact-item em{width:44px;height:44px;flex:0 0 44px;margin:0;background:var(--color);color:#FFF;font-size:20px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:none}

  .contact-page .contact-list .contact-item:hover em{font-size:20px}

  .contact-page .contact-list .contact-item em.icon-whatsapp{background:#25D366}

  .contact-page .contact-list .contact-item .contact-item-info{flex:1 1 auto;min-width:0}

  .contact-page .contact-list .contact-item .contact-item-title{font-size:15px;font-weight:700;line-height:1.3;margin:0 0 2px;color:var(--fontcolortitle)}

  .contact-page .contact-list .contact-item .contact-item-text{margin:0;font-size:14px;line-height:1.45;color:#5A6472;overflow-wrap:anywhere;word-break:break-word}

  .contact-page .contact-list .contact-item .contact-item-text a{color:inherit;margin:0;text-decoration:none}

  .contact-page .contact-list .contact-item .contact-item-arrow{flex:0 0 auto;width:18px;height:18px;color:#B6BDC7}

  /* ---------- inquiry form : single column ---------- */
  .contact-page .contact-box{margin-top:24px;box-shadow:0 2px 8px rgba(19,20,21,.08)}

  .contact-page .contact-box .contact-main{padding:18px 16px 20px}

  .contact-page .contact-box .contact-main .title{font-size:20px}

  .contact-page .contact-box .contact-main #feedbackForm .inquiry-form{display:block}

  .contact-page .contact-box .contact-main #feedbackForm .inquiry-form input,
  .contact-page .contact-box .contact-main #feedbackForm .inquiry-form textarea{width:100%;height:auto;box-sizing:border-box;margin:0 0 12px;padding:12px 14px;font-size:16px;line-height:1.4;border:1px solid #DDE2E8;border-radius:8px;background:#FFF;color:var(--fontcolortitle);box-shadow:none}

  .contact-page .contact-box .contact-main #feedbackForm .inquiry-form textarea{height:180px;min-height:120px;resize:vertical;font-family:inherit}

  .contact-page .contact-box .contact-main #feedbackForm .inquiry-form input:focus,
  .contact-page .contact-box .contact-main #feedbackForm .inquiry-form textarea:focus{outline:none;border-color:var(--color)}

  .contact-page .contact-box .contact-main #feedbackForm .send-btn{width:100%;height:auto;box-sizing:border-box;margin-top:4px;padding:13px 10px;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px}

  .contact-page .contact-box .contact-main #feedbackForm .send-btn .span{flex:0 0 auto}

  /* ---------- clearance for the fixed bottom bar ---------- */
  .contact-page.single-main{padding-bottom:96px}
}