/* ================================================================
   IvoSiteStyle.css
   IVO, Inc. — Dynamic Page Layout Styles
   Version: 1.2  (audit-cleaned)

   Styles specific to DynamicPageBS5.aspx.
   Loaded ONLY by DynamicPageBS5.aspx head content.
   Colors entirely via --dp-* and --ivo-* variables.
   ================================================================ */


/* ════════════════════════════════════════════════════════════════
   ADMIN WARNING BAR
   ════════════════════════════════════════════════════════════════ */
.ivo-admin-warn {
    background: var(--dp-admin-warn-bg);
    color: var(--dp-admin-warn-color);
    border: 1px solid var(--dp-admin-warn-border);
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0;
}


/* ════════════════════════════════════════════════════════════════
   STICKY MANAGE BAR
   ════════════════════════════════════════════════════════════════ */
.ivo-manage-bar {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1024;
    background: padding: 0;
}

    .ivo-manage-bar .btn {
        display: block;
        font-size: 0.78rem;
        font-weight: 700;
        padding: 7px 22px;
        background: rgba(185,28,28,0.88);
        color: #ffffff !important;
        border: none;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom: 2px solid #9f9f9f;
        box-shadow: 0 8px 15px 0 rgba(0,0,0,0.2), 4px 3px 5px 1px rgba(0,0,0,0.19);
        text-decoration: none;
        letter-spacing: 0.3px;
        transition: background 0.15s;
        white-space: nowrap;
    }

        .ivo-manage-bar .btn:hover {
            background: rgba(153,18,18,0.97);
        }


/* ════════════════════════════════════════════════════════════════
   SECTION BAND WRAPPERS
   background + color only — controls own all internal styles.
   ════════════════════════════════════════════════════════════════ */

.ivo-section-full {
    width: 100%;
}

.ivo-section-white {
    background: var(--dp-section-article-bg);
    color: var(--dp-section-article-color);
    padding: var(--dp-section-padding) 0;
}

.ivo-section-offwhite {
    background: var(--dp-section-products-bg);
    color: var(--dp-section-products-color);
    padding: var(--dp-section-padding) 0;
}

.ivo-section-navy {
    background: var(--dp-section-events-bg);
    color: var(--dp-section-events-color);
    padding: var(--dp-section-padding) 0;
}

.ivo-section-quickmenu {
    background: var(--dp-section-quickmenu-bg);
    color: var(--dp-section-quickmenu-color);
    padding: var(--dp-section-padding) 0;
}

.ivo-section-gold {
    background: var(--dp-section-gold-bg);
    color: var(--dp-section-gold-color);
    padding: var(--dp-section-padding) 0;
}

.ivo-section-royal {
    background: var(--dp-section-royal-bg);
    color: var(--dp-section-royal-color);
    padding: var(--dp-section-padding) 0;
}


    /* ════════════════════════════════════════════════════════════════
   DARK SECTION PILL OVERRIDE
   Venue pills are light by default (for white/light bg).
   On dark sections (navy, royal) override to light colors.
   ════════════════════════════════════════════════════════════════ */
    .ivo-section-navy .ivo-pill,
    .ivo-section-royal .ivo-pill {
        border-color: var(--dp-pill-dark-border);
        color: var(--dp-pill-dark-color);
    }

        .ivo-section-navy .ivo-pill.active,
        .ivo-section-royal .ivo-pill.active {
            background: var(--dp-pill-dark-active-bg);
            color: var(--dp-pill-dark-active-color);
            border-color: var(--dp-pill-dark-active-border);
        }


/* ════════════════════════════════════════════════════════════════
   IVO SHARED FORM INPUTS  (.ivo-form-wrap)
   Activates the shaded input style with navy focus ring.
   Used across Checkout, PayNow, and other form pages.
   Colors via --dp-input-* variables (in IvoThemeVariables.css).
   ════════════════════════════════════════════════════════════════ */
.ivo-form-wrap .form-control,
.ivo-form-wrap .form-select {
    background-color: var(--dp-input-bg);
    border: 1px solid var(--dp-input-border);
    border-radius: .5rem;
    color: var(--ivo-text-dark);
    font-size: .93rem;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

    .ivo-form-wrap .form-control:focus,
    .ivo-form-wrap .form-select:focus {
        background-color: var(--dp-input-focus-bg);
        border-color: var(--dp-input-focus-border);
        box-shadow: 0 0 0 .2rem var(--dp-input-focus-shadow);
        color: var(--ivo-text-dark);
    }

/* Floating label */
.ivo-form-wrap .form-floating > label {
    color: var(--ivo-text-muted);
    font-size: .88rem;
}

.ivo-form-wrap .form-floating > .form-control:focus ~ label,
.ivo-form-wrap .form-floating > .form-control:not(:placeholder-shown) ~ label,
.ivo-form-wrap .form-floating > .form-select ~ label {
    color: var(--ivo-royal);
    font-size: .75rem;
}

/* input-group inside .ivo-form-wrap */
.ivo-form-wrap .input-group .form-control {
    background-color: var(--dp-input-bg);
    border-color: var(--dp-input-border);
}

    .ivo-form-wrap .input-group .form-control:focus {
        background-color: var(--dp-input-focus-bg);
        border-color: var(--dp-input-focus-border);
        box-shadow: 0 0 0 .2rem var(--dp-input-focus-shadow);
        z-index: 3;
    }


/* ════════════════════════════════════════════════════════════════
   SECTION LABEL
   Uppercase micro-label used above form groups, modal headers.
   ════════════════════════════════════════════════════════════════ */
.ivo-section-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ivo-text-muted);
    margin-bottom: .6rem;
}


/* ════════════════════════════════════════════════════════════════
   ADDRESS / FORM TABS  (.ivo-form-tabs)
   ════════════════════════════════════════════════════════════════ */
.ivo-form-tabs .nav-link {
    font-size: .87rem;
    font-weight: 600;
    color: var(--ivo-text-muted);
    border-radius: 8px 8px 0 0;
    padding: 8px 20px;
    text-decoration: none;
    transition: color .15s, background .15s;
}

    .ivo-form-tabs .nav-link.active {
        color: var(--ivo-royal);
        background: var(--ivo-white);
        border-color: var(--ivo-border) var(--ivo-border) var(--ivo-white);
    }

    .ivo-form-tabs .nav-link:not(.active):hover {
        color: var(--ivo-royal);
        background: var(--dp-input-bg);
    }


/* ════════════════════════════════════════════════════════════════
   ORDER SUMMARY CARD  (.ivo-co-summary)
   Dark gradient card used in checkout / payment sidebar.
   ════════════════════════════════════════════════════════════════ */
.ivo-co-summary {
    background: linear-gradient(145deg, var(--ivo-navy) 0%, var(--ivo-royal) 100%);
    border-radius: 16px;
    color: #ffffff;
    padding: 28px 24px;
}

.ivo-co-summary-heading {
    font-family: var(--ivo-font-serif);
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 1rem;
}


/* ════════════════════════════════════════════════════════════════
   ORDER TOTALS TABLE  (.ivo-co-totals)
   ════════════════════════════════════════════════════════════════ */
.ivo-co-totals {
    width: 100%;
    border-collapse: collapse;
}

    .ivo-co-totals td {
        padding: 5px 0;
        font-size: .87rem;
        color: rgba(255,255,255,.9);
    }

        .ivo-co-totals td:last-child {
            text-align: right;
            font-weight: 600;
        }

    .ivo-co-totals .ivo-promo-row td {
        color: #ff8080 !important;
    }

    .ivo-co-totals .ivo-total-row td {
        font-size: 1.05rem;
        font-weight: 700;
        border-top: 1px solid rgba(255,255,255,.25);
        padding-top: 10px;
        color: #ffffff !important;
    }


/* ════════════════════════════════════════════════════════════════
   ADMIN: DYNAMIC SETTINGS OVERLAY
   ════════════════════════════════════════════════════════════════ */
.ivo-dyn-settings-overlay {
    position: fixed;
    bottom: 10%;
    right: 0;
    z-index: 100000;
}

.ivo-dyn-settings-btn {
    display: block;
    background: rgba(225,50,50,.5);
    color: #ffffff;
    border-radius: 30px 0 0 30px;
    padding: 10px 14px 10px 10px;
    font-size: .85rem;
    font-weight: 600;
    border: none;
    text-decoration: none;
    transition: background .2s;
    cursor: pointer;
}

    .ivo-dyn-settings-btn:hover {
        background: rgba(225,50,50,.88);
        color: #ffffff;
    }

    
/* ════════════════════════════════════════════════════════════════
   ADMIN: Master page DYNAMIC SETTINGS OVERLAY
   ════════════════════════════════════════════════════════════════ */
.ivo-mp-dyn-settings-overlay {
    position: fixed;
    bottom: 20%;
    right: 0;
    z-index: 100000;
}

.ivo-mp-dyn-settings-btn {
    display: block;
    background: rgba(138, 226, 130, 0.5);
    color: #b46464;
    border-radius: 30px 0 0 30px;
    padding: 10px 14px 10px 10px;
    font-size: .85rem;
    font-weight: 600;
    border: none;
    text-decoration: none;
    transition: background .2s;
    cursor: pointer;
}

    .ivo-mp-dyn-settings-btn:hover {
        background: rgba(83, 218, 99, 0.88);
        color: #ffffff;
    }