/* ==========================================================
   WISSAM SHARED CONTACT POPUP STYLES
   Used by index.html and about.html (and any future page)
   that includes the static #contactSheet markup.

   To use on a new page:
   1. Link this file: <link rel="stylesheet" href="assets/components/contact-popup.css">
   2. Copy the #contactSheet markup (see contact-popup-snippet.html)
      into the page, right before </body>.
   3. Load the shared behavior script:
      <script src="assets/components/contact-popup.js"></script>
   4. Add class="js-open-contact" to any button/link that should
      open the popup (works on <a> and <button> alike).
   ========================================================== */

:root {
  --sheet-bg: #ffffff;
  --sheet-label: #1f2a44;
  --sheet-border: #cbd5e1;
  --sheet-placeholder: #64748b;
  --sheet-button: #fbbf24;
  --sheet-button-hover: #f8b81f;
  --sheet-button-text: #111827;
}

body.lock {
  overflow: hidden;
}

/* ==========================================================
     CONTACT SHEET (bottom sheet on mobile, centered modal >=900px)
     ========================================================== */
  .contact-sheet {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 250ms ease;
    z-index: 100;
  }
.contact-sheet.is-open { opacity: 1; pointer-events: auto; }
.contact-form {
    width: 100%;
    max-width: 560px;
    background: var(--sheet-bg);
    border-radius: 20px 20px 0 0;
    padding: 14px 22px 28px;
    transform: translateY(100%);
    transition: transform 320ms cubic-bezier(.2,.7,.3,1);
  }
.contact-sheet.is-open .contact-form { transform: translateY(0); }
.sheet-drag-handle {
    width: 42px; height: 4px; border-radius: 3px;
    background: var(--sheet-border);
    margin: 6px auto 18px;
  }
.honeypot-field { position: absolute; left: -9999px; }
.field-group { display: flex; flex-direction: column; gap: 6px; }
.label {
    font-family: var(--font-body);
    font-size: 12px; font-weight: 600;
    color: var(--sheet-label);
  }
.input, textarea.input {
    font-family: var(--font-body);
    font-size: 15px;
    padding: 12px 14px;
    border: 1px solid var(--sheet-border);
    border-radius: 10px;
    color: #111827;
    background: #fff;
  }
.input::placeholder { color: var(--sheet-placeholder); }
.input:focus, textarea.input:focus { outline: 2px solid var(--sheet-button); outline-offset: 1px; }
.submit-button {
    margin-top: 4px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    color: var(--sheet-button-text);
    background: var(--sheet-button);
    border: none;
    border-radius: 999px;
    padding: 15px;
    cursor: pointer;
    transition: background 180ms ease;
  }
.submit-button:hover { background: var(--sheet-button-hover); }
/* CONTACT FORM PHONE + MESSAGE BUTTON FIX */
  .phone-field input {
    direction: ltr;
  }
/* FINAL CONTACT FORM + MESSAGE ICON DESIGN FIX */
  .contact-form .phone-field,
  .contact-sheet .phone-field,
  .contact-modal .phone-field,
  .contact-popup .phone-field,
  .phone-field {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
  }
.contact-form .phone-field label,
  .contact-sheet .phone-field label,
  .contact-modal .phone-field label,
  .contact-popup .phone-field label,
  .phone-field label {
    display: block !important;
    color: #10131a !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }
.contact-form .phone-field input,
  .contact-sheet .phone-field input,
  .contact-modal .phone-field input,
  .contact-popup .phone-field input,
  .phone-field input {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    outline: none !important;
    background: #fff !important;
    color: #0f172a !important;
    font: inherit !important;
    font-size: 16px !important;
    line-height: 1 !important;
    direction: ltr !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }
.contact-form .phone-field input:focus,
  .contact-sheet .phone-field input:focus,
  .contact-modal .phone-field input:focus,
  .contact-popup .phone-field input:focus,
  .phone-field input:focus {
    border-color: var(--yellow) !important;
    box-shadow: 0 0 0 2px rgba(244, 192, 38, 0.18) !important;
  }
/* Phone field font/style exactly like the other contact inputs */
  .phone-field input,
  input[name="phone"],
  #phone {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    outline: none !important;
    background: #fff !important;
    color: #0f172a !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    direction: ltr !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }
.phone-field input::placeholder,
  input[name="phone"]::placeholder,
  #phone::placeholder {
    color: #64748b !important;
    font: inherit !important;
    opacity: 1 !important;
  }
.phone-field label {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
  }
/* FINAL PHONE FIELD MATCH — same label/input spacing and font as rest */
  .phone-field {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
  }.phone-field label {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #0f172a !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
  }
.phone-field input,
  input#phone,
  input[name="phone"] {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    background: #fff !important;
    color: #0f172a !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 48px !important;
    letter-spacing: 0 !important;
    direction: ltr !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }
.phone-field input:focus,
  input#phone:focus,
  input[name="phone"]:focus {
    border-color: var(--yellow) !important;
    box-shadow: 0 0 0 2px rgba(244, 192, 38, 0.18) !important;
  }
/* FINAL REAL PHONE FIELD FIX — exact same structure, spacing, and font */
  .contact-form .form-field,
  .contact-sheet .form-field,
  .contact-modal .form-field,
  .contact-popup .form-field {
    display: grid !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
  }
.contact-form .form-field label,
  .contact-sheet .form-field label,
  .contact-modal .form-field label,
  .contact-popup .form-field label {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #111827 !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
  }
.contact-form .form-field input,
  .contact-sheet .form-field input,
  .contact-modal .form-field input,
  .contact-popup .form-field input,
  .contact-form .form-field textarea,
  .contact-sheet .form-field textarea,
  .contact-modal .form-field textarea,
  .contact-popup .form-field textarea {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 10px !important;
    border: 1px solid #cbd5e1 !important;
    background: #fff !important;
    color: #0f172a !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }
.contact-form .form-field input,
  .contact-sheet .form-field input,
  .contact-modal .form-field input,
  .contact-popup .form-field input {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    line-height: 48px !important;
  }
.contact-form .form-field textarea,
  .contact-sheet .form-field textarea,
  .contact-modal .form-field textarea,
  .contact-popup .form-field textarea {
    min-height: 102px !important;
    padding: 14px 16px !important;
    line-height: 1.4 !important;
  }
.contact-form .form-field input:focus,
  .contact-sheet .form-field input:focus,
  .contact-modal .form-field input:focus,
  .contact-popup .form-field input:focus,
  .contact-form .form-field textarea:focus,
  .contact-sheet .form-field textarea:focus,
  .contact-modal .form-field textarea:focus,
  .contact-popup .form-field textarea:focus {
    border-color: var(--yellow) !important;
    box-shadow: 0 0 0 2px rgba(244, 192, 38, 0.18) !important;
  }
.phone-field,
  .phone-field label,
  .phone-field input,
  input#phone,
  input[name="phone"] {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
  }
.phone-field {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }
input#phone,
  input[name="phone"] {
    direction: ltr !important;
    text-align: left !important;
    font-size: 16px !important;
    font-weight: 400 !important;
  }
/* FINAL OVERRIDE — make phone field identical to other contact fields */
  #phone,
  input[name="phone"] {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 8px 0 16px 0 !important;
    padding: 0 16px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #0f172a !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    text-align: left !important;
    direction: ltr !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }
#phone:focus,
  input[name="phone"]:focus {
    border-color: var(--yellow) !important;
    box-shadow: 0 0 0 2px rgba(244, 192, 38, 0.18) !important;
  }
/* Phone input exactly like Full Name / Email */
  #phone,
  input[name="phone"] {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 0 16px 0 !important;
    padding: 0 16px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #64748b !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 48px !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    direction: ltr !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }
#phone:focus,
  input[name="phone"]:focus {
    color: #0f172a !important;
    border-color: var(--yellow) !important;
    box-shadow: 0 0 0 2px rgba(244, 192, 38, 0.18) !important;
  }

@media (min-width: 900px) {
  .contact-sheet { align-items: center; padding: 24px; }
  .contact-form {
      max-width: 480px;
      border-radius: 18px;
      padding: 32px 36px 36px;
      transform: translateY(16px) scale(0.98);
      opacity: 0;
      transition: transform 300ms ease, opacity 250ms ease;
    }
  .contact-sheet.is-open .contact-form { transform: translateY(0) scale(1); opacity: 1; }
  .sheet-drag-handle { display: none; }
}

@media (max-width: 700px) {
  .contact-form .phone-field input,
    .contact-sheet .phone-field input,
    .contact-modal .phone-field input,
    .contact-popup .phone-field input,
    .phone-field input {
      min-height: 44px !important;
      height: 44px !important;
      border-radius: 9px !important;
      font-size: 15px !important;
    }
  .phone-field input,
    input[name="phone"],
    #phone {
      min-height: 44px !important;
      height: 44px !important;
      border-radius: 9px !important;
      font-size: 15px !important;
      font-weight: 400 !important;
      font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif !important;
    }
  .phone-field {
      gap: 8px !important;
    }.phone-field label {
      font-size: 13px !important;
      font-weight: 700 !important;
      line-height: 1.15 !important;
    }
  .phone-field input,
    input#phone,
    input[name="phone"] {
      height: 44px !important;
      min-height: 44px !important;
      line-height: 44px !important;
      border-radius: 9px !important;
      font-size: 15px !important;
      font-weight: 400 !important;
      padding: 0 14px !important;
    }
  .contact-form .form-field,
    .contact-sheet .form-field,
    .contact-modal .form-field,
    .contact-popup .form-field {
      gap: 8px !important;
      margin-bottom: 15px !important;
    }
  .contact-form .form-field input,
    .contact-sheet .form-field input,
    .contact-modal .form-field input,
    .contact-popup .form-field input,
    input#phone,
    input[name="phone"] {
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 14px !important;
      line-height: 44px !important;
      border-radius: 9px !important;
      font-size: 15px !important;
      font-weight: 400 !important;
    }.contact-form .form-field label,
  .contact-sheet .form-field label,
  .contact-modal .form-field label,
  .contact-popup .form-field label {
      font-size: 13px !important;
      font-weight: 700 !important;
      line-height: 1.15 !important;
    }
  #phone,
    input[name="phone"] {
      height: 44px !important;
      min-height: 44px !important;
      margin: 8px 0 15px 0 !important;
      padding: 0 14px !important;
      border-radius: 9px !important;
      font-family: inherit !important;
      font-size: 15px !important;
      font-weight: 400 !important;
    }
  #phone,
    input[name="phone"] {
      height: 44px !important;
      min-height: 44px !important;
      margin-bottom: 15px !important;
      padding: 0 14px !important;
      border-radius: 9px !important;
      font-size: 15px !important;
      line-height: 44px !important;
    }
}