/* Communication Enquiry additions. The base visual system is copied from the Vendor Portal public site. */
.communication-header .header-inner { gap: 24px; padding:0 20px; }
.communication-nav { display:flex; align-items:center; gap:18px; }
.nav-link { color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; }
.nav-link:hover, .nav-link:focus { color:var(--primary); }

.communication-page { padding:52px 0 84px; background:var(--soft); min-height:calc(100vh - 78px); }
.communication-layout { display:grid; grid-template-columns:minmax(0, 1fr); gap:26px; max-width:980px; margin:0 auto; }
.page-intro { background:#fff; border:1px solid var(--line); border-radius:22px; padding:32px 36px; box-shadow:0 12px 42px rgba(16,35,63,.06); }
.page-intro .eyebrow { margin-bottom:8px; }
.page-intro h1 { margin:0 0 12px; font-size:clamp(30px,4vw,44px); line-height:1.2; letter-spacing:-.02em; }
html[dir=rtl] .page-intro h1 { letter-spacing:0; }
.page-intro p { margin:0; color:var(--muted); }

.legal-panel { margin-top:22px; padding:18px 20px; border:1px solid #eadfc8; background:#fffaf0; border-radius:14px; color:#594b2e; }
.legal-panel summary { cursor:pointer; font-weight:700; color:#493b21; }
.legal-panel ol, .legal-panel ul { margin:14px 0 0; padding-inline-start:24px; }
.legal-panel li { margin:7px 0; }

.communication-form { background:#fff; border:1px solid var(--line); border-radius:22px; padding:38px; box-shadow:0 12px 42px rgba(16,35,63,.07); }
.section-card { padding:28px 0; border-bottom:1px solid var(--line); }
.section-card:last-of-type { border-bottom:0; }
.section-title { display:flex; align-items:flex-start; gap:12px; margin-bottom:20px; }
.section-number { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:50%; background:#fff0f2; color:var(--primary); font-weight:700; }
.section-title h2 { margin:1px 0 4px; font-size:20px; line-height:1.4; }
.section-title p { margin:0; color:var(--muted); font-size:13px; }

.form-grid.three { grid-template-columns:repeat(3,1fr); }
.field.span-three { grid-column:span 3; }
.field.span-two { grid-column:span 2; }
.field .hint { display:block; margin-top:6px; color:var(--muted); font-size:12px; }
.textarea-large { min-height:150px !important; }
.textarea-medium { min-height:110px !important; }

/* Choice controls: RadioButtonList renders as <ul><li>...</li></ul> for predictable alignment. */
.choice-list {
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}
.choice-list-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.choice-list li {
    display:flex;
    align-items:center;
    min-height:54px;
    padding:13px 15px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#fff;
    transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.choice-list li:hover { border-color:#c7d1dc; background:#fbfcfd; }
.choice-list li:has(input:checked) { border-color:var(--primary); background:#fff7f8; box-shadow:0 0 0 1px rgba(183,25,46,.08); }
.choice-list input[type=radio] {
    width:18px;
    height:18px;
    margin:0;
    flex:0 0 18px;
    accent-color:var(--primary);
}
.choice-list label {
    margin:0;
    padding-inline-start:10px;
    flex:1 1 auto;
    cursor:pointer;
    font-size:14px;
    line-height:1.45;
}

.checkbox-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.checkbox-list > span { display:flex; align-items:flex-start; gap:9px; min-height:50px; padding:12px 13px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.checkbox-list input { margin-top:4px; accent-color:var(--primary); flex:0 0 auto; }
.checkbox-list label { cursor:pointer; font-size:13px; line-height:1.45; }
.declaration-list { grid-template-columns:1fr; }
.declaration-list > span { min-height:auto; }
.declaration-list > span { flex-wrap:wrap; }
.declaration-list .declaration-required { margin-inline-start:2px; line-height:1.45; }
.declaration-list .declaration-error { flex:0 0 100%; margin-inline-start:27px; margin-top:3px; }

.conditional-block { margin-top:16px; padding:18px; background:#f9fafb; border:1px solid var(--line); border-radius:12px; }
.conditional-block[hidden] { display:none !important; }
.inline-note { margin:14px 0 0; padding:14px 16px; border-inline-start:4px solid var(--accent); background:#fffaf0; color:#5e5136; font-size:13px; border-radius:8px; }

.validation-summary { margin:0 0 22px; padding:16px 18px; border:1px solid #f2c7cd; background:#fff7f8; color:#8c1423; border-radius:12px; font-size:14px; }
.validation-summary ul { margin:8px 0 0; padding-inline-start:22px; }
.validation-summary li { margin:4px 0; }
.error-banner { margin:0 0 22px; padding:14px 16px; border:1px solid #f2c7cd; background:#fff0f2; color:#8c1423; border-radius:10px; }
.success-banner { margin-bottom:24px; padding:20px 22px; border:1px solid #bfe2c7; background:#eff8f1; color:#235d30; border-radius:14px; }
.success-banner h2 { margin:0 0 6px; font-size:20px; }
.success-banner p { margin:3px 0; }

.form-actions { padding-top:28px; justify-content:flex-end; }
.required-mark { color:var(--primary); font-weight:700; }
.honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.signature-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.small-muted { color:var(--muted); font-size:12px; }

@media(max-width:900px) {
    .communication-nav .nav-link { display:none; }
    .choice-list, .checkbox-list { grid-template-columns:1fr 1fr; }
    .form-grid.three { grid-template-columns:1fr 1fr; }
    .field.span-three { grid-column:span 2; }
}

@media(max-width:620px) {
    .communication-page { padding:26px 0 54px; }
    .page-intro, .communication-form { padding:22px 18px; border-radius:16px; }
    .choice-list, .checkbox-list, .form-grid.three, .signature-grid { grid-template-columns:1fr; }
    .field.span-two, .field.span-three { grid-column:auto; }
    .section-title h2 { font-size:18px; }
    .communication-nav { gap:12px; }
}

/* Mobile compatibility hardening */
.communication-page,
.communication-layout,
.page-intro,
.communication-form,
.section-card,
.field {
    min-width: 0;
    max-width: 100%;
}

.page-intro,
.communication-form {
    width: 100%;
}

.page-intro,
.communication-form,
.section-card,
.field,
.choice-list li,
.checkbox-list > span {
    overflow-wrap: anywhere;
    word-break: normal;
}

@media (max-width: 620px) {
    html,
    body {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    .container {
        width: calc(100% - 24px);
        max-width: 1180px;
        margin-left: auto;
        margin-right: auto;
    }

    .site-header {
        width: 100%;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .header-inner {
        width: 100%;
        min-width: 0;
        gap: 10px;
    }

    .brand-logo-link {
        flex: 1 1 auto;
        min-width: 0;
    }

    .qrcs-header-logo {
        max-width: min(190px, 58vw);
        height: 38px;
        object-fit: contain;
    }

    .communication-nav {
        flex: 0 0 auto;
    }

    .language-link {
        white-space: nowrap;
        font-size: 13px;
    }

    .communication-page {
        display: block;
        width: 100%;
        min-height: calc(100vh - 68px);
        padding: 20px 0 44px;
    }

    .communication-layout {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .page-intro,
    .communication-form {
        display: block;
        width: 100%;
        max-width: 100%;
        padding: 20px 16px;
        border-radius: 14px;
    }

    .communication-form {
        margin-top: 18px;
    }

    .page-intro h1 {
        font-size: 27px;
        line-height: 1.35;
    }

    .section-card {
        width: 100%;
        padding: 22px 0;
    }

    .form-grid.three,
    .choice-list,
    .choice-list-two,
    .checkbox-list,
    .signature-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .field,
    .field.span-two,
    .field.span-three {
        grid-column: auto;
        width: 100%;
    }

    .input,
    textarea.input,
    select.input {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        font-size: 16px;
    }

    .choice-list li,
    .checkbox-list > span {
        width: 100%;
        min-width: 0;
    }

    .form-actions {
        width: 100%;
    }

    .form-actions .button {
        width: 100%;
        max-width: 100%;
        font-family: inherit;
    }

    .legal-panel {
        width: 100%;
        max-width: 100%;
    }
}