/* ==========================================================
   HUNZA & LUXR CONTACT FORM — WIDER, READABLE, SQUARE
   ========================================================== */

.cf-wrapper {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    max-width: 960px !important;               /* wider form */
    margin: 0 auto !important;
    padding: 0 clamp(20px, 4vw, 64px) !important;
    color: #111 !important;
    box-sizing: border-box !important;
}

.cf-header {
    display: none !important;
}

.cf-group {
    margin-bottom: 1.5rem !important;
}

/* Two-column rows for name/email and region/country */
.cf-row-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}
.cf-row-2 .cf-group {
    margin-bottom: 0 !important;
}
@media (max-width: 600px) {
    .cf-row-2 {
        grid-template-columns: 1fr !important;
    }
}

/* Labels — larger & higher contrast */
.cf-form label {
    display: block !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: #333 !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.2 !important;
}

/* Inputs, selects, textareas */
.cf-form input[type="text"],
.cf-form input[type="email"],
.cf-form select,
.cf-form textarea {
    display: block !important;
    width: 100% !important;
    /* Without this the 18px padding and 1.5px border are ADDED to the 100%
       width and every field overflows its column. It only looked right
       because Flatsome happens to set a global border-box reset — this
       stylesheet should not depend on that. */
    box-sizing: border-box !important;
    padding: 16px 18px !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #111 !important;
    background-color: #fff !important;
    border: 1.5px solid #ccc !important;
    border-radius: 2px !important;             /* almost square */
    outline: none !important;
    box-shadow: none !important;
    line-height: 1.5 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.cf-form input[type="text"],
.cf-form input[type="email"] {
    min-height: 56px !important;
}

.cf-form select {
    min-height: 56px !important;
    padding-right: 48px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 16px !important;
    cursor: pointer !important;
}

.cf-form textarea {
    min-height: 200px !important;
    line-height: 1.6 !important;
    resize: vertical !important;
}

/* Hover & focus states */
.cf-form input[type="text"]:hover,
.cf-form input[type="email"]:hover,
.cf-form select:hover,
.cf-form textarea:hover {
    border-color: #999 !important;
}

.cf-form input[type="text"]:focus,
.cf-form input[type="email"]:focus,
.cf-form select:focus,
.cf-form textarea:focus {
    border-color: #d4622a !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(212,98,42,.12) !important;
    outline: none !important;
}

/* ==========================================================
   HONEYPOT  (added 1.2)
   ==========================================================
   Moved off-screen rather than display:none. Some bots skip
   fields that are display:none, but fill anything they can
   still find in the DOM — which is exactly what we want.
   Never change this to display:none or the trap stops working. */
.cf-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ==========================================================
   NEWSLETTER TICKBOX  (added 1.2)
   ========================================================== */
.cf-optin {
    margin-bottom: 1.5rem !important;
}

/* Overrides the uppercase field-label styling above — this one
   is a sentence a person reads, not a field name. */
.cf-form .cf-checkbox {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    line-height: 1.5 !important;
    color: #333 !important;
    cursor: pointer !important;
}

.cf-form .cf-checkbox input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    flex: 0 0 auto !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1.5px solid #ccc !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    position: relative !important;
    top: 1px !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
}

.cf-form .cf-checkbox:hover input[type="checkbox"] {
    border-color: #999 !important;
}

.cf-form .cf-checkbox input[type="checkbox"]:checked {
    background: #d4622a !important;
    border-color: #d4622a !important;
}

/* The tick itself — two borders rotated into an L. */
.cf-form .cf-checkbox input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute !important;
    left: 7px !important;
    top: 3px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

.cf-form .cf-checkbox input[type="checkbox"]:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(212,98,42,.12) !important;
    border-color: #d4622a !important;
}

/* ==========================================================
   reCAPTCHA  (added 1.2)
   ========================================================== */
.cf-recaptcha {
    margin-bottom: 1.5rem !important;
}

/* Google stores its token in a <textarea id="g-recaptcha-response">
   that sits INSIDE this form — so the blanket ".cf-form textarea"
   rule above was styling it into a visible 304x200 box on top of the
   Send button. It is a hidden token carrier read by JavaScript and
   must never be shown. The ID selector outranks .cf-form textarea. */
#g-recaptcha-response,
.cf-form textarea#g-recaptcha-response {
    display: none !important;
}

/* Google renders a fixed 304px widget that cannot be made fluid.
   On narrow phones it would push the page sideways, so scale it
   down and pull the container height back to match. */
@media (max-width: 400px) {
    .cf-recaptcha .g-recaptcha {
        transform: scale(0.85) !important;
        transform-origin: left top !important;
        height: 66px !important;
    }
}
@media (max-width: 340px) {
    .cf-recaptcha .g-recaptcha {
        transform: scale(0.77) !important;
        height: 60px !important;
    }
}

/* Submit button */
.cf-submit,
.cf-submit[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 48px !important;
    margin-top: 1rem !important;
    background: #111 !important;
    color: #fff !important;
    border: 1.5px solid #111 !important;
    border-radius: 2px !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
    line-height: 1 !important;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.cf-submit:hover,
.cf-submit[type="submit"]:hover {
    background: #fff !important;
    color: #111 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.15) !important;
}
.cf-submit:disabled,
.cf-submit[type="submit"]:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Message boxes */
#form-messages {
    padding: 1.25rem 1.5rem !important;
    border-radius: 2px !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
    display: none !important;
}
#form-messages.success {
    display: block !important;
    background: #f0faf0 !important;
    border: 1px solid #b6e2b6 !important;
    color: #2a6e2a !important;
}
#form-messages.error {
    display: block !important;
    background: #fff5f5 !important;
    border: 1px solid #fecaca !important;
    color: #c62828 !important;
}

/* Footer link */
.cf-wrapper > p:last-child {
    margin-top: 2rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid #eaeaea !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: .02em !important;
    color: #555 !important;
}
.cf-wrapper > p:last-child a {
    color: #111 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #ccc !important;
    padding-bottom: 1px !important;
    transition: color 0.18s ease, border-color 0.18s ease !important;
}
.cf-wrapper > p:last-child a:hover {
    color: #d4622a !important;
    border-color: #d4622a !important;
}

/* Responsive */
@media (max-width: 600px) {
    .cf-submit,
    .cf-submit[type="submit"] {
        width: 100% !important;
        padding: 18px !important;
    }
}