@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;1,600&display=swap');

:root {
    --primary: #25353d;
    --secondary: #567186;
    --tertiary: #7295b1;
    --accent: #08d1de;
    --alert: #9e1b1b;
    --alert-hover: #ff3b30;
    --light-background: #c8e7ff;
    --another: #1779ba;
    --studio-strip-border: #e6e6e6;
}

/* Always show the vertical scrollbar track to prevent layout shift */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body {
	font-family: "Montserrat", sans-serif;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: normal;
    color: inherit;
    text-rendering: optimizeLegibility;
}


/* Sticky Header Styles */
.full-width-header {
    /* CHANGED: From sticky to fixed so it never jumps when modals open */
    position: fixed;
    top: 0;
    
    width: 100%;
    background-color: white; 
    
    /* 2. Z-Index Management 
       - 1000 is usually high enough to sit over content.
       - Foundation Modals are z-index 1006. 
       - Keeping this at 1000 ensures the modal opens ON TOP of the header (correct behavior).
    */
    z-index: 1000;             
    
    /* Border & Shadow */           
    
    /* 1. The Blue Line (2px) */
    border-bottom: 3px solid var(--accent); 
    
    /* 2. The Black Line (2px) + Drop Shadow */
    /* Shadow 1: 0px-X, 2px-Y (pushes it down), 0-Blur (solid), Black.
       Shadow 2: 0px-X, 6px-Y (pushes it below black), 10px-Blur, Transparent Black.
    */
    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.3);
    
    color: var(--secondary);
}


.text-color-primary {
	color: var(--primary);
}

.text-color-secondary {
	color: var(--secondary);
}

.text-color-tertiary {
	color: var(--tertiary);
}

.text-color-accent {
	color: var(--accent);
}

.text-color-light-background {
	color: var(--light-background);
}

.button {
	font-weight: bold;
	background-color: var(--primary);
}

.button:hover, .button:focus {
	background-color: var(--accent);
}


/* Base State: Deep, professional Crimson (Matches the weight of your #025155) */
.button.alert {
    background-color: var(--alert); 
    color: white; /* Ensure text remains white */
}

/* Hover State: Vivid Scarlet (Matches the brightness of your #b8d604) */
.button.alert:hover, .button.alert:focus {
    background-color: var(--alert-hover);
}


.button.secondary {
	background-color: var(--secondary);
	
}

.button.secondary:hover, .button.secondary:focus {
	background-color: var(--tertiary);
}


/* 1. Set up the button for positioning context */
.button.icon-and-text {
    position: relative;      /* Allows children to be absolutely positioned relative to this */
    display: inline-flex;    /* Uses flexbox for the text alignment */
    align-items: center;     /* Vertically centers everything */
    justify-content: center; /* Horizontally centers the TEXT */
    padding-left: 3rem;      /* Add padding so long text doesn't overlap the icon */
    padding-right: 3rem;     /* Add equal padding on right to keep text perfectly centered */
}

/* 2. Pin the icon to the left */
.button.icon-and-text i {
    position: absolute;      /* Removes icon from the flow so it doesn't push text */
    left: 1.25rem;           /* Distance from the left edge */
    top: 50%;                /* Move top to 50% */
    transform: translateY(-50%); /* Pull back up by half its height for perfect vertical center */
}


.brand-logo {
    /* 1. Limit the width */
    max-width: 350px; 
    
    /* 2. Limit the height (Crucial for headers!) */
    max-height: 65px;
    
    margin-top: 5px;
    margin-bottom: 5px; 
    
    /* 3. The Magic: Tell browser to calculate the other dimension */
    width: auto;
    height: auto;
}


.card-divider {
	background-color: var(--secondary);
	color: white;
}

.callout.warning {
    background-color: var(--light-background);
}

.bordered {
	border: 1px solid;
	border-color: var(--light-background);
}

/* ==========================================
   CLEAN UNDERLINE TABS
   ========================================== */

.tabs {
    border: none;
    /* 1. The structural line that runs across the screen */
    border-bottom: 1px solid var(--studio-strip-border); 
    display: flex;
    justify-content: space-around;
    background-color: transparent;
    margin-bottom: 1.5rem; /* Breathing room before the strips start */
}

.tabs-title {
    flex: 1 1 0;
    text-align: center;
    border: none; /* Remove the old box borders */
}

/* Remove the old "no double border" rule since we have no borders now */
.tabs-title:not(:first-child) {
    border-left: none; 
}

.tabs-title > a {
    display: block;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    color: var(--secondary);
    font-weight: 600;
    /* Reserve space for the active border so text doesn't jump */
    border-bottom: 3px solid transparent; 
    transition: all 0.2s ease;
}

/* Hover: Simple text color change, no background */
.tabs-title > a:hover {
    color: var(--primary);
    background: transparent; 
}

/* Active State: Bold Text + Accent Underline */
.tabs-title.is-active {
    background: transparent;
    border: none; 
}

.tabs-title.is-active > a {
    background: transparent;
    color: var(--primary);
    /* This sits ON TOP of the grey line */
    border-bottom: 3px solid var(--accent); 
}

/* Focus states for accessibility */
.tabs-title > a:focus, .tabs-title > a[aria-selected=true] {
    background: transparent;
    color: var(--primary);
}

.tabs-panel {
	padding: 0;
}

/* Explicitly remove any default Foundation borders from the panel container */
.tabs-content {
    border: none;
    background: transparent;
}


.input-group-label {
	background: var(--light-background);
}

input:disabled, input[readonly], textarea:disabled, textarea[readonly] {
    background-color: var(--light-background);
}


ul.pricing-table {
	list-style-type: none;
}


small {
	line-height: 1;
}


textarea.fixed {
    resize: none;
}


/* Add your own utility helpers */
.padding-1 { padding: 1rem; }
.padding-2 { padding: 2rem; }
.padding-horizontal-1 { padding-left: 1rem; padding-right: 1rem; }
.padding-vertical-1 { padding-top: 1rem; padding-bottom: 1rem; }













/* ==========================================
   STUDIO STRIP LAYOUT (Compact Renderings)
   ========================================== */

.rendering-strip {
    background: white;
    border: 1px solid var(--studio-strip-border);
    border-left: 5px solid var(--secondary); /* Status indicator style */
    border-radius: 4px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease-in-out;
}

.rendering-strip:hover {
    border-left-color: var(--accent); /* "Light up" the side on hover */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

/* 2. Image Thumbnails */
.rendering-thumbs-container {
    display: flex;
    align-items: center;
    gap: 15px; /* Increased gap slightly for better spacing */
    padding: 1rem 0 1rem 1rem; 
}

.rendering-thumb-wrapper {
    position: relative;
    /* CHANGED: Increased from 80px to 120px */
    width: 160px;
    height: 160px;
}

.rendering-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--studio-strip-border);
    background: #f0f0f0;
    transition: transform 0.2s;
}

.rendering-thumb:hover {
    transform: scale(1.05); /* Subtle zoom */
    border-color: var(--accent);
}

/*
.thumb-badge {
    position: absolute;
    bottom: -8px;
    right: -8px;
    font-size: 0.65rem;
    background: var(--primary);
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 2;
}*/
.thumb-badge {
    position: absolute;
    bottom: -12px;
    right: -12px;
    width: 28px;
    height: 28px;
    font-size: 0.65rem;
    background: var(--primary);
    color: white;
    padding: 6px 9px;
    border-radius: 50%;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 2;
    object-fit: contain;
}

.thumb-badge.ai {
    background: var(--accent); /* Highlight the AI result */
    color: var(--primary);
}

.instruction-preview {
    font-size: 0.9rem;
    color: #555;
    background: #f8f9fa;
    padding: 0.75rem;
    border-radius: 4px;
    margin-top: 5px;
    border-left: 2px solid #ddd;
    
    /* Elegant text truncation */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-style: italic;
}

/* Spacing for the quote icon */
.instruction-preview i {
    margin-right: 0.6rem;
}

.rendering-meta {
    font-size: 0.8rem;
    color: var(--secondary);
    margin-top: 5px;
}

/* ==========================================
   UPDATED STUDIO STRIP (Vertical Actions)
   ========================================== */

/* 1. The Logo Badge */
.thumb-badge-logo {
    position: absolute;
    bottom: -12px;
    right: -12px;
    width: 28px;
    height: 28px;
    background: white;
    border: 1px solid var(--accent);
    border-radius: 50%;
    padding: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 5;
    object-fit: contain;
}


/* 2. Vertical Button Strip Styling */
.vertical-studio-actions {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--studio-strip-border);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.vertical-studio-actions .button {
    margin: 0;
    border-radius: 0;
    background: transparent;
    color: var(--secondary);
    border-bottom: 1px solid var(--studio-strip-border);
    padding: 0.85rem 1rem; /* Larger touch targets */
    transition: all 0.2s ease;
}

/* Remove bottom border from the last one */
.vertical-studio-actions .button:last-child {
    border-bottom: none;
}

/* Hover effects for individual buttons */
.vertical-studio-actions .button:hover {
    background: var(--accent);
    color: white;
}

/* Specific styling for the Delete button at the bottom */
.vertical-studio-actions .button.alert-action:hover {
    background: #ffe6e6; /* Light red */
    color: var(--alert);
}


/* ==========================================
   HORIZONTAL STUDIO STRIP (For Tables)
   ========================================== */

.horizontal-studio-actions {
    display: inline-flex;       /* Keep it inline so it fits in table cells */
    flex-direction: row;        /* Horizontal Layout */
    background: white;
    border: 1px solid var(--studio-strip-border);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.horizontal-studio-actions .button {
    margin: 0;
    border-radius: 0;
    background: transparent;
    color: var(--secondary);
    border-right: 1px solid var(--studio-strip-border); /* Separator line */
    transition: all 0.2s ease;
    font-size: 0.9rem;          /* Optional: slightly smaller text for tables */
}


.horizontal-studio-actions .button.condensed {
    margin: 0;
    border-radius: 0;
    background: transparent;
    color: var(--secondary);
    border-right: 1px solid var(--studio-strip-border, #e6e6e6);
    width: 32px; /* Fixed width for perfect small squares */
    height: 32px; /* Fixed height for perfect small squares */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* Remove border from the last button */
.horizontal-studio-actions .button:last-child {
    border-right: none;
}

/* Hover effects */
.horizontal-studio-actions .button:hover {
    background: var(--accent);
    color: white;
}

/* Specific styling for Delete/Alert actions */
.horizontal-studio-actions .button.alert-action:hover {
    background: #ffe6e6; /* Light red */
    color: var(--alert);
}


/* ==========================================
   GALLERY CARD LAYOUT (Reference Library)
   ========================================== */

.gallery-card {
    position: relative;
    background: white;
    border: 1px solid var(--studio-strip-border);
    border-top: 4px solid var(--secondary); /* Top accent */
    border-radius: 4px;
    height: 100%; 
    transition: all 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ensures the bottom corners clip the footer */
}

.gallery-card:hover {
    border-top-color: var(--accent); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    /* REMOVED: transform: translateY(-3px); - No more movement */
}

.gallery-header {
    padding: 0.75rem 1rem 0.5rem 1rem;
}

.gallery-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-image-wrapper {
    position: relative;
    flex: 1; 
    background: #f9f9f9;
    min-height: 200px; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-top: 1px solid #f0f0f0;
}

.gallery-image {
    max-width: 100%;
    max-height: 220px;
    object-fit: cover;
    transition: transform 0.3s ease;
}


/* NEW: Horizontal Action Strip (Footer) */
.gallery-action-strip {
    display: flex;
    flex-direction: row; /* Horizontal */
    background: #fcfcfc;
    border-top: 1px solid var(--studio-strip-border);
}

.gallery-action-btn {
    flex: 1; /* Split width 50/50 */
    background: transparent;
    color: var(--secondary);
    border: none;
    border-right: 1px solid var(--studio-strip-border);
    border-radius: 0;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Remove border from the last button */
.gallery-action-btn:last-child {
    border-right: none;
}

/* Hover Effects (Matching Rendering Strip) */
.gallery-action-btn:hover {
    background: var(--accent);
    color: white;
}

/* Specific Delete Hover */
.gallery-action-btn.alert-action:hover {
	background: #ffe6e6;
	color: var(--alert);
}



/* ==========================================
   DASHBOARD PROJECT STRIPS
   ========================================== */

/* CHANGED: Target 'a.project-strip' to reset link styles */
a.project-strip {
    display: block; /* Makes the <a> tag behave like a box */
    text-decoration: none; /* Removes the underline */
    color: inherit; /* Prevents text from turning default link blue */
    
    background: #ffffff;
    border: 1px solid var(--studio-strip-border);
    border-left: 4px solid var(--secondary); /* Default Status Color */
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 0.75rem; 
    transition: all 0.2s ease-in-out;
}

a.project-strip:hover {
    border-left-color: var(--accent); /* Light up on hover */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    /* transform: translateY(-2px); <--- Add this back if you want the lift effect */
    color: inherit; /* Ensure text stays correct color on hover */
}

/* Distinct style for Shared Projects */
.project-strip.shared {
    border-left-color: #8a8a8a; /* Grey/Silver for shared items */
}

.project-icon-wrapper {
    width: 45px;
    height: 45px;
    background: #f8f9fa;
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--studio-strip-border);
    color: var(--secondary);
    font-size: 1.2rem;
    margin-right: 1rem;
    transition: all 0.2s; /* Smooth transition for the hover effect below */
}

/* NEW: Light up the icon when the user hovers the card */
a.project-strip:hover .project-icon-wrapper {
    border-color: var(--accent);
    color: var(--primary);
    background: #ffffff;
}

/* Make the text nice and readable */
.project-name {
    font-weight: 700;
    color: var(--primary);
    font-size: 1.05rem;
    margin-bottom: 0;
    line-height: 1.2;
}

.project-desc {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 0;
    
    /* Truncate if too long */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px; 
}

.project-meta {
    font-size: 0.8rem;
    color: #aaa;
    margin-right: 1.5rem;
    font-weight: 500;
}


/* ==========================================
   EMPTY STATE STRIP (Ghost Project)
   ========================================== */

a.project-strip.empty-state {
    /* 1. Dashed Border to signify "Slot Available" */
    border: 1px solid #d0d0d0; 
    border-left: 1px solid #d0d0d0; /* Override the heavy accent */
    
    background: #f9f9f9;
    color: #888; /* Muted text */
    text-align: center;
    
    /* Center the content vertically/horizontally */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. Hover Effect: Lights up like a real project */
a.project-strip.empty-state:hover {
    border-color: var(--accent);
    background: #ffffff;
    color: var(--primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Slight pulse on the icon when hovering */
a.project-strip.empty-state:hover i {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}



/* ==========================================
   REVEAL MODAL FIXES
   ========================================== */
/* Fix for Tall Modals: Scroll content internally instead of the body */
.reveal {
    max-height: 85vh; /* Limit height to 85% of the viewport */
    overflow-y: auto; /* Enable internal scrolling */
    
    /* Optional: Ensure it centers nicely if Foundation's JS math struggles */
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Pro Tip: Make the close button 'sticky' so it doesn't scroll away */
.reveal .close-button {
    position: sticky;
    top: 0.5rem;
    float: right; /* Ensure it stays to the right */
    z-index: 100; /* Keep it above the content */
}


/* ==========================================
   IMAGE LOADING PLACEHOLDERS (PRO SHIMMER)
   ========================================== */
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.img-skeleton {
    /* A soft, neutral gray base */
    background-color: #e5e7eb; 
    
    /* Percentage-based gradient scales perfectly on both thumbnails and 4K images */
    background-image: linear-gradient(
        90deg, 
        #e5e7eb 25%, 
        #f3f4f6 50%, 
        #e5e7eb 75%
    );
    
    background-size: 200% 100%;
    
    /* Slower, elegant sweep */
    animation: skeleton-shimmer 2.5s infinite linear;
    
    color: transparent; 
}


/* ==========================================
   IMAGE VIEWER MODAL
   ========================================== */
.studio-modal-img {
    width: 100%;
    max-height: 85vh; /* This is the silver bullet that stops the scrolling */
    object-fit: contain;
    display: block;
    margin: 0 auto; /* Keeps it perfectly centered inside the modal */
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.8));
}


/* ==========================================
   FULL-SCREEN STUDIO MODALS (Dark Theme)
   ========================================== */
.reveal.full {
    background-color: #1a1a1a; /* Dark studio charcoal */
    border: none;
}

/* Force the close button to be white on dark modals */
.reveal.full .close-button {
    color: #ffffff;
}

.reveal.full .close-button:hover {
    color: #cccccc;
}



/* ==========================================
   STUDIO COMPARISON SLIDER
   ========================================== */
        #compare-modal {
            padding: 0 !important; /* Kills the scrollbar */
            background-color: #1a1a1a;
            border: none;
            overflow: hidden;
            /* REMOVED display: flex; so Foundation can actually hide it! */
        }

        /* NEW: An inner wrapper to handle the dead-centering safely */
        .comp-modal-wrapper {
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .comp-container {
            position: relative;
            display: inline-block; /* Shrink-wraps the image */
            max-width: 95vw;
            max-height: 90vh;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0,0,0,0.8);
        }

        /* The Base Image dictates the size of the container */
        .comp-img-base {
            display: block;
            max-width: 95vw;
            max-height: 90vh;
            width: auto;
            height: auto;
            object-fit: contain; 
        }

        .comp-overlay {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 50%; /* Starts at 50% */
            overflow: hidden;
            border-right: 3px solid var(--accent, #1779ba);
            z-index: 2;
        }

        /* The Overlay Image is mathematically forced to match the Base Image via JS */
        .comp-overlay img {
            display: block;
            height: 100%;
            width: auto;
            max-width: none !important;
        }

		.comp-slider {
            position: absolute;
            z-index: 9;
            cursor: ew-resize;
            width: 40px;
            height: 40px;
            background-color: var(--accent, #1779ba);
            border-radius: 50%;
            
            top: 50%;
            left: 50%; /* <--- THIS IS THE BULLET TO FIX THE LOAD POSITION */
            transform: translate(-50%, -50%);
            
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
            color: white; 
        }