/* one-page-designer.css */
.one-designer-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /*background-color: rgba(0, 0, 0, 0.5);*/
    /*backdrop-filter: blur(1px);*/
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.one-designer-modal-overlay.active {
    opacity: 1;
}

.one-designer-modal-card {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    width: 96%;
    max-width: 650px;

    /* 🌟 CHANGE 1: Force a persistent, fixed percentage height instead of max-height */
    height: 80vh;

    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(-20px);
    transition: transform 0.2s ease-in-out;
}

.one-designer-modal-overlay.active .one-designer-modal-card {
    transform: translateY(0);
}

/* 🌟 Snazzier Premium Header Styles */
.one-designer-modal-header-premium {
    padding: 0.75rem 0.75rem;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    position: relative;
    display: flex;
    justify-content: space-between;

    /* 🔒 CHANGE 1: Force vertical alignment to center so the icon, text block,
       and close button share a permanently locked horizon */
    align-items: center;
    flex-shrink: 0;

    /* 🔒 CHANGE 2: Establish a strict, locked height context for the container
       so fluid text generation below it cannot resize the header area */
    height: 65px;
    box-sizing: border-box;
}

/* Subtle accent ring behind the icon */
.designer-icon-glow {
    width: 38px;
    height: 38px;
    background: #eff6ff;
    color: #3b82f6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
    flex-shrink: 0; /* 🔒 Prevent the circle glow from shrinking if text gets wide */
}

/* Micro-copy text transition timing channel */
.transition-fade {
    transition: opacity 0.2s ease-in-out;
}

/* Re-polishing Tab Bar Track aesthetics from Screenshot 2026-06-08 at 15.22.26.png */
.designer-unified-tabs {
    background-color: #f8fafc !important; /* Cleaner neutral canvas tone */
    padding-left: 0.5rem !important;
    gap: 0.25rem;
}

/* 🛠️ Context-Isolated Split: Isolate Page Settings from Styling tabs */
.designer-unified-tabs .nav-item:first-child {
    position: relative;
    padding-right: 14px !important;
}

/* Inject the crisp dividing vertical hair-line via an absolute pseudo-element */
.designer-unified-tabs .nav-item:first-child::after {
    content: "";
    position: absolute;
    right: 0;
    top: 25%; /* Vertically centers the bar down the height track */
    height: 50%; /* Keeps the divider subtle and sleek instead of stretching top-to-bottom */
    width: 1px;
    background-color: #cbd5e1; /* Subtle premium slate gray tone */
}

/* Give the Global Styles tab a touch of breathing room away from the separator bar */
.designer-unified-tabs .nav-item:nth-child(2) {
    margin-left: 4px !important;
}

.designer-unified-tabs .nav-link {
    border: 1px solid transparent !important;
    border-radius: 6px 6px 0 0 !important;
    font-size: 0.9rem;
    font-weight: 500;
    color: #64748b !important;
    padding: 0.6rem 0.6rem !important;
    transition: all 0.15s ease-in-out;
}

/* Highlight hover/active states safely */
.designer-unified-tabs .nav-link:hover {
    color: #1e293b !important;
    background-color: #f1f5f9 !important;
}

.designer-unified-tabs .nav-link.active {
    background-color: #ffffff !important;
    border-color: #e2e8f0 #e2e8f0 transparent !important;
    color: #3b82f6 !important; /* Bold primary color focal channel highlight */
    font-weight: 600 !important;
    box-shadow: inset 0 2px 0 #3b82f6; /* Modern top accent line stroke indicator */
}

/* 🛠️ Clear Overrides Banner Layout Engine */
.one-page-designer-override-heading {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;                  /* Establish flex layout context */
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; /* ↔️ Snaps text to the left, button to the right */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;            /* ↕️ Vertically aligns them to the same horizon */

    width: 100%;
    margin-bottom: 1.25rem;         /* Clean spacing above your first input group card */
}

/* Neutralize the default paragraph margin box */
.one-page-designer-override-heading h6.text-muted {
    margin-bottom: 0 !important;    /* 🎯 Kills browser bottom padding for pixel-perfect centering */
    font-size: 0.88rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;            /* Centers the Phosphor icon next to the text characters */
}

/* Spacing tweak for the descriptive icon */
.one-page-designer-override-heading h6.text-muted i {
    margin-right: 6px;
    font-size: 1rem;
}

/* 🛠️ The Missing Feedback Banner Animation Styles */
#designer-feedback-banner {
    position: absolute;       /* Pins it relative to the designer modal card container */
    top: -60px;               /* 📐 Starts completely hidden, tucked up above the header boundary */
    left: 0;
    width: 100%;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 0;         /* Flush against the modal container ceiling */
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

    /* ⚡ The Engine: Smoothly slide the shutter up and down over 0.25 seconds */
    transition: transform 0.65s ease-in-out, opacity 0.45s ease-in-out;
    transform: translateY(0);
    opacity: 0;
    pointer-events: none;     /* Stops it from blocking clicks while invisible */
}

/* 🚀 The Active State: When jQuery adds '.show', slide it out and fade it in! */
#designer-feedback-banner.show {
    transform: translateY(60px); /* Slides it perfectly down into view */
    opacity: 1;
    pointer-events: auto;        /* Restores button interactivity */
}

/* Clean utility fallbacks for bootstrap contextual colors */
#designer-feedback-banner.alert-success {
    background-color: #f0fdf4; /* Soft premium green background */
    color: #166534;            /* Deep readable forest text */
}
#designer-feedback-banner.alert-danger {
    background-color: #fef2f2; /* Soft premium red background */
    color: #991b1b;            /* Deep readable dark red text */
}

.one-designer-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex-grow: 1; /* 🌟 Takes up all remaining space inside the fixed height container */
}

.one-designer-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0; /* 🌟 CHANGE 3: Prevent footer from squishing */
}

#one-page-designer-modal #user-settings-contact-form button[type="submit"],
#one-page-designer-modal #user-settings-contact-form .btn-primary {
    display: none !important;
}
#one-page-designer-modal .one-designer-modal-body {
    padding: 1.25rem 2rem;
}
#one-page-designer-modal #user-settings-contact-form .form-group {
    margin-bottom: 1.25rem;
}

/* Theme Selector Section Configuration Rules */
.designer-theme-select-wrapper {
    max-width: 300px;
    text-align: left;
}
.designer-theme-select-wrapper label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.5rem;
    display: block;
}

/* ==========================================================================
   USER SETTINGS BRANDING STYLES (designer-branding-)
   ========================================================================== */
.designer-branding-container_600 {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Redesigned clean layout sections to segregate the form */
.designer-branding-section-box {
    background: #fcfcfc;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
}

.designer-branding-label {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #2c3e50; /* Clean dark slate typography color */
    margin-bottom: 6px;
}

/* ==========================================================================
   COLOR PICKERS (Styled to cleanly unify swatches and text inputs)
   ========================================================================== */
.designer-branding-color-flex {
    display: flex;
    gap: 20px;
    width: 100%;
}

.designer-branding-color-item {
    flex: 1;
}

/* Turns the wrapper container into a uniform, styled input field */
.designer-branding-color-picker-wrapper {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #ced4da; /* Matches default bootstrap input borders */
    border-radius: 6px;
    padding: 6px 12px;
    height: 44px; /* Matches standard form-control heights */
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Highlight style if a user selects or focuses an entry inside */
.designer-branding-color-picker-wrapper:focus-within {
    border-color: #ff397a; /* Aligns with your pink accent theme color */
    box-shadow: 0 0 0 3px rgba(255, 51, 102, 0.1);
}

.designer-branding-color-input {
    border: none;
    background: none;
    width: 32px;
    height: 32px;
    cursor: pointer;
    padding: 0;
    margin-right: 12px;
    flex-shrink: 0;
}

.designer-branding-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.designer-branding-color-input::-webkit-color-swatch {
    border: 1px solid #ced4da;
    border-radius: 4px;
}

.designer-branding-color-text {
    border: none !important;
    padding: 0 !important;
    font-size: 0.95rem !important;
    font-family: monospace;
    font-weight: 600;
    color: #2c3e50;
    text-transform: uppercase;
    box-shadow: none !important;
    background: transparent !important;
    outline: none !important;
    width: 100%;
}

/* ==========================================================================
   MEDIA PREVIEW LAYOUTS
   ========================================================================= */
.designer-branding-media-flex {
    display: flex;
    gap: 24px;
    width: 100%;
}

.designer-branding-media-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.designer-branding-preview-box {
    background: #ffffff; /* White fill interior to pop against the new section box background */
    border: 1px dashed #cccccc;
    border-radius: 6px;
    height: 140px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* Maintain crisp aspect profiles for standard store logos */
.designer-branding-logo-img-render {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    border-radius: 6px;
}

/* Force wide panoramic fill mapping for background landscape representations */
.designer-branding-banner-img-render {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==========================================================================
   RESPONSIVE DESIGN CORRECTIONS
   ========================================================================== */
@media (max-width: 576px) {
    .designer-branding-section-box {
        padding: 16px;
    }

    .designer-branding-color-flex,
    .designer-branding-media-flex {
        flex-direction: column;
        gap: 16px;
    }

    .designer-branding-preview-box {
        height: 120px;
    }
}