/* ======================================================
   CONTACT — Home-aligned (Navy/Gray/Orange/White)
   ====================================================== */
:root{
    --c-primary:#000080; /* Deep Navy */
    --c-secondary:#808080; /* Gray */
    --c-accent:#FF5733; /* Orange */
    --c-white:#FFFFFF;

    --c-ink:#0b1120;
    --c-muted:#6b7280;
    --c-border:rgba(0,0,128,.12);
    --c-border-strong:rgba(0,0,128,.18);
    --c-soft-primary:rgba(0,0,128,.06);

    --shadow-sm:0 6px 20px rgba(14,21,51,.10);
    --shadow-md:0 10px 30px rgba(14,21,51,.16);

    --site-max:1200px;
    --site-gutter:clamp(12px,3vw,24px);

    /* Unified field sizing */
    --field-h:56px;
    --field-radius:28px;
}

/* ---------- Layout ---------- */
.section-pad{padding:clamp(24px,4vw,56px) 0;}
.container{width:100%;max-width:var(--site-max);margin-inline:auto;padding-inline:var(--site-gutter);}
.text-center{text-align:center;}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden;}

/* ---------- Headings (Home-like) ---------- */
.section-head{margin:0 0 clamp(18px,3vw,28px) 0;}
.kicker{margin:0 0 .35rem 0;color:var(--c-muted);font-weight:700;letter-spacing:.02em;}

.section-title,.section-subtitle{
    margin:0;font-weight:900;line-height:1.1;
    font-size:clamp(1.6rem,3.2vw,2.2rem);color:var(--c-primary);position:relative;
}
.section-title::after,.section-subtitle::after{
    content:"";display:block;width:clamp(44px,6vw,72px);height:3px;background:var(--c-accent);
    border-radius:2px;margin:.6rem auto 0;
}
.section-intro{
    margin:.5rem auto 0;max-width:70ch;color:var(--c-ink);opacity:.9;line-height:1.7;
    text-align:justify;text-justify:inter-word;text-align-last:center;
}

/* ---------- Info cards ---------- */
.contact-cards{display:grid;gap:clamp(14px,2.4vw,24px);grid-template-columns:repeat(3,1fr);}
@media (max-width:992px){.contact-cards{grid-template-columns:repeat(2,1fr);}}
@media (max-width:576px){.contact-cards{grid-template-columns:1fr;}}

.contact-card{
    background:var(--c-white);border:1px solid var(--c-border);border-radius:20px;
    padding:clamp(16px,2.4vw,22px);text-align:center;box-shadow:var(--shadow-sm);
    transition:transform .25s ease,box-shadow .25s ease,border-color .2s ease;
}
.contact-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--c-border-strong);}

.contact-icon{
    --chip:56px;width:var(--chip);height:var(--chip);margin:0 auto 10px;border-radius:50%;
    display:grid;place-items:center;background:var(--c-soft-primary);border:1px solid var(--c-border);
}
.contact-icon i{color:var(--c-primary);font-size:1.25rem;}

.contact-card__title{margin:.4rem 0 .1rem 0;font-weight:800;color:var(--c-ink);letter-spacing:.02em;}
.contact-card__text{
    margin:0;color:var(--c-ink);line-height:1.7;text-align:justify;text-justify:inter-word;text-align-last:center;
}
.contact-link{color:var(--c-primary);text-decoration:none;font-weight:700;}
.contact-link:hover{color:var(--c-accent);}

/* ---------- Form grid ---------- */
.contact-form .section-subtitle{
    margin:.25rem 0 0 0;font-weight:800;color:var(--c-primary);
    font-size:clamp(1.15rem,2.6vw,1.6rem);
}
.jx-form .grid{display:grid;gap:clamp(14px,2.4vw,20px);grid-template-columns:repeat(2,1fr);}
.jx-form .field--full{grid-column:1/-1;}
@media (max-width:768px){.jx-form .grid{grid-template-columns:1fr;}}

/* ---------- Inputs / Textarea (pill) ---------- */
.jx-form input,.jx-form textarea{
    width:100%;background:#fff;color:var(--c-ink);border:1px solid var(--c-border);
    border-radius:var(--field-radius);padding:12px 16px;font-size:16px;line-height:1.2;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.jx-form input{height:var(--field-h);}
.jx-form textarea{min-height:160px;border-radius:20px;resize:vertical;}
.jx-form :is(input,textarea)::placeholder{color:#8c8f98;opacity:1;}
.jx-form :is(input,textarea):focus{border-color:var(--c-accent);box-shadow:0 0 0 .2rem rgba(255,87,51,.15);outline:0;}

/* ======================================================
   intl-tel-input — SINGLE WRAPPER BORDER (seamless pill)
   ====================================================== */
.iti{
    position:relative;border:1px solid var(--c-border);border-radius:var(--field-radius);
    background:#fff;height:var(--field-h);
}
.iti:focus-within{border-color:var(--c-accent);box-shadow:0 0 0 .2rem rgba(255,87,51,.15);}
.jx-form .field .iti{width:100%;display:block;box-sizing:border-box;}

/* Phone input appears borderless inside the wrapper */
.jx-form input#phone{
    width:100%;height:var(--field-h);border:0!important;outline:0!important;box-shadow:none!important;
    background:transparent;border-radius:var(--field-radius);
    padding-left:110px; /* room for flag + dial code */
    padding-right:14px; /* match other inputs’ inner padding */
    box-sizing:border-box;font-size:16px;line-height:1.2;
}

/* Flag/dial code area */
.iti__flag-container{
    position:absolute;left:12px;top:0;bottom:0;display:flex;align-items:center;justify-content:flex-start;height:var(--field-h);
}
.iti--separate-dial-code .iti__selected-flag{
    background:transparent!important;border:0!important;padding:0 10px 0 12px;height:100%;
    border-radius:var(--field-radius) 0 0 var(--field-radius);box-shadow:inset -1px 0 0 var(--c-border);
}
.iti:focus-within .iti__selected-flag{box-shadow:inset -1px 0 0 var(--c-accent);}
.iti--separate-dial-code .iti__selected-dial-code{color:var(--c-ink);font-weight:800;}
.iti--separate-dial-code .iti__selected-flag .iti__arrow{margin-left:6px;}
.iti__country-list{border-color:var(--c-border);border-radius:12px;box-shadow:var(--shadow-sm);}

@media (max-width:420px){input#phone{padding-left:96px;}}

/* ---------- Actions / Button ---------- */
.theme-btn{
    display:inline-flex;gap:.5rem;align-items:center;justify-content:center;
    padding:.85rem 1.4rem;border-radius:999px;border:none;cursor:pointer;
    background:var(--c-accent);color:var(--c-white);font-weight:800;
    box-shadow:0 8px 22px rgba(255,87,51,.18);
    transition:transform .05s ease,box-shadow .2s ease,background .2s ease;
}
.theme-btn:hover{background:#e64e2e;box-shadow:0 10px 28px rgba(255,87,51,.26);}
.theme-btn:active{transform:translateY(1px);}

/* ---------- Modal (fallback when no Bootstrap JS) ---------- */
.modal{display:none;}
.modal.open{
    position:fixed;inset:0;z-index:1050;display:grid;place-items:center;
    background:rgba(2,6,23,.45);
}
.modal.open .modal-dialog{max-width:520px;margin:0 auto;}
.modal.open .modal-content{
    background:#fff;border:1px solid var(--c-border);border-radius:16px;box-shadow:var(--shadow-md);
}
.modal.open .modal-content .modal-title{font-weight:800;color:var(--c-ink);}
.modal.open .modal-content p{color:var(--c-ink);line-height:1.6;}
#statusModal .modal-actions{margin-top:8px;}
#statusModal .theme-btn{min-width:100px;}

/* ---------- Toast ---------- */
.contact-toast{
    position:fixed;left:50%;bottom:20px;transform:translateX(-50%);
    background:#111827;color:#fff;padding:.6rem .9rem;border-radius:8px;
    font-weight:700;font-size:.92rem;z-index:1060;box-shadow:0 12px 30px rgba(0,0,0,.22);
}

/* ===== Inline errors (no markup changes needed) ===== */
input.jx-invalid,textarea.jx-invalid,select.jx-invalid{
    border-color:#d92d20!important;box-shadow:0 0 0 .12rem rgba(217,45,32,.12)!important;outline:none;
}
.iti.jx-invalid{border-color:#d92d20;box-shadow:0 0 0 .12rem rgba(217,45,32,.12);}
.field.jx-invalid{border:none!important;box-shadow:none!important;background:transparent!important;}
.jx-error{margin-top:6px;font-size:.88rem;color:#b42318;font-weight:600;line-height:1.25;}
.field .jx-error{display:block;margin-top:6px;}

/* Extra spacing between the section header and the form */
.contact-form .section-head{margin-bottom:clamp(24px,4vw,56px)!important;}

/* Modal spinner */
.modal-spinner{
    display:inline-block;width:28px;height:28px;margin-left:10px;vertical-align:middle;
    border-radius:50%;border:3px solid rgba(0,0,0,.08);border-top-color:var(--c-accent);
    animation:modal-spin .9s linear infinite;
}
@keyframes modal-spin{to{transform:rotate(360deg);}}
#statusModal .modal-body-msg{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;}
.modal-spinner .sr-only{display:none;}