/* Rewritten on 2026-09-08: this file previously had two problems. (1) It
   still carried the OLD selectors (#ContactUsContainer, .ContactInfoContainer,
   .inputText, .user-input-wrp, .custom-button-reverse, .custom-button,
   .ContactEmail) from before the page markup was redesigned - those are
   gone now, since nothing in the current .cshtml uses those classes any
   more. (2) The CSS that actually DOES match the current markup
   (.contact-us-section, .contact-info-panel, .form-field-input,
   .btn-primary-gold, etc.) was present in the file but wrapped in a
   /* ... * / comment block, so none of it was ever active - that's why nothing
   rendered even though the file loaded fine (200) with the right content.
   This version removes the dead old-selector rules, un-comments the real
   rules, and corrects a few things in them: the off-theme #D47E2B /
   rgba(198,153,70,..) values are mapped to the actual --eld-brass theme
   token (matching SurveyFeedback.css/VIP.css/CateringInquiry.css), a missing
   "padding: 0" reset is added on the card's Bootstrap columns (without it,
   Bootstrap's default column gutter leaves an unwanted white gap around the
   dark info panel - the same fix already used on the VIP page's matching
   card), the info panel's height is corrected from 95% to 100% (95% was
   leaving a stray gap at the bottom), and the info-icon images are resized
   from 36px (which would overflow their 38px circle) down to 20px so they
   sit centered inside it, using brightness(0) invert(1) so they turn solid
   white regardless of the source PNG's own color.

   Updated on 2026-09-18: this page was still using leftover generic/gray
   colors (#FAFAFA, #181818, #222, #E5E5E5, #F2F2F2) and the old --eld-brass
   token instead of the Nephew's Pizza palette (--npb-ink/--npb-forest/
   --npb-crust/--npb-gold/--npb-cream/--npb-paper) that the rest of the
   redesigned site (Story, Reviews, Hours, Footer) already uses. Every color
   below is now mapped onto that same palette so this page matches the
   site's theme - no layout, markup, or functionality changed. */

.contact-us-section {
    background: var(--npb-paper) !important;
    padding: 48px 20px !important;
    position: relative !important;
}

.contact-us-wrapper {
    max-width: 1100px !important;
    margin: 0 auto !important;
}

.contact-us-card {
    background: var(--npb-cream) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: var(--npb-shadow) !important;
    border: 1px solid var(--npb-line) !important;
    align-items: stretch !important;
}

    .contact-us-card > [class*="col-"] {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
    }

/*********************************
      LEFT INFO PANEL
**********************************/

.contact-info-panel {
    background: var(--npb-ink) !important;
    color: var(--npb-paper) !important;
    height: 100% !important;
    padding: 32px 24px !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

    .contact-info-panel::before {
        content: "" !important;
        position: absolute !important;
        width: 220px !important;
        height: 220px !important;
        background: rgba(231,167,59,.12) !important;
        border-radius: 50% !important;
        top: -90px !important;
        right: -90px !important;
        pointer-events: none !important;
    }

    .contact-info-panel::after {
        content: "" !important;
        position: absolute !important;
        width: 180px !important;
        height: 180px !important;
        background: rgba(231,167,59,.09) !important;
        border-radius: 50% !important;
        bottom: -80px !important;
        left: -60px !important;
        pointer-events: none !important;
    }

.contact-info-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: var(--npb-paper) !important;
    margin: 0 0 20px 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

.contact-info-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    position: relative !important;
    z-index: 1 !important;
}

.info-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    backdrop-filter: blur(6px) !important;
    transition: transform .25s ease, background .25s ease, border-color .25s ease !important;
}

    .info-item:hover {
        background: rgba(255,255,255,.09) !important;
        border-color: rgba(231,167,59,.4) !important;
        transform: translateX(4px) !important;
    }

.info-icon-circle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    background: var(--npb-gold) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 16px rgba(231,167,59,.35) !important;
}

.info-icon-img {
    font-size: 16px !important;
    color: var(--npb-ink) !important;
}

.info-text {
    color: rgba(255,251,242,0.82) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    word-break: break-word !important;
}

    .info-text a.info-email-link {
        color: rgba(255,251,242,0.82) !important;
        text-decoration: none !important;
        transition: color .2s ease !important;
    }

        .info-text a.info-email-link:hover {
            color: var(--npb-gold-light) !important;
        }

/*********************************
      RIGHT FORM PANEL
**********************************/

.contact-form-panel {
    padding: 32px 36px !important;
    background: var(--npb-cream) !important;
    height: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.form-heading {
    margin-bottom: 24px !important;
}

    .form-heading h2 {
        font-size: 26px !important;
        font-weight: 600 !important;
        color: var(--npb-ink) !important;
        margin: 0 0 10px 0 !important;
    }

    .form-heading .heading-underline {
        display: block !important;
        width: 48px !important;
        height: 3px !important;
        background: var(--npb-gold) !important;
        border-radius: 4px !important;
    }

.contact-form-fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.form-field-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.form-field-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--npb-ink) !important;
    margin: 0 !important;
}

.form-field-input {
    width: 100% !important;
    height: 44px !important;
    border-radius: 8px !important;
    border: 1.5px solid var(--npb-line) !important;
    background: #fff !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    color: var(--npb-ink) !important;
    box-shadow: none !important;
    transition: border-color .2s ease, box-shadow .2s ease !important;
}

textarea.form-field-input {
    height: 90px !important;
    padding-top: 10px !important;
    resize: none !important;
}

.form-field-input:focus {
    border-color: var(--npb-gold) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(231,167,59,.15) !important;
    outline: none !important;
}

.form-field-error {
    font-size: 12px !important;
    color: var(--npb-crust-dark) !important;
    margin-top: 2px !important;
    display: block !important;
}

.form-field-hidden {
    display: none !important;
}

.captcha-row {
    margin: 8px 0 4px 0 !important;
}

.captcha-error {
    color: var(--npb-crust-dark) !important;
    font-size: 13px !important;
    display: inline-block !important;
    margin-top: 8px !important;
}

.form-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 8px !important;
    flex-wrap: wrap !important;
}

.btn-primary-gold {
    background: var(--npb-gold) !important;
    color: var(--npb-ink) !important;
    border: none !important;
    height: 42px !important;
    padding: 0 28px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
    box-shadow: 0 4px 12px rgba(231,167,59,.3) !important;
    letter-spacing: 1px;
}

    .btn-primary-gold:hover {
        background: var(--npb-gold-light) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 10px 20px rgba(231,167,59,.35) !important;
    }

.btn-secondary-outline {
    letter-spacing: 1px;
    background: #fff !important;
    color: var(--npb-ink) !important;
    border: 1px solid var(--npb-line) !important;
    height: 42px !important;
    padding: 0 28px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

    .btn-secondary-outline:hover {
        border-color: var(--npb-gold) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 16px rgba(23,20,15,.12) !important;
    }

.form-restricted-msg {
    font-size: 14px !important;
    color: var(--npb-crust-dark) !important;
    margin: 0 !important;
    font-weight: 600 !important;
}

@media (max-width: 991px) {

    .contact-info-panel {
        border-radius: 0 !important;
        padding: 28px 22px !important;
    }

    .contact-form-panel {
        padding: 28px 22px !important;
    }

    .form-heading h2 {
        font-size: 22px !important;
    }
}

@media (max-width: 576px) {

    .contact-us-section {
        padding: 24px 12px !important;
    }

    .contact-info-panel {
        padding: 22px 16px !important;
    }

    .contact-form-panel {
        padding: 22px 16px !important;
    }

    .form-heading h2 {
        font-size: 20px !important;
    }

    .info-item {
        padding: 12px !important;
    }

    .info-text {
        font-size: 13px !important;
        line-height: 18px !important;
    }

    .form-field-input {
        height: 42px !important;
    }

    .form-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .btn-primary-gold,
    .btn-secondary-outline {
        width: 100% !important;
    }
}

/* Added 2026-09-18: the Directions page reuses this stylesheet's
   .contact-us-*/.info-* components for its address panel (same
   ConFot data as Contact Us), and its embedded Google Map sits in the
   other column via this one page-specific rule - .RestaurantMap does
   not exist on the Contact Us page itself, so this is a no-op there. */
.RestaurantMap {
    min-height: 420px;
}

    .RestaurantMap iframe {
        border: 0;
        display: block;
    }