/* Shared by the Contact page (/contact/) and the home page's Stay Connected form. */

/* ── Contact ──
   One form for trade and shoppers alike. The "I am a" choice routes the
   message (dispensaries and distributors to sales, everyone else to info)
   and reveals the license field only where it applies. */
.contact {
    padding: 60px 0;
}

.contact-card {
    background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.06) 0%, rgba(var(--card-rgb), 0.8) 100%);
    border: 2px solid var(--border-color);
    border-radius: 24px;
    padding: 48px clamp(20px, 5vw, 48px);
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 10px 40px rgba(var(--shadow-rgb), 0.4);
}

.contact-card h2,
.contact-card h3 {
    font-family: 'Fraunces', serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 12px;
    text-align: center;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.contact-field.full {
    grid-column: 1 / -1;
}

.contact-field[hidden] {
    display: none;
}

.contact-field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
}

.contact-req {
    color: var(--gold-light);
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 1rem;
    color: var(--text-main);
    background: rgba(var(--ink-rgb), 0.04);
    /* Strong enough to read as a field edge (3:1) in both themes. */
    border: 1px solid rgba(var(--ink-rgb), 0.5);
    border-radius: 12px;
    padding: 12px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 40px;
}

/* Some browsers paint the option list dark in dark mode: pin both colours. */
.contact-field select option {
    color: #241a0d;
    background-color: #ffffff;
}

.contact-field textarea {
    min-height: 140px;
    resize: vertical;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--gold-light);
    box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.25);
}

.contact-field [aria-invalid="true"] {
    border-color: var(--contact-error);
}

.contact-error {
    color: var(--contact-error);
    font-size: 0.82rem;
    min-height: 0;
}

.contact-error:empty {
    display: none;
}

.contact-check {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
}

.contact-check input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--gold);
    flex-shrink: 0;
}

/* Off screen trap: people never see it, bots fill it in. */
.contact-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
}

.contact-status {
    font-size: 0.9rem;
    text-align: center;
    color: var(--contact-error);
}

.contact-status:empty {
    display: none;
}

/* Shown only when a form cannot send: the same details as an email. */
.contact-fallback,
.newsletter-card .newsletter-fallback {
    margin: 10px 0 0;
    font-size: 0.9rem;
    text-align: center;
}

.contact-fallback a,
.newsletter-fallback a {
    color: var(--gold-light);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-note {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: -8px 0 20px;
}

.contact-privacy,
.newsletter-card .newsletter-privacy {
    margin: 12px 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}

.contact-privacy a,
.newsletter-privacy a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

#contact-submit:focus-visible,
.newsletter-submit:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 3px;
}

.contact-success {
    text-align: center;
}

.contact-success[hidden] {
    display: none;
}

.contact-success p {
    color: var(--text-muted);
}

.contact-social {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 28px;
    font-size: 0.9rem;
}

.contact-social a {
    color: var(--gold-light);
    text-decoration: underline;
    text-underline-offset: 3px;
}

:root {
    --contact-error: #ff9b8f;
}

:root[data-theme="light"] {
    --contact-error: #b3261e;
}

@media (max-width: 640px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* Success check mark, for both forms. */
.success-icon {
    font-size: 2.5rem;
    color: #10b981;
    margin-bottom: 12px;
}