/* =============================================================================
   FUTBOLCU — CONTACT & SUPPORT STYLES (contact.css)
   ========================================================================== */

.fb-contact-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 20px 48px;
    display: grid;
    gap: 24px;
}

.fb-contact-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
}

.fb-contact-main-card {
    background: #F5F0E1;
    border: 3.5px solid #12291E;
    box-shadow: 8px 8px 0 rgba(12,31,22,.45);
    padding: 28px 32px;
}

.fb-contact-field {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
}

.fb-contact-field label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    color: #6C7C6F;
    text-transform: uppercase;
}

.fb-contact-input, .fb-contact-select, .fb-contact-textarea {
    border: 3px solid #12291E;
    background: #FFFBF0;
    padding: 12px 14px;
    font-family: Archivo, sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #16281F;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.fb-contact-input:focus, .fb-contact-select:focus, .fb-contact-textarea:focus {
    box-shadow: inset 0 0 0 3px #F2B134;
}

.fb-contact-hint {
    font-size: 11.5px;
    font-weight: 600;
    color: #6C7C6F;
    margin-top: 4px;
}

.fb-contact-submit-btn {
    cursor: pointer;
    border: 3.5px solid #12291E;
    background: #F2B134;
    color: #16281F;
    padding: 14px 24px;
    font-family: Anton, sans-serif;
    font-size: 17px;
    letter-spacing: .06em;
    box-shadow: 4px 4px 0 rgba(12,31,22,.4);
    transition: transform .12s ease, box-shadow .12s ease;
    width: 100%;
    text-transform: uppercase;
}

.fb-contact-submit-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 rgba(12,31,22,.4);
    background: #FFD37A;
}

.fb-tickets-panel {
    border: 3.5px solid #12291E;
    box-shadow: 8px 8px 0 rgba(12,31,22,.45);
    overflow: hidden;
}

.fb-tickets-head {
    background: #1B3A2B;
    border-bottom: 3.5px solid #12291E;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fb-tickets-head-title {
    font-family: Anton, sans-serif;
    font-size: 13px;
    letter-spacing: .12em;
    color: #FFF8E7;
    text-transform: uppercase;
}

.fb-tickets-head-count {
    font-family: Anton, sans-serif;
    font-size: 15px;
    color: #F2B134;
}

.fb-tickets-body {
    background: #F5F0E1;
    padding: 24px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
    color: #6C7C6F;
}

.fb-ticket-row-item {
    background: #FFFBF0;
    border: 2px solid #12291E;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: left;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background .15s ease;
    flex-wrap: wrap;
}

.fb-ticket-row-item:hover {
    background: #F2EAD3;
}

.fb-ticket-row-title {
    font-size: 14px;
    font-weight: 800;
    color: #16281F;
    word-break: break-word;
}

.fb-ticket-row-date {
    font-size: 11px;
    font-weight: 600;
    color: #8A9A8E;
    margin-top: 2px;
}

.fb-contact-coach-img {
    max-height: 310px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(12,31,22,.5));
}

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

@media (max-width: 600px) {
    .fb-contact-wrap {
        padding: 16px 12px 36px;
    }
    .fb-contact-main-card {
        padding: 20px 16px;
        box-shadow: 5px 5px 0 rgba(12,31,22,.45);
    }
    .fb-contact-main-card-title {
        font-size: 24px !important;
    }
    .fb-tickets-panel {
        box-shadow: 5px 5px 0 rgba(12,31,22,.45);
    }
    .fb-tickets-body {
        padding: 16px 12px;
    }
    .fb-contact-coach-img {
        max-height: 220px;
    }
    #fbTicketModal {
        padding: 10px !important;
    }
    #fbTicketModal > div {
        box-shadow: 5px 5px 0 rgba(12,31,22,.55) !important;
    }
}