/* now-page-designer.css */
.now-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);*/
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

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

.now-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;
}

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

/* 🌟 Snazzier Premium Header Styles */
.now-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 */
.now-designer-page-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 */
.now-designer-page-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 */
.now-designer-page-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%;
    z-index: 1050;            /* Renders right over the header text when active */
    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 */
}

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

.now-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 */
}

#now-page-designer-modal #user-settings-contact-form button[type="submit"],
#now-page-designer-modal #user-settings-contact-form .btn-primary {
    display: none !important;
}
#now-page-designer-modal .now-designer-modal-body {
    padding: 1.25rem 2rem;
}
#now-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;
}
#now-designer-theme-select {
    font-size: 0.95rem;
    font-weight: 600;
    color: #2c3e50;
}