/**
 * Homeless Address Popup Styles
 *
 * Applies to form 14, field 315 — shown as a modal when
 * "Are you currently homeless?" = Yes is selected.
 */

/* ================================
   BACKDROP OVERLAY
   ================================ */

#oa-homeless-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99998;
}

#oa-homeless-backdrop.oa-active {
    display: block;
    animation: oaBackdropIn 0.2s ease forwards;
}

@keyframes oaBackdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Prevent body scroll while popup is open */
html.oa-popup-body-lock,
body.oa-popup-body-lock {
    overflow: hidden !important;
}

/* ================================
   FIELD 315 IN POPUP MODE
   ================================ */

#field_16_313.oa-popup-mode {
    display:          block !important;
    position:         fixed !important;
    /* needed to anchor the absolute close button */
    isolation:        isolate;
    top:              50% !important;
    left:             50% !important;
    transform:        translate(-50%, -50%) !important;
    z-index:          99999 !important;
    background:       #ffffff !important;
    border-radius:    10px !important;
    border:           1px solid #d1d5db !important;
    padding:          0 !important;
    margin:           0 !important;
    width:            calc(100% - 40px) !important;
    max-width:        600px !important;
    max-height:       85vh !important;
    overflow-y:       auto !important;
    overflow-x:       hidden !important;
    box-shadow:       0 4px 12px rgba(0, 0, 0, 0.08) !important;
    animation:        oaPopupSlideUp 0.25s ease forwards !important;
}

@keyframes oaPopupSlideUp {
    from {
        opacity:   0;
        transform: translate(-50%, -46%);
    }
    to {
        opacity:   1;
        transform: translate(-50%, -50%);
    }
}

/* Close (X) button — top-right corner of popup */
#field_16_313.oa-popup-mode .oa-popup-close-btn {
    position:      absolute;
    top:           12px;
    right:         14px;
    background:    transparent;
    border:        none;
    font-size:     1.4rem;
    line-height:   1;
    color:         #888;
    cursor:        pointer;
    padding:       4px 8px;
    border-radius: 50%;
    transition:    background 0.15s, color 0.15s;
    z-index:       3;
}

#field_16_313.oa-popup-mode .oa-popup-close-btn:hover {
    background: #f3f4f6;
    color:      #333;
}

/* ================================
   POPUP BODY (address field content)
   ================================ */

#field_16_313.oa-popup-mode .ginput_container_address,
#field_16_313.oa-popup-mode .ginput_complex {
    padding: 24px 24px 15px !important;
}

/* Field-level question label inside popup */
#field_16_313.oa-popup-mode > .gfield_label,
#field_16_313.oa-popup-mode > legend.gfield_label {
    display:     block !important;
    padding:     20px 24px 0 !important;
    margin:      0 !important;
    font-size:   0.9rem !important;
    font-weight: 600 !important;
    color:       #333 !important;
}

/* Ensure inner labels and inputs look clean */
#field_16_313.oa-popup-mode .ginput_container_address label,
#field_16_313.oa-popup-mode .ginput_complex label {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #333 !important;
}

/* Validation error message inside popup only */
#field_16_313.oa-popup-mode .validation_message,
#field_16_313.oa-popup-mode .gfield_description.validation_message {
    margin: 8px 4px 4px !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    display: block !important;
}

/* ================================
   POPUP FOOTER
   ================================ */

#field_16_313.oa-popup-mode .oa-popup-footer {
    display:        flex;
    align-items:    center;
    gap:            12px;
    padding:        16px 24px 20px;
    border-top:     1px solid #e5e7eb;
    background:     #ffffff;
    border-radius:  0 0 10px 10px;
    position:       sticky;
    bottom:         0;
    z-index:        2;
}

/* Save button — matches site primary red */
#field_16_313.oa-popup-mode .oa-popup-save-btn {
    background:    #cc0000;
    color:         #ffffff;
    border:        none;
    padding:       11px 28px;
    border-radius: 50px;
    font-size:     0.95rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    background 0.2s, transform 0.1s;
}

#field_16_313.oa-popup-mode .oa-popup-save-btn:hover {
    background: #aa0000;
}

#field_16_313.oa-popup-mode .oa-popup-save-btn:active {
    transform: scale(0.97);
}

/* Cancel button */
#field_16_313.oa-popup-mode .oa-popup-cancel-btn {
    background:    transparent;
    border:        none;
    color:         #cc0000;
    font-size:     0.95rem;
    font-weight:   500;
    cursor:        pointer;
    padding:       11px 18px;
    border-radius: 50px;
    transition:    background 0.15s;
}

#field_16_313.oa-popup-mode .oa-popup-cancel-btn:hover {
    background: #fef2f2;
}

/* ================================
   CONFIRMED STATE (address saved as text)
   ================================ */

/* Hide the label and native inputs — show summary text instead */
#field_16_313.oa-address-confirmed > .gfield_label,
#field_16_313.oa-address-confirmed > legend.gfield_label {
    display: none !important;
}

#field_16_313.oa-address-confirmed .ginput_container_address,
#field_16_313.oa-address-confirmed .ginput_complex {
    display: none !important;
}

/* Address summary wrapper */
.oa-address-summary {
    display:     flex;
    align-items: flex-start;
    gap:         16px;
    padding:     2px 0;
}

/* Container for labelled rows — 2-col grid so all values align */
.oa-address-summary-text {
    flex:                1;
    margin:              0;
    display:             grid;
    grid-template-columns: max-content 1fr;
    column-gap:          16px;
    row-gap:             6px;
    align-items:         baseline;
}

/* display:contents makes label + value direct grid children */
.oa-address-row {
    display: contents;
}

.oa-address-label {
    font-weight:    600;
    color:          #555;
    white-space:    nowrap;
    font-size:      0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.oa-address-value {
    color:     #1a1a1a;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Edit Address button */
.oa-address-edit-btn {
    background:    transparent;
    border:        1px solid #cc0000;
    color:         #cc0000;
    font-size:     0.85rem;
    font-weight:   500;
    padding:       6px 14px;
    border-radius: 50px;
    cursor:        pointer;
    white-space:   nowrap;
    flex-shrink:   0;
    transition:    background 0.15s, color 0.15s;
}

.oa-address-edit-btn:hover {
    background: #cc0000;
    color:      #ffffff;
}

/* Google Places autocomplete dropdown must sit above the popup overlay */
.pac-container {
    z-index: 100000 !important;
}

/* ================================
   RESPONSIVE ADJUSTMENTS
   ================================ */

@media (max-width: 480px) {
    #field_16_313.oa-popup-mode {
        max-height: 92vh !important;
        border-radius: 10px 10px 0 0 !important;
        top:       auto !important;
        bottom:    0 !important;
        left:      0 !important;
        right:     0 !important;
        transform: none !important;
        width:     100% !important;
        max-width: 100% !important;
        animation: oaPopupSlideUpMobile 0.25s ease forwards !important;
    }

    @keyframes oaPopupSlideUpMobile {
        from { transform: translateY(40px); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    #field_16_313.oa-popup-mode .oa-popup-footer {
        flex-wrap: wrap;
    }

    #field_16_313.oa-popup-mode .oa-popup-save-btn,
    #field_16_313.oa-popup-mode .oa-popup-cancel-btn {
        flex: 1;
        text-align: center;
    }
}