/* Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Hide unwanted duplicate Template Variations section */
.property-section {
    display: none !important;
}

/* Ensure the main template-variations section in control panels remains visible */
.template-variations {
    display: block !important;
}

/* Updated header styles for better readability */
header, .main-header {
    background-color: #34495e;
    color: #ecf0f1;
    padding: 1rem 2rem;
    text-align: center;
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.main-header .logo h1 {
    margin: 0;
    font-size: 1.5rem;
}

.main-header .logo a {
    color: #ecf0f1;
    text-decoration: none;
    font-weight: bold;
}

.main-header nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
}

.main-header nav a {
    color: #ecf0f1;
    text-decoration: none;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.main-header nav a:hover {
    background-color: #2980b9;
    color: white;
}

main {
    flex: 1;
    display: flex;
    padding: 1rem;
    gap: 1rem;
}

footer {
    background-color: #34495e;
    padding: 1rem;
    text-align: center;
    position: relative;
}

.footer-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-controls .primary-button {
    background-color: #27ae60;
    color: white;
    font-size: 18px;
    padding: 14px 28px;
    border-radius: 6px;
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.footer-controls .primary-button:hover {
    background-color: #2ecc71;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.footer-controls .primary-button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .footer-controls .primary-button {
        font-size: 16px;
        padding: 12px 24px;
        width: 100%;
        max-width: 300px;
    }
}

h1 {
    margin: 0;
}

h2 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #2c3e50;
}

button {
    cursor: pointer;
    padding: 8px 16px;
    background-color: #ecf0f1;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
    transition: all 0.2s ease;
}

button:hover {
    background-color: #dde4e6;
}

.primary-button {
    background-color: #3498db;
    color: white;
    font-weight: bold;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
}

/* Layout Styles */
.controls-panel {
    width: 300px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    overflow-y: auto;
    max-height: calc(100vh - 150px);
}

/* Control Panel Section Color Coding */
.controls-panel section {
    border-radius: 6px;
    padding: 12px;
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
}

.controls-panel section h2 {
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Template Size Section - Blue Theme */
.controls-panel .template-size {
    background-color: rgba(52, 152, 219, 0.08);
    border-left-color: #3498db;
}

.controls-panel .template-size h2 {
    color: #2980b9;
}

/* Ready-made Templates Section - Purple Theme */
.controls-panel .ready-templates {
    background-color: rgba(142, 68, 173, 0.08);
    border-left-color: #8e44ad;
}

.controls-panel .ready-templates h2 {
    color: #8e44ad;
}

/* Background Image Section - Green Theme */
.controls-panel .background-upload {
    background-color: rgba(39, 174, 96, 0.08);
    border-left-color: #27ae60;
}

.controls-panel .background-upload h2 {
    color: #27ae60;
}

/* Grid Settings Section - Orange Theme */
.controls-panel .grid-settings {
    background-color: rgba(230, 126, 34, 0.08);
    border-left-color: #e67e22;
}

.controls-panel .grid-settings h2 {
    color: #e67e22;
}

/* Tools Section - Red Theme */
.controls-panel .tools {
    background-color: rgba(231, 76, 60, 0.08);
    border-left-color: #e74c3c;
}

.controls-panel .tools h2 {
    color: #e74c3c;
}

/* Photo Area Properties Panel - Teal Theme */
.controls-panel .photo-area-properties {
    background-color: rgba(22, 160, 133, 0.08);
    border-left-color: #16a085;
    border-top: none;
    padding-top: 0;
    margin-top: -0.5rem;
}

.controls-panel .photo-area-properties h3 {
    color: #16a085;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Text Properties Panel - Blue-Gray Theme */
.controls-panel .text-properties {
    background-color: rgba(52, 73, 94, 0.08);
    border-left-color: #34495e;
    border-top: none;
    padding-top: 0;
    margin-top: -0.5rem;
}

.controls-panel .text-properties h3 {
    color: #34495e;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Decoration Properties Panel - Pink Theme */
.controls-panel .decoration-properties {
    background-color: rgba(155, 89, 182, 0.08);
    border-left-color: #9b59b6;
    border-top: none;
    padding-top: 0;
    margin-top: -0.5rem;
}

.controls-panel .decoration-properties h3 {
    color: #9b59b6;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Section hover effects for better interaction */
.controls-panel section:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

/* Improved button styling for the color-coded sections */
.controls-panel .template-size button.active {
    background-color: #3498db;
    color: white;
    border-color: #2980b9;
}

.controls-panel .ready-templates button {
    background-color: #8e44ad;
    color: white;
    border-color: #7d3c98;
}

.controls-panel .background-upload button {
    background-color: #2ecc71;
    color: white;
    border-color: #27ae60;
}

.controls-panel .background-upload button#remove-background {
    background-color: #e74c3c;
    color: white;
    border-color: #c0392b;
}

.controls-panel .tools button {
    background-color: #e74c3c;
    color: white;
    border: none;
    transition: all 0.2s ease;
}

.controls-panel .tools button:hover {
    background-color: #c0392b;
    transform: translateY(-1px);
}

.design-area {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.canvas-container {
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    background-color: white;
    overflow: hidden;
}

/* Tool Specific Styles */
.template-size .size-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.size-option {
    width: 100%;
}

.size-option.active {
    background-color: #3498db;
    color: white;
}

.tool-button {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

input[type="file"] {
    width: 100%;
    margin-bottom: 10px;
}

/* Text properties panel */
.text-properties {
    border-top: 1px solid #eee;
    padding-top: 1rem;
}

.text-input, .font-select, .font-size, .font-color {
    margin-bottom: 10px;
}

.text-input input, .font-select select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Text input textarea styling */
.text-input textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    min-height: 80px;
    max-height: 200px;
    margin-bottom: 10px;
    transition: border-color 0.2s ease;
}

.text-input textarea:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.font-size {
    display: flex;
    align-items: center;
}

.font-size input {
    flex: 1;
    margin: 0 10px;
}

.font-color input {
    vertical-align: middle;
}

/* Font selection dropdown styling */
.font-select select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    max-height: 300px;
}

.font-select optgroup {
    font-weight: bold;
    color: #2c3e50;
    padding: 5px;
}

.font-select option {
    padding: 5px;
    min-height: 25px;
}

/* Apply styles to each option to show font preview */
/* Sans-Serif Fonts */
.font-select option[value*="Open Sans"] { font-family: 'Open Sans', sans-serif; }
.font-select option[value*="Roboto"] { font-family: 'Roboto', sans-serif; }
.font-select option[value*="Montserrat"] { font-family: 'Montserrat', sans-serif; }
.font-select option[value*="Lato"] { font-family: 'Lato', sans-serif; }
.font-select option[value*="Oswald"] { font-family: 'Oswald', sans-serif; }
.font-select option[value*="Raleway"] { font-family: 'Raleway', sans-serif; }
.font-select option[value*="Source Sans Pro"] { font-family: 'Source Sans Pro', sans-serif; }
.font-select option[value*="Quicksand"] { font-family: 'Quicksand', sans-serif; }
.font-select option[value*="Comfortaa"] { font-family: 'Comfortaa', sans-serif; }
.font-select option[value*="Yanone Kaffeesatz"] { font-family: 'Yanone Kaffeesatz', sans-serif; }
.font-select option[value*="Poppins"] { font-family: 'Poppins', sans-serif; }
.font-select option[value*="Ubuntu"] { font-family: 'Ubuntu', sans-serif; }
.font-select option[value*="Nunito"] { font-family: 'Nunito', sans-serif; }
.font-select option[value*="Nunito Sans"] { font-family: 'Nunito Sans', sans-serif; }
.font-select option[value*="Work Sans"] { font-family: 'Work Sans', sans-serif; }
.font-select option[value*="Rubik"] { font-family: 'Rubik', sans-serif; }
.font-select option[value*="Inter"] { font-family: 'Inter', sans-serif; }
.font-select option[value*="Barlow"] { font-family: 'Barlow', sans-serif; }
.font-select option[value*="Mulish"] { font-family: 'Mulish', sans-serif; }
.font-select option[value*="PT Sans"] { font-family: 'PT Sans', sans-serif; }
.font-select option[value*="Kanit"] { font-family: 'Kanit', sans-serif; }
.font-select option[value*="Noto Sans"] { font-family: 'Noto Sans', sans-serif; }
.font-select option[value*="DM Sans"] { font-family: 'DM Sans', sans-serif; }
.font-select option[value*="Oxygen"] { font-family: 'Oxygen', sans-serif; }
.font-select option[value*="Manrope"] { font-family: 'Manrope', sans-serif; }
.font-select option[value*="Heebo"] { font-family: 'Heebo', sans-serif; }
.font-select option[value*="Archivo"] { font-family: 'Archivo', sans-serif; }
.font-select option[value*="Cabin"] { font-family: 'Cabin', sans-serif; }
.font-select option[value*="Karla"] { font-family: 'Karla', sans-serif; }
.font-select option[value*="Josefin Sans"] { font-family: 'Josefin Sans', sans-serif; }
.font-select option[value*="Assistant"] { font-family: 'Assistant', sans-serif; }
.font-select option[value*="Titillium Web"] { font-family: 'Titillium Web', sans-serif; }
.font-select option[value*="Asap"] { font-family: 'Asap', sans-serif; }
.font-select option[value*="Urbanist"] { font-family: 'Urbanist', sans-serif; }
.font-select option[value*="Lexend"] { font-family: 'Lexend', sans-serif; }
.font-select option[value*="Mulish"] { font-family: 'Mulish', sans-serif; }
.font-select option[value*="PT Sans"] { font-family: 'PT Sans', sans-serif; }
.font-select option[value*="Kanit"] { font-family: 'Kanit', sans-serif; }
.font-select option[value*="Noto Sans"] { font-family: 'Noto Sans', sans-serif; }
.font-select option[value*="DM Sans"] { font-family: 'DM Sans', sans-serif; }
.font-select option[value*="Oxygen"] { font-family: 'Oxygen', sans-serif; }
.font-select option[value*="Manrope"] { font-family: 'Manrope', sans-serif; }
.font-select option[value*="Heebo"] { font-family: 'Heebo', sans-serif; }
.font-select option[value*="Archivo"] { font-family: 'Archivo', sans-serif; }
.font-select option[value*="Cabin"] { font-family: 'Cabin', sans-serif; }
.font-select option[value*="Karla"] { font-family: 'Karla', sans-serif; }
.font-select option[value*="Josefin Sans"] { font-family: 'Josefin Sans', sans-serif; }
.font-select option[value*="Assistant"] { font-family: 'Assistant', sans-serif; }
.font-select option[value*="Titillium Web"] { font-family: 'Titillium Web', sans-serif; }
.font-select option[value*="Asap"] { font-family: 'Asap', sans-serif; }
.font-select option[value*="Urbanist"] { font-family: 'Urbanist', sans-serif; }
.font-select option[value*="Lexend"] { font-family: 'Lexend', sans-serif; }

/* Serif Fonts */
.font-select option[value*="Merriweather"] { font-family: 'Merriweather', serif; }
.font-select option[value*="Playfair Display"] { font-family: 'Playfair Display', serif; }
.font-select option[value*="Abril Fatface"] { font-family: 'Abril Fatface', serif; }
.font-select option[value*="Lora"] { font-family: 'Lora', serif; }
.font-select option[value*="EB Garamond"] { font-family: 'EB Garamond', serif; }
.font-select option[value*="Cormorant Garamond"] { font-family: 'Cormorant Garamond', serif; }
.font-select option[value*="Libre Baskerville"] { font-family: 'Libre Baskerville', serif; }
.font-select option[value*="Crimson Text"] { font-family: 'Crimson Text', serif; }
.font-select option[value*="Spectral"] { font-family: 'Spectral', serif; }
.font-select option[value*="Noto Serif"] { font-family: 'Noto Serif', serif; }
.font-select option[value*="Bitter"] { font-family: 'Bitter', serif; }
.font-select option[value*="Playfair Display SC"] { font-family: 'Playfair Display SC', serif; }
.font-select option[value*="Vollkorn"] { font-family: 'Vollkorn', serif; }
.font-select option[value*="DM Serif Display"] { font-family: 'DM Serif Display', serif; }
.font-select option[value*="DM Serif Text"] { font-family: 'DM Serif Text', serif; }
.font-select option[value*="Abhaya Libre"] { font-family: 'Abhaya Libre', serif; }
.font-select option[value*="Cinzel"] { font-family: 'Cinzel', serif; }
.font-select option[value*="Bree Serif"] { font-family: 'Bree Serif', serif; }
.font-select option[value*="Alegreya"] { font-family: 'Alegreya', serif; }
.font-select option[value*="Source Serif Pro"] { font-family: 'Source Serif Pro', serif; }
.font-select option[value*="Cardo"] { font-family: 'Cardo', serif; }
.font-select option[value*="PT Serif"] { font-family: 'PT Serif', serif; }
.font-select option[value*="Josefin Slab"] { font-family: 'Josefin Slab', serif; }

/* Script & Calligraphy */
.font-select option[value*="Dancing Script"] { font-family: 'Dancing Script', cursive; }
.font-select option[value*="Pacifico"] { font-family: 'Pacifico', cursive; }
.font-select option[value*="Great Vibes"] { font-family: 'Great Vibes', cursive; }
.font-select option[value*="Sacramento"] { font-family: 'Sacramento', cursive; }
.font-select option[value*="Satisfy"] { font-family: 'Satisfy', cursive; }
.font-select option[value*="Kaushan Script"] { font-family: 'Kaushan Script', cursive; }
.font-select option[value*="Lobster"] { font-family: 'Lobster', cursive; }
.font-select option[value*="Courgette"] { font-family: 'Courgette', cursive; }
.font-select option[value*="Lobster Two"] { font-family: 'Lobster Two', cursive; }
.font-select option[value*="Tangerine"] { font-family: 'Tangerine', cursive; }
.font-select option[value*="Allura"] { font-family: 'Allura', cursive; }
.font-select option[value*="Niconne"] { font-family: 'Niconne', cursive; }
.font-select option[value*="Berkshire Swash"] { font-family: 'Berkshire Swash', cursive; }
.font-select option[value*="Alex Brush"] { font-family: 'Alex Brush', cursive; }
.font-select option[value*="Marck Script"] { font-family: 'Marck Script', cursive; }
.font-select option[value*="Pinyon Script"] { font-family: 'Pinyon Script', cursive; }
.font-select option[value*="Mr De Haviland"] { font-family: 'Mr De Haviland', cursive; }
.font-select option[value*="Rouge Script"] { font-family: 'Rouge Script', cursive; }
.font-select option[value*="Italianno"] { font-family: 'Italianno', cursive; }
.font-select option[value*="Petit Formal Script"] { font-family: 'Petit Formal Script', cursive; }
.font-select option[value*="Birthstone"] { font-family: 'Birthstone', cursive; }
.font-select option[value*="Playball"] { font-family: 'Playball', cursive; }
.font-select option[value*="Mrs Saint Delafield"] { font-family: 'Mrs Saint Delafield', cursive; }
.font-select option[value*="Herr Von Muellerhoff"] { font-family: 'Herr Von Muellerhoff', cursive; }
.font-select option[value*="Kristi"] { font-family: 'Kristi', cursive; }
.font-select option[value*="Nothing You Could Do"] { font-family: 'Nothing You Could Do', cursive; }
.font-select option[value*="La Belle Aurore"] { font-family: 'La Belle Aurore', cursive; }

/* Playful & Fun */
.font-select option[value*="Shadows Into Light"] { font-family: 'Shadows Into Light', cursive; }
.font-select option[value*="Amatic SC"] { font-family: 'Amatic SC', cursive; }
.font-select option[value*="Caveat"] { font-family: 'Caveat', cursive; }
.font-select option[value*="Indie Flower"] { font-family: 'Indie Flower', cursive; }
.font-select option[value*="Permanent Marker"] { font-family: 'Permanent Marker', cursive; }
.font-select option[value*="Fredoka One"] { font-family: 'Fredoka One', cursive; }
.font-select option[value*="Concert One"] { font-family: 'Concert One', cursive; }
.font-select option[value*="Righteous"] { font-family: 'Righteous', cursive; }
.font-select option[value*="Anton"] { font-family: 'Anton', sans-serif; }
.font-select option[value*="Architects Daughter"] { font-family: 'Architects Daughter', cursive; }
.font-select option[value*="Bubblegum Sans"] { font-family: 'Bubblegum Sans', cursive; }
.font-select option[value*="Comic Neue"] { font-family: 'Comic Neue', cursive; }
.font-select option[value*="Creepster"] { font-family: 'Creepster', cursive; }
.font-select option[value*="Bangers"] { font-family: 'Bangers', cursive; }
.font-select option[value*="Schoolbell"] { font-family: 'Schoolbell', cursive; }
.font-select option[value*="Patrick Hand"] { font-family: 'Patrick Hand', cursive; }
.font-select option[value*="Kranky"] { font-family: 'Kranky', cursive; }
.font-select option[value*="Cherry Cream Soda"] { font-family: 'Cherry Cream Soda', cursive; }
.font-select option[value*="Luckiest Guy"] { font-family: 'Luckiest Guy', cursive; }
.font-select option[value*="Bungee"] { font-family: 'Bungee', cursive; }
.font-select option[value*="Special Elite"] { font-family: 'Special Elite', cursive; }
.font-select option[value*="VT323"] { font-family: 'VT323', monospace; }
.font-select option[value*="Press Start 2P"] { font-family: 'Press Start 2P', cursive; }
.font-select option[value*="Russo One"] { font-family: 'Russo One', sans-serif; }
.font-select option[value*="Paytone One"] { font-family: 'Paytone One', sans-serif; }
.font-select option[value*="Carter One"] { font-family: 'Carter One', cursive; }

/* Elegant & Formal */
.font-select option[value*="Cormorant"] { font-family: 'Cormorant', serif; }
.font-select option[value*="Marcellus"] { font-family: 'Marcellus', serif; }
.font-select option[value*="Trirong"] { font-family: 'Trirong', serif; }
.font-select option[value*="Bodoni Moda"] { font-family: 'Bodoni Moda', serif; }
.font-select option[value*="Bellefair"] { font-family: 'Bellefair', serif; }
.font-select option[value*="Elsie"] { font-family: 'Elsie', cursive; }
.font-select option[value*="Stoke"] { font-family: 'Stoke', serif; }
.font-select option[value*="Jacques Francois"] { font-family: 'Jacques Francois', serif; }
.font-select option[value*="Gilda Display"] { font-family: 'Gilda Display', serif; }
.font-select option[value*="Prata"] { font-family: 'Prata', serif; }
.font-select option[value*="Libre Caslon Text"] { font-family: 'Libre Caslon Text', serif; }
.font-select option[value*="Recife"] { font-family: 'Recife', serif; }
.font-select option[value*="Playfair"] { font-family: 'Playfair', serif; }
.font-select option[value*="Ibarra Real Nova"] { font-family: 'Ibarra Real Nova', serif; }
.font-select option[value*="Majesti Banner"] { font-family: 'Majesti Banner', serif; }

/* Modern & Geometric */
.font-select option[value*="Futura"] { font-family: 'Futura', sans-serif; }
.font-select option[value*="Montserrat Alternates"] { font-family: 'Montserrat Alternates', sans-serif; }
.font-select option[value*="Exo 2"] { font-family: 'Exo 2', sans-serif; }
.font-select option[value*="Rajdhani"] { font-family: 'Rajdhani', sans-serif; }
.font-select option[value*="Orbitron"] { font-family: 'Orbitron', sans-serif; }
.font-select option[value*="Syne"] { font-family: 'Syne', sans-serif; }
.font-select option[value*="Space Grotesk"] { font-family: 'Space Grotesk', sans-serif; }
.font-select option[value*="Syncopate"] { font-family: 'Syncopate', sans-serif; }
.font-select option[value*="Audiowide"] { font-family: 'Audiowide', cursive; }
.font-select option[value*="Michroma"] { font-family: 'Michroma', sans-serif; }
.font-select option[value*="Nova Square"] { font-family: 'Nova Square', cursive; }
.font-select option[value*="Iceland"] { font-family: 'Iceland', cursive; }
.font-select option[value*="Electrolize"] { font-family: 'Electrolize', sans-serif; }
.font-select option[value*="Goldman"] { font-family: 'Goldman', cursive; }

/* Handwritten */
.font-select option[value*="Gochi Hand"] { font-family: 'Gochi Hand', cursive; }
.font-select option[value*="Coming Soon"] { font-family: 'Coming Soon', cursive; }
.font-select option[value*="Annie Use Your Telescope"] { font-family: 'Annie Use Your Telescope', cursive; }
.font-select option[value*="Kalam"] { font-family: 'Kalam', cursive; }
.font-select option[value*="Rock Salt"] { font-family: 'Rock Salt', cursive; }
.font-select option[value*="Just Another Hand"] { font-family: 'Just Another Hand', cursive; }
.font-select option[value*="Reenie Beanie"] { font-family: 'Reenie Beanie', cursive; }
.font-select option[value*="Gloria Hallelujah"] { font-family: 'Gloria Hallelujah', cursive; }
.font-select option[value*="Sriracha"] { font-family: 'Sriracha', cursive; }
.font-select option[value*="Short Stack"] { font-family: 'Short Stack', cursive; }
.font-select option[value*="Covered By Your Grace"] { font-family: 'Covered By Your Grace', cursive; }
.font-select option[value*="Crafty Girls"] { font-family: 'Crafty Girls', cursive; }
.font-select option[value*="Handlee"] { font-family: 'Handlee', cursive; }
.font-select option[value*="Just Me Again Down Here"] { font-family: 'Just Me Again Down Here', cursive; }
.font-select option[value*="Neucha"] { font-family: 'Neucha', cursive; }

/* Retro & Vintage */
.font-select option[value*="Alfa Slab One"] { font-family: 'Alfa Slab One', cursive; }
.font-select option[value*="Ultra"] { font-family: 'Ultra', serif; }
.font-select option[value*="Monoton"] { font-family: 'Monoton', cursive; }
.font-select option[value*="Fascinate Inline"] { font-family: 'Fascinate Inline', cursive; }
.font-select option[value*="Rye"] { font-family: 'Rye', cursive; }
.font-select option[value*="Oleo Script"] { font-family: 'Oleo Script', cursive; }
.font-select option[value*="Vast Shadow"] { font-family: 'Vast Shadow', cursive; }
.font-select option[value*="Sancreek"] { font-family: 'Sancreek', cursive; }
.font-select option[value*="Faster One"] { font-family: 'Faster One', cursive; }
.font-select option[value*="Ruslan Display"] { font-family: 'Ruslan Display', cursive; }
.font-select option[value*="Sarina"] { font-family: 'Sarina', cursive; }
.font-select option[value*="Fugaz One"] { font-family: 'Fugaz One', cursive; }
.font-select option[value*="Henny Penny"] { font-family: 'Henny Penny', cursive; }
.font-select option[value*="Londrina Outline"] { font-family: 'Londrina Outline', cursive; }

/* Font size controls */
.font-size {
    margin-bottom: 15px;
}

.font-size-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.font-size input[type="range"] {
    width: 100%;
    margin: 0;
}

.font-size-input-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
}

.font-size-input-wrapper input[type="number"] {
    width: 70px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: right;
}

.font-size-input-wrapper span {
    color: #666;
}

/* Text rotation controls */
.text-rotation {
    margin-bottom: 15px;
}

.text-rotation-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.text-rotation-controls > div:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rotation-button {
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.rotation-button:hover {
    background-color: #2980b9;
}

.rotation-button:active {
    background-color: #21618c;
    transform: scale(0.95);
}

.text-rotation input[type="range"] {
    width: 100%;
    margin: 0;
}

.text-rotation-input-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
}

.text-rotation-input-wrapper input[type="number"] {
    width: 70px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: right;
}

.text-rotation-input-wrapper span {
    color: #666;
}

/* Decoration properties panel */
.decoration-properties {
    border-top: 1px solid #eee;
    padding-top: 1rem;
}

/* Decoration source tabs */
.decoration-source-tabs {
    display: flex;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
}

.decoration-tab {
    padding: 8px 15px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    margin-right: 5px;
    cursor: pointer;
}

.decoration-tab.active {
    background: #fff;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
    font-weight: bold;
}

/* Decoration library */
.decoration-library {
    margin-bottom: 15px;
}

.decoration-categories {
    margin-bottom: 10px;
}

.decoration-categories select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.decoration-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.decoration-grid-item {
    position: relative;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
    transition: border-color 0.2s;
}

.decoration-grid-item:hover {
    border-color: #3498db;
}

.decoration-grid-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.decoration-grid-item .decoration-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.loading-indicator {
    grid-column: span 3;
    text-align: center;
    padding: 20px;
    color: #666;
}

.decoration-upload {
    margin-bottom: 15px;
}

.decoration-upload label {
    display: block;
    margin-bottom: 5px;
}

.decoration-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.decoration-controls button {
    flex: 1;
    min-width: 100px;
    white-space: nowrap;
}

.flip-controls {
    display: flex;
    gap: 5px;
    width: 100%;
}

.flip-controls button {
    flex: 1;
}

/* Canvas elements */
canvas {
    display: block;
}

/* Resizable photo areas */
.photo-area {
    position: absolute;
    border: 2px dashed #3498db;
    background-color: transparent;
    cursor: move;
}

.photo-area .resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #3498db;
    border: 1px solid white;
}

.photo-area .resize-handle.top-left {
    top: -5px;
    left: -5px;
    cursor: nwse-resize;
}

.photo-area .resize-handle.top-right {
    top: -5px;
    right: -5px;
    cursor: nesw-resize;
}

.photo-area .resize-handle.bottom-left {
    bottom: -5px;
    left: -5px;
    cursor: nesw-resize;
}

.photo-area .resize-handle.bottom-right {
    bottom: -5px;
    right: -5px;
    cursor: nwse-resize;
}

/* Resizable elements */
.draggable-element {
    position: absolute;
    cursor: move;
}

.decoration-image {
    border: 2px solid transparent;
}

.decoration-image.selected {
    border: 2px solid #ff0000;
}

.decoration-image .resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #ff4757;
    border: 1px solid white;
    border-radius: 50%;
}

/* Grid Settings */
.grid-settings {
    border-top: 1px solid #eee;
    padding-top: 1rem;
}

.grid-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.grid-toggle label,
.snap-toggle label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.grid-toggle input,
.snap-toggle input {
    margin-right: 8px;
}

.grid-size {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}

.grid-size input {
    margin: 8px 0;
}

/* Photo Area Properties panel */
.photo-area-properties {
    border-top: 1px solid #eee;
    padding-top: 1rem;
}

.stroke-toggle label,
.rounded-corners-toggle label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 10px;
}

.stroke-toggle input,
.rounded-corners-toggle input {
    margin-right: 8px;
}

.stroke-properties,
.rounded-corners-properties {
    margin-bottom: 15px;
}

.stroke-width,
.corner-radius {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.stroke-width input,
.corner-radius input {
    margin: 8px 0;
}

.stroke-color {
    margin-bottom: 10px;
}

.stroke-color label {
    display: inline-block;
    margin-right: 10px;
}

.corner-selection {
    margin-top: 12px;
    margin-bottom: 15px;
}

.corners-checkboxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 8px;
    margin-top: 8px;
}

.corner-checkbox {
    display: flex;
    align-items: center;
}

.corner-checkbox input[type="checkbox"] {
    margin-right: 5px;
}

.corner-checkbox label {
    font-size: 0.9rem;
    cursor: pointer;
}

/* Text Stroke and Shadow Controls */
.text-stroke-toggle,
.text-shadow-toggle {
    margin-top: 12px;
}

.text-stroke-properties,
.text-shadow-properties {
    background-color: rgba(52, 73, 94, 0.05);
    padding: 10px;
    margin-top: 8px;
    border-radius: 4px;
}

.text-stroke-width,
.text-stroke-color,
.text-shadow-blur,
.text-shadow-color {
    margin-bottom: 10px;
}

.text-shadow-offset {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.text-shadow-offset-x,
.text-shadow-offset-y {
    display: flex;
    align-items: center;
    gap: 8px;
}

.text-shadow-offset-x label,
.text-shadow-offset-y label {
    min-width: 70px;
}

.text-shadow-offset-x input,
.text-shadow-offset-y input {
    flex-grow: 1;
}

.text-stroke-width input,
.text-shadow-blur input {
    width: 70%;
    display: inline-block;
    margin-right: 10px;
}

#text-stroke-width-value,
#text-shadow-blur-value,
#text-shadow-offset-x-value,
#text-shadow-offset-y-value {
    display: inline-block;
    width: 40px;
    text-align: right;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    main {
        flex-direction: column;
        padding: 0;
        gap: 0;
    }
    
    .controls-panel {
        width: 100%;
        max-height: none;
        border-radius: 0;
        padding: 12px;
        overflow-y: visible;
        order: 2;
    }
    
    .design-area {
        width: 100%;
        height: 60vh;
        min-height: 300px;
        border-radius: 0;
        flex: none;
        overflow: auto;
        order: 1;
        padding: 10px;
    }
    
    .canvas-container {
        margin: auto;
        touch-action: none; /* Prevent browser's default touch actions */
    }
    
    /* Improved mobile controls */
    .tool-button {
        padding: 12px 16px;
        margin-bottom: 15px;
    }
    
    /* Make buttons more touch-friendly */
    button {
        min-height: 44px; /* Apple's recommendation for touch targets */
    }
    
    /* Add some space at the bottom of the page for better scrolling */
    footer {
        padding-bottom: 20px;
    }
    
    /* Make input controls bigger and easier to tap */
    input[type="range"],
    input[type="color"],
    input[type="text"],
    input[type="number"],
    select {
        height: 44px;
    }
    
    /* Better status messages for mobile */
    .status-message {
        width: 90%;
        left: 5%;
        right: 5%;
        bottom: 20px;
        padding: 12px;
        font-size: 16px;
    }
    
    /* Enhanced font select styling for mobile */
    .font-select select {
        font-size: 16px; /* Prevent iOS zoom on focus */
        -webkit-appearance: listbox; /* Use listbox appearance for iOS */
        -moz-appearance: listbox; /* Use listbox appearance for Firefox */
        appearance: listbox;
    }
    
    .font-select select option {
        font-size: 16px;
        padding: 10px 8px; /* More touch-friendly padding */
        min-height: 35px; /* Ensure options are tall enough for touch */
    }
}

/* Force proper font rendering on Android devices */
@supports (-webkit-overflow-scrolling: touch) {
    .font-select select option {
        font-family: inherit; /* Reset to ensure proper rendering */
    }
    
    /* Re-apply all font families to ensure they work on iOS/Android */
    /* Sans-Serif Fonts */
    .font-select option[value*="Open Sans"] { font-family: 'Open Sans', sans-serif !important; }
    .font-select option[value*="Roboto"] { font-family: 'Roboto', sans-serif !important; }
    .font-select option[value*="Montserrat"] { font-family: 'Montserrat', sans-serif !important; }
    /* Continue with other fonts... only showing a few for brevity */
    
    /* Script & Calligraphy */
    .font-select option[value*="Dancing Script"] { font-family: 'Dancing Script', cursive !important; }
    .font-select option[value*="Pacifico"] { font-family: 'Pacifico', cursive !important; }
    
    /* Using !important to override browser's native styling */
}

/* Custom mobile font selector - iOS compatible version */
.custom-font-select {
    position: relative;
    width: 100%;
    font-size: 16px;
    margin-bottom: 15px;
    z-index: 100;
}

/* Style the button that shows the selected font */
.selected-font {
    width: 100%;
    min-height: 44px;
    padding: 10px 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: left;
    cursor: pointer;
    font-size: 16px; /* Prevent zoom on iOS */
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.selected-font::after {
    content: "▼";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #999;
    pointer-events: none;
}

/* Style the dropdown container */
.font-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: 300px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1001;
}

/* Search box styling */
.font-search-container {
    position: sticky;
    top: 0;
    padding: 10px;
    background: #f9f9f9;
    border-bottom: 1px solid #eee;
    z-index: 2;
}

.font-search {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px; /* Prevent zoom on iOS */
}

/* Font category headers */
.font-category {
    padding: 10px;
    font-weight: bold;
    background-color: #f5f5f5;
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
    position: sticky;
    top: 54px; /* Height of search box + padding */
    z-index: 1;
}

/* Font option buttons */
.font-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 15px;
    border: none;
    background: white;
    cursor: pointer;
    min-height: 44px; /* iOS minimum touch target */
    font-size: 16px; /* Prevent zoom on iOS */
    border-bottom: 1px solid #f5f5f5;
}

.font-option:hover, 
.font-option:focus {
    background-color: #f0f0f0;
}

/* iOS-specific enhancements */
.ios-font-select .font-dropdown {
    -webkit-backdrop-filter: blur(5px);
}

.ios-font-select .font-option {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Special styles for specific font families */
/* Sans-serif fonts */
.font-option[data-value*="Open Sans"] { font-family: 'Open Sans', sans-serif !important; }
.font-option[data-value*="Roboto"] { font-family: 'Roboto', sans-serif !important; }
.font-option[data-value*="Montserrat"] { font-family: 'Montserrat', sans-serif !important; }
.font-option[data-value*="Lato"] { font-family: 'Lato', sans-serif !important; }
.font-option[data-value*="Oswald"] { font-family: 'Oswald', sans-serif !important; }

/* Serif fonts */
.font-option[data-value*="Merriweather"] { font-family: 'Merriweather', serif !important; }
.font-option[data-value*="Playfair"] { font-family: 'Playfair Display', serif !important; }
.font-option[data-value*="Lora"] { font-family: 'Lora', serif !important; }
.font-option[data-value*="Garamond"] { font-family: 'EB Garamond', serif !important; }

/* Cursive fonts */
.font-option[data-value*="Dancing Script"] { font-family: 'Dancing Script', cursive !important; }
.font-option[data-value*="Pacifico"] { font-family: 'Pacifico', cursive !important; }
.font-option[data-value*="Great Vibes"] { font-family: 'Great Vibes', cursive !important; }
.font-option[data-value*="Lobster"] { font-family: 'Lobster', cursive !important; }

/* iPad-specific font selector styles */
.ipad-font-select .selected-font,
.ipad-font-select .font-option {
    /* Use system-ui as fallback before the custom font */
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}

.ipad-font-select .font-dropdown {
    max-height: 50vh; /* Larger dropdown for iPad's bigger screen */
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    -webkit-overflow-scrolling: touch;
}

.ipad-font-select .font-category {
    padding: 12px 15px;
    background: #f0f0f0;
    font-size: 14px;
    font-weight: bold;
}

.ipad-font-select .font-option {
    padding: 15px;
    min-height: 50px;
    font-size: 18px;
    border-bottom: 1px solid #f0f0f0;
}

/* iPhone-specific styles */
.iphone-font-select .selected-font {
    font-size: 16px;
    padding: 10px 12px;
    min-height: 44px;
    border-radius: 6px;
}

.iphone-font-select .font-dropdown {
    max-height: 300px;
    border-radius: 6px;
}

.iphone-font-select .font-category {
    font-size: 12px;
    padding: 10px;
}

.iphone-font-select .font-option {
    padding: 12px 10px;
    min-height: 44px;
    line-height: 1.2;
}

.iphone-font {
    /* Force iOS to respect inline font styling with !important */
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}

/* Apply more specific styles for iPad font options */
@supports (-webkit-touch-callout: none) and (min-width: 768px) {
    /* Target iPad specifically */
    .font-option[data-value] {
        /* Force custom font rendering on iPad */
        font-family: inherit !important;
    }
    
    /* Reset and then apply iPad-specific font styles */
    .ipad-font-select .font-option {
        /* Reset to system font first */
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
        transform: translateZ(0); /* Force GPU rendering */
    }
    
    /* Specific selectors for each font family on iPad */
    .ipad-font-select .font-option[data-value*="Open Sans"] { font-family: 'Open Sans', sans-serif !important; }
    .ipad-font-select .font-option[data-value*="Roboto"] { font-family: 'Roboto', sans-serif !important; }
    .ipad-font-select .font-option[data-value*="Montserrat"] { font-family: 'Montserrat', sans-serif !important; }
    .ipad-font-select .font-option[data-value*="Lato"] { font-family: 'Lato', sans-serif !important; }
    .ipad-font-select .font-option[data-value*="Dancing Script"] { font-family: 'Dancing Script', cursive !important; }
    .ipad-font-select .font-option[data-value*="Pacifico"] { font-family: 'Pacifico', cursive !important; }
    .ipad-font-select .font-option[data-value*="Merriweather"] { font-family: 'Merriweather', serif !important; }
    .ipad-font-select .font-option[data-value*="Playfair"] { font-family: 'Playfair Display', serif !important; }
    /* Additional font styles would be added here for all fonts */
}

/* iPhone-specific font styles (smaller screens) */
@supports (-webkit-touch-callout: none) and (max-width: 767px) {
    /* Target iPhone specifically */
    .iphone-font-select .font-option {
        /* Special handling for iPhone */
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    }
    
    /* Apply font styles with higher specificity for iPhone */
    .iphone-font-select .font-option[data-value*="Open Sans"] { font-family: 'Open Sans', sans-serif !important; }
    .iphone-font-select .font-option[data-value*="Roboto"] { font-family: 'Roboto', sans-serif !important; }
    .iphone-font-select .font-option[data-value*="Montserrat"] { font-family: 'Montserrat', sans-serif !important; }
    .iphone-font-select .font-option[data-value*="Lato"] { font-family: 'Lato', sans-serif !important; }
    .iphone-font-select .font-option[data-value*="Dancing Script"] { font-family: 'Dancing Script', cursive !important; }
    .iphone-font-select .font-option[data-value*="Pacifico"] { font-family: 'Pacifico', cursive !important; }
    .iphone-font-select .font-option[data-value*="Great Vibes"] { font-family: 'Great Vibes', cursive !important; }
    .iphone-font-select .font-option[data-value*="Merriweather"] { font-family: 'Merriweather', serif !important; }
    .iphone-font-select .font-option[data-value*="Playfair Display"] { font-family: 'Playfair Display', serif !important; }
    /* Additional font styles would be added here for all fonts */
    
    /* Use data-fontFamily attribute as another way to apply styles */
    .iphone-font-select .font-option[data-font-family] {
        font-family: attr(data-font-family) !important;
    }
}

/* Mac-specific font selector styles */
.mac-font-select .selected-font,
.mac-font-select .font-option {
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.mac-font-select .font-option {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Apply specific font styles for Mac - Sans-Serif Fonts */
.mac-font-select .font-option[data-value*="Open Sans"] { font-family: 'Open Sans', sans-serif !important; }
.mac-font-select .font-option[data-value*="Roboto"] { font-family: 'Roboto', sans-serif !important; }
.mac-font-select .font-option[data-value*="Montserrat"] { font-family: 'Montserrat', sans-serif !important; }
.mac-font-select .font-option[data-value*="Lato"] { font-family: 'Lato', sans-serif !important; }
.mac-font-select .font-option[data-value*="Oswald"] { font-family: 'Oswald', sans-serif !important; }
.mac-font-select .font-option[data-value*="Raleway"] { font-family: 'Raleway', sans-serif !important; }
.mac-font-select .font-option[data-value*="Source Sans Pro"] { font-family: 'Source Sans Pro', sans-serif !important; }
.mac-font-select .font-option[data-value*="Quicksand"] { font-family: 'Quicksand', sans-serif !important; }
.mac-font-select .font-option[data-value*="Comfortaa"] { font-family: 'Comfortaa', sans-serif !important; }
.mac-font-select .font-option[data-value*="Yanone Kaffeesatz"] { font-family: 'Yanone Kaffeesatz', sans-serif !important; }
.mac-font-select .font-option[data-value*="Poppins"] { font-family: 'Poppins', sans-serif !important; }
.mac-font-select .font-option[data-value*="Ubuntu"] { font-family: 'Ubuntu', sans-serif !important; }
.mac-font-select .font-option[data-value*="Nunito"] { font-family: 'Nunito', sans-serif !important; }
.mac-font-select .font-option[data-value*="Nunito Sans"] { font-family: 'Nunito Sans', sans-serif !important; }
.mac-font-select .font-option[data-value*="Work Sans"] { font-family: 'Work Sans', sans-serif !important; }
.mac-font-select .font-option[data-value*="Rubik"] { font-family: 'Rubik', sans-serif !important; }
.mac-font-select .font-option[data-value*="Inter"] { font-family: 'Inter', sans-serif !important; }
.mac-font-select .font-option[data-value*="Barlow"] { font-family: 'Barlow', sans-serif !important; }
.mac-font-select .font-option[data-value*="Mulish"] { font-family: 'Mulish', sans-serif !important; }
.mac-font-select .font-option[data-value*="PT Sans"] { font-family: 'PT Sans', sans-serif !important; }
.mac-font-select .font-option[data-value*="Kanit"] { font-family: 'Kanit', sans-serif !important; }
.mac-font-select .font-option[data-value*="Noto Sans"] { font-family: 'Noto Sans', sans-serif !important; }
.mac-font-select .font-option[data-value*="DM Sans"] { font-family: 'DM Sans', sans-serif !important; }
.mac-font-select .font-option[data-value*="Oxygen"] { font-family: 'Oxygen', sans-serif !important; }
.mac-font-select .font-option[data-value*="Manrope"] { font-family: 'Manrope', sans-serif !important; }
.mac-font-select .font-option[data-value*="Heebo"] { font-family: 'Heebo', sans-serif !important; }
.mac-font-select .font-option[data-value*="Archivo"] { font-family: 'Archivo', sans-serif !important; }
.mac-font-select .font-option[data-value*="Cabin"] { font-family: 'Cabin', sans-serif !important; }
.mac-font-select .font-option[data-value*="Karla"] { font-family: 'Karla', sans-serif !important; }
.mac-font-select .font-option[data-value*="Josefin Sans"] { font-family: 'Josefin Sans', sans-serif !important; }
.mac-font-select .font-option[data-value*="Assistant"] { font-family: 'Assistant', sans-serif !important; }
.mac-font-select .font-option[data-value*="Titillium Web"] { font-family: 'Titillium Web', sans-serif !important; }
.mac-font-select .font-option[data-value*="Asap"] { font-family: 'Asap', sans-serif !important; }
.mac-font-select .font-option[data-value*="Urbanist"] { font-family: 'Urbanist', sans-serif !important; }
.mac-font-select .font-option[data-value*="Lexend"] { font-family: 'Lexend', sans-serif !important; }

/* Serif Fonts */
.mac-font-select .font-option[data-value*="Merriweather"] { font-family: 'Merriweather', serif !important; }
.mac-font-select .font-option[data-value*="Playfair Display"] { font-family: 'Playfair Display', serif !important; }
.mac-font-select .font-option[data-value*="Abril Fatface"] { font-family: 'Abril Fatface', serif !important; }
.mac-font-select .font-option[data-value*="Lora"] { font-family: 'Lora', serif !important; }
.mac-font-select .font-option[data-value*="EB Garamond"] { font-family: 'EB Garamond', serif !important; }
.mac-font-select .font-option[data-value*="Cormorant Garamond"] { font-family: 'Cormorant Garamond', serif !important; }
.mac-font-select .font-option[data-value*="Libre Baskerville"] { font-family: 'Libre Baskerville', serif !important; }
.mac-font-select .font-option[data-value*="Crimson Text"] { font-family: 'Crimson Text', serif !important; }
.mac-font-select .font-option[data-value*="Spectral"] { font-family: 'Spectral', serif !important; }
.mac-font-select .font-option[data-value*="Noto Serif"] { font-family: 'Noto Serif', serif !important; }
.mac-font-select .font-option[data-value*="Bitter"] { font-family: 'Bitter', serif !important; }
.mac-font-select .font-option[data-value*="Playfair Display SC"] { font-family: 'Playfair Display SC', serif !important; }
.mac-font-select .font-option[data-value*="Vollkorn"] { font-family: 'Vollkorn', serif !important; }
.mac-font-select .font-option[data-value*="DM Serif Display"] { font-family: 'DM Serif Display', serif !important; }
.mac-font-select .font-option[data-value*="DM Serif Text"] { font-family: 'DM Serif Text', serif !important; }
.mac-font-select .font-option[data-value*="Abhaya Libre"] { font-family: 'Abhaya Libre', serif !important; }
.mac-font-select .font-option[data-value*="Cinzel"] { font-family: 'Cinzel', serif !important; }
.mac-font-select .font-option[data-value*="Bree Serif"] { font-family: 'Bree Serif', serif !important; }
.mac-font-select .font-option[data-value*="Alegreya"] { font-family: 'Alegreya', serif !important; }
.mac-font-select .font-option[data-value*="Source Serif Pro"] { font-family: 'Source Serif Pro', serif !important; }
.mac-font-select .font-option[data-value*="Cardo"] { font-family: 'Cardo', serif !important; }
.mac-font-select .font-option[data-value*="PT Serif"] { font-family: 'PT Serif', serif !important; }
.mac-font-select .font-option[data-value*="Josefin Slab"] { font-family: 'Josefin Slab', serif !important; }

/* Script & Calligraphy */
.mac-font-select .font-option[data-value*="Dancing Script"] { font-family: 'Dancing Script', cursive !important; }
.mac-font-select .font-option[data-value*="Pacifico"] { font-family: 'Pacifico', cursive !important; }
.mac-font-select .font-option[data-value*="Great Vibes"] { font-family: 'Great Vibes', cursive !important; }
.mac-font-select .font-option[data-value*="Sacramento"] { font-family: 'Sacramento', cursive !important; }
.mac-font-select .font-option[data-value*="Satisfy"] { font-family: 'Satisfy', cursive !important; }
.mac-font-select .font-option[data-value*="Kaushan Script"] { font-family: 'Kaushan Script', cursive !important; }
.mac-font-select .font-option[data-value*="Lobster"] { font-family: 'Lobster', cursive !important; }
.mac-font-select .font-option[data-value*="Courgette"] { font-family: 'Courgette', cursive !important; }
.mac-font-select .font-option[data-value*="Lobster Two"] { font-family: 'Lobster Two', cursive !important; }
.mac-font-select .font-option[data-value*="Tangerine"] { font-family: 'Tangerine', cursive !important; }
.mac-font-select .font-option[data-value*="Allura"] { font-family: 'Allura', cursive !important; }
.mac-font-select .font-option[data-value*="Niconne"] { font-family: 'Niconne', cursive !important; }
.mac-font-select .font-option[data-value*="Berkshire Swash"] { font-family: 'Berkshire Swash', cursive !important; }
.mac-font-select .font-option[data-value*="Alex Brush"] { font-family: 'Alex Brush', cursive !important; }
.mac-font-select .font-option[data-value*="Marck Script"] { font-family: 'Marck Script', cursive !important; }
.mac-font-select .font-option[data-value*="Pinyon Script"] { font-family: 'Pinyon Script', cursive !important; }
.mac-font-select .font-option[data-value*="Mr De Haviland"] { font-family: 'Mr De Haviland', cursive !important; }
.mac-font-select .font-option[data-value*="Rouge Script"] { font-family: 'Rouge Script', cursive !important; }
.mac-font-select .font-option[data-value*="Italianno"] { font-family: 'Italianno', cursive !important; }
.mac-font-select .font-option[data-value*="Petit Formal Script"] { font-family: 'Petit Formal Script', cursive !important; }
.mac-font-select .font-option[data-value*="Birthstone"] { font-family: 'Birthstone', cursive !important; }
.mac-font-select .font-option[data-value*="Playball"] { font-family: 'Playball', cursive !important; }
.mac-font-select .font-option[data-value*="Mrs Saint Delafield"] { font-family: 'Mrs Saint Delafield', cursive !important; }
.mac-font-select .font-option[data-value*="Herr Von Muellerhoff"] { font-family: 'Herr Von Muellerhoff', cursive !important; }
.mac-font-select .font-option[data-value*="Kristi"] { font-family: 'Kristi', cursive !important; }
.mac-font-select .font-option[data-value*="Nothing You Could Do"] { font-family: 'Nothing You Could Do', cursive !important; }
.mac-font-select .font-option[data-value*="La Belle Aurore"] { font-family: 'La Belle Aurore', cursive !important; }

/* Playful & Fun */
.mac-font-select .font-option[data-value*="Shadows Into Light"] { font-family: 'Shadows Into Light', cursive !important; }
.mac-font-select .font-option[data-value*="Amatic SC"] { font-family: 'Amatic SC', cursive !important; }
.mac-font-select .font-option[data-value*="Caveat"] { font-family: 'Caveat', cursive !important; }
.mac-font-select .font-option[data-value*="Indie Flower"] { font-family: 'Indie Flower', cursive !important; }
.mac-font-select .font-option[data-value*="Permanent Marker"] { font-family: 'Permanent Marker', cursive !important; }
.mac-font-select .font-option[data-value*="Fredoka One"] { font-family: 'Fredoka One', cursive !important; }
.mac-font-select .font-option[data-value*="Concert One"] { font-family: 'Concert One', cursive !important; }
.mac-font-select .font-option[data-value*="Righteous"] { font-family: 'Righteous', cursive !important; }
.mac-font-select .font-option[data-value*="Anton"] { font-family: 'Anton', sans-serif !important; }
.mac-font-select .font-option[data-value*="Architects Daughter"] { font-family: 'Architects Daughter', cursive !important; }
.mac-font-select .font-option[data-value*="Bubblegum Sans"] { font-family: 'Bubblegum Sans', cursive !important; }
.mac-font-select .font-option[data-value*="Comic Neue"] { font-family: 'Comic Neue', cursive !important; }
.mac-font-select .font-option[data-value*="Creepster"] { font-family: 'Creepster', cursive !important; }
.mac-font-select .font-option[data-value*="Bangers"] { font-family: 'Bangers', cursive !important; }
.mac-font-select .font-option[data-value*="Schoolbell"] { font-family: 'Schoolbell', cursive !important; }
.mac-font-select .font-option[data-value*="Patrick Hand"] { font-family: 'Patrick Hand', cursive !important; }
.mac-font-select .font-option[data-value*="Kranky"] { font-family: 'Kranky', cursive !important; }
.mac-font-select .font-option[data-value*="Cherry Cream Soda"] { font-family: 'Cherry Cream Soda', cursive !important; }
.mac-font-select .font-option[data-value*="Luckiest Guy"] { font-family: 'Luckiest Guy', cursive !important; }
.mac-font-select .font-option[data-value*="Bungee"] { font-family: 'Bungee', cursive !important; }
.mac-font-select .font-option[data-value*="Special Elite"] { font-family: 'Special Elite', cursive !important; }
.mac-font-select .font-option[data-value*="VT323"] { font-family: 'VT323', monospace !important; }
.mac-font-select .font-option[data-value*="Press Start 2P"] { font-family: 'Press Start 2P', cursive !important; }
.mac-font-select .font-option[data-value*="Russo One"] { font-family: 'Russo One', sans-serif !important; }
.mac-font-select .font-option[data-value*="Paytone One"] { font-family: 'Paytone One', sans-serif !important; }
.mac-font-select .font-option[data-value*="Carter One"] { font-family: 'Carter One', cursive !important; }

/* Elegant & Formal */
.mac-font-select .font-option[data-value*="Cormorant"] { font-family: 'Cormorant', serif !important; }
.mac-font-select .font-option[data-value*="Marcellus"] { font-family: 'Marcellus', serif !important; }
.mac-font-select .font-option[data-value*="Trirong"] { font-family: 'Trirong', serif !important; }
.mac-font-select .font-option[data-value*="Bodoni Moda"] { font-family: 'Bodoni Moda', serif !important; }
.mac-font-select .font-option[data-value*="Bellefair"] { font-family: 'Bellefair', serif !important; }
.mac-font-select .font-option[data-value*="Elsie"] { font-family: 'Elsie', cursive !important; }
.mac-font-select .font-option[data-value*="Stoke"] { font-family: 'Stoke', serif !important; }
.mac-font-select .font-option[data-value*="Jacques Francois"] { font-family: 'Jacques Francois', serif !important; }
.mac-font-select .font-option[data-value*="Gilda Display"] { font-family: 'Gilda Display', serif !important; }
.mac-font-select .font-option[data-value*="Prata"] { font-family: 'Prata', serif !important; }
.mac-font-select .font-option[data-value*="Libre Caslon Text"] { font-family: 'Libre Caslon Text', serif !important; }
.mac-font-select .font-option[data-value*="Recife"] { font-family: 'Recife', serif !important; }
.mac-font-select .font-option[data-value*="Playfair"] { font-family: 'Playfair', serif !important; }
.mac-font-select .font-option[data-value*="Ibarra Real Nova"] { font-family: 'Ibarra Real Nova', serif !important; }
.mac-font-select .font-option[data-value*="Majesti Banner"] { font-family: 'Majesti Banner', serif !important; }

/* Modern & Geometric */
.mac-font-select .font-option[data-value*="Futura"] { font-family: 'Futura', sans-serif !important; }
.mac-font-select .font-option[data-value*="Montserrat Alternates"] { font-family: 'Montserrat Alternates', sans-serif !important; }
.mac-font-select .font-option[data-value*="Exo 2"] { font-family: 'Exo 2', sans-serif !important; }
.mac-font-select .font-option[data-value*="Rajdhani"] { font-family: 'Rajdhani', sans-serif !important; }
.mac-font-select .font-option[data-value*="Orbitron"] { font-family: 'Orbitron', sans-serif !important; }
.mac-font-select .font-option[data-value*="Syne"] { font-family: 'Syne', sans-serif !important; }
.mac-font-select .font-option[data-value*="Space Grotesk"] { font-family: 'Space Grotesk', sans-serif !important; }
.mac-font-select .font-option[data-value*="Syncopate"] { font-family: 'Syncopate', sans-serif !important; }
.mac-font-select .font-option[data-value*="Audiowide"] { font-family: 'Audiowide', cursive !important; }
.mac-font-select .font-option[data-value*="Michroma"] { font-family: 'Michroma', sans-serif !important; }
.mac-font-select .font-option[data-value*="Nova Square"] { font-family: 'Nova Square', cursive !important; }
.mac-font-select .font-option[data-value*="Iceland"] { font-family: 'Iceland', cursive !important; }
.mac-font-select .font-option[data-value*="Electrolize"] { font-family: 'Electrolize', sans-serif !important; }
.mac-font-select .font-option[data-value*="Goldman"] { font-family: 'Goldman', cursive !important; }

/* Handwritten */
.mac-font-select .font-option[data-value*="Gochi Hand"] { font-family: 'Gochi Hand', cursive !important; }
.mac-font-select .font-option[data-value*="Coming Soon"] { font-family: 'Coming Soon', cursive !important; }
.mac-font-select .font-option[data-value*="Annie Use Your Telescope"] { font-family: 'Annie Use Your Telescope', cursive !important; }
.mac-font-select .font-option[data-value*="Kalam"] { font-family: 'Kalam', cursive !important; }
.mac-font-select .font-option[data-value*="Rock Salt"] { font-family: 'Rock Salt', cursive !important; }
.mac-font-select .font-option[data-value*="Just Another Hand"] { font-family: 'Just Another Hand', cursive !important; }
.mac-font-select .font-option[data-value*="Reenie Beanie"] { font-family: 'Reenie Beanie', cursive !important; }
.mac-font-select .font-option[data-value*="Gloria Hallelujah"] { font-family: 'Gloria Hallelujah', cursive !important; }
.mac-font-select .font-option[data-value*="Sriracha"] { font-family: 'Sriracha', cursive !important; }
.mac-font-select .font-option[data-value*="Short Stack"] { font-family: 'Short Stack', cursive !important; }
.mac-font-select .font-option[data-value*="Covered By Your Grace"] { font-family: 'Covered By Your Grace', cursive !important; }
.mac-font-select .font-option[data-value*="Crafty Girls"] { font-family: 'Crafty Girls', cursive !important; }
.mac-font-select .font-option[data-value*="Handlee"] { font-family: 'Handlee', cursive !important; }
.mac-font-select .font-option[data-value*="Just Me Again Down Here"] { font-family: 'Just Me Again Down Here', cursive !important; }
.mac-font-select .font-option[data-value*="Neucha"] { font-family: 'Neucha', cursive !important; }

/* Retro & Vintage */
.mac-font-select .font-option[data-value*="Alfa Slab One"] { font-family: 'Alfa Slab One', cursive !important; }
.mac-font-select .font-option[data-value*="Ultra"] { font-family: 'Ultra', serif !important; }
.mac-font-select .font-option[data-value*="Monoton"] { font-family: 'Monoton', cursive !important; }
.mac-font-select .font-option[data-value*="Fascinate Inline"] { font-family: 'Fascinate Inline', cursive !important; }
.mac-font-select .font-option[data-value*="Rye"] { font-family: 'Rye', cursive !important; }
.mac-font-select .font-option[data-value*="Oleo Script"] { font-family: 'Oleo Script', cursive !important; }
.mac-font-select .font-option[data-value*="Vast Shadow"] { font-family: 'Vast Shadow', cursive !important; }
.mac-font-select .font-option[data-value*="Sancreek"] { font-family: 'Sancreek', cursive !important; }
.mac-font-select .font-option[data-value*="Faster One"] { font-family: 'Faster One', cursive !important; }
.mac-font-select .font-option[data-value*="Ruslan Display"] { font-family: 'Ruslan Display', cursive !important; }
.mac-font-select .font-option[data-value*="Sarina"] { font-family: 'Sarina', cursive !important; }
.mac-font-select .font-option[data-value*="Fugaz One"] { font-family: 'Fugaz One', cursive !important; }
.mac-font-select .font-option[data-value*="Henny Penny"] { font-family: 'Henny Penny', cursive !important; }
.mac-font-select .font-option[data-value*="Londrina Outline"] { font-family: 'Londrina Outline', cursive !important; }

/* Support for data-font-family attribute as fallback */
.mac-font-select .font-option[data-font-family] {
    font-family: attr(data-font-family) !important;
}

/* Add styles for the status message */
.status-message {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(52, 152, 219, 0.9);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1000;
    text-align: center;
    pointer-events: none;
}

.status-message.visible {
    opacity: 1;
}

.status-message.error {
    background-color: rgba(231, 76, 60, 0.9);
}

/* Background Library Dialog Styles */
#background-library-dialog .modal-body {
    max-height: 500px;
    overflow-y: auto;
}

.background-options {
    margin-bottom: 15px;
}

.background-options select {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
    width: 100%;
    max-width: 300px;
}

#background-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.background-grid-item {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: all 0.2s ease;
}

.background-grid-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-color: #2980b9;
}

.background-grid-item img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 3px;
}

.background-name {
    margin-top: 5px;
    text-align: center;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Background upload section styling */
.background-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.background-controls input[type="file"] {
    max-width: 250px;
}

@media (max-width: 768px) {
    #background-image-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* Templates Library Dialog Styles */
#templates-library-dialog .modal-body {
    max-height: 500px;
    overflow-y: auto;
}

.template-options {
    margin-bottom: 15px;
}

.template-options select {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
    width: 100%;
    max-width: 300px;
}

#template-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.template-grid-item {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: all 0.2s ease;
    height: 150px;
    overflow: hidden;
}

.template-grid-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-color: #2980b9;
}

.template-grid-item img {
    width: 100%;
    height: 100px;
    object-fit: contain;
    border-radius: 3px;
    max-height: 100px;
}

.template-name {
    margin-top: 5px;
    text-align: center;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    #template-image-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

/* Modal dialogs styling */
.modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow: auto;
    display: none;
}

.modal-header {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    margin: 0;
}

.close-modal {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.modal-body {
    padding: 15px;
    overflow-y: auto;
    max-height: 70vh;
}

.modal-footer {
    padding: 15px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}

/* Template Controls Panel - Enhanced visibility */
.template-controls {
    background-color: #e3f2fd;
    border: 2px solid #2196f3;
    border-radius: 8px;
    padding: 20px;
    margin: 15px 0;
    box-shadow: 0 4px 8px rgba(33, 150, 243, 0.2);
}

.template-controls h2 {
    margin-top: 0;
    color: #1565c0;
    border-bottom: 2px solid #bbdefb;
    padding-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
}

.template-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.template-actions p {
    margin: 5px 0 15px;
    color: #333;
    font-size: 14px;
}

.template-actions button {
    padding: 12px 15px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.template-actions button.primary-button {
    background-color: #2196f3;
    color: white;
}

.template-actions button.primary-button:hover {
    background-color: #1976d2;
}

.template-actions button.danger-button {
    background-color: #f44336;
    color: white;
}

.template-actions button.danger-button:hover {
    background-color: #d32f2f;
}

.template-actions button#unlock-template {
    background-color: #ff9800;
    color: #fff;
}

.template-actions button#unlock-template:hover {
    background-color: #f57c00;
}

/* Premium feature styling */
.premium-button {
    position: relative;
    padding-right: 30px; /* Extra space for the badge */
}

.premium-badge {
    display: inline-block;
    background-color: #ffc107;
    color: #212529;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    text-transform: uppercase;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

/* Apply special styling to the Ready Templates button in purple theme */
.ready-templates .premium-button {
    background-color: #8e44ad;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding-right: 70px; /* Extra space for the badge */
}

.ready-templates .premium-button:hover {
    background-color: #7d3c98;
}

.ready-templates .premium-badge {
    background: linear-gradient(135deg, #ffd700, #ffcc00);
    color: #6b37a2;
    font-size: 10px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    border: 1px solid #ffdd33;
    letter-spacing: 0.5px;
}

/* Apply special styling to the Template Variations button */
.template-variations .premium-button {
    background-color: #e74c3c;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding-right: 70px; /* Extra space for the badge */
    font-weight: 600;
}

.template-variations .premium-button:hover {
    background-color: #c0392b;
}

.template-variations .premium-badge {
    background: linear-gradient(135deg, #ffd700, #ffcc00);
    color: #c0392b;
    font-size: 10px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    border: 1px solid #ffdd33;
    letter-spacing: 0.5px;
}

/* Template Variations Modal Styles */
.variation-options {
    margin: 20px 0;
}

.variation-options h4 {
    margin: 0 0 15px 0;
    color: #2c3e50;
    font-size: 16px;
    font-weight: 600;
}

.variation-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.variation-option {
    display: flex;
    align-items: center;
    padding: 12px;
    border: 2px solid #e1e8ed;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f8f9fa;
}

.variation-option:hover {
    border-color: #3498db;
    background-color: #f0f8ff;
}

.variation-option input[type="checkbox"] {
    margin-right: 12px;
    transform: scale(1.2);
    cursor: pointer;
}

.variation-option input[type="checkbox"]:checked + .variation-info {
    color: #2c3e50;
}

.variation-option:has(input[type="checkbox"]:checked) {
    border-color: #3498db;
    background-color: #e3f2fd;
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.1);
}

.variation-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #7f8c8d;
    transition: color 0.2s ease;
}

.variation-info strong {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

.variation-info span {
    font-size: 12px;
    color: #7f8c8d;
    font-style: italic;
}

.variation-settings {
    border-top: 1px solid #e1e8ed;
    padding-top: 20px;
    margin-top: 20px;
}

.variation-settings h4 {
    margin: 0 0 12px 0;
    color: #2c3e50;
    font-size: 16px;
    font-weight: 600;
}

.checkbox-option {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    cursor: pointer;
    color: #2c3e50;
    font-size: 14px;
}

.checkbox-option input[type="checkbox"] {
    margin-right: 8px;
    transform: scale(1.1);
    cursor: pointer;
}

.checkbox-option:hover {
    color: #3498db;
}

/* Create Variations Modal specific styles */
#create-variations-modal .modal-content {
    max-width: 600px;
    width: 90%;
}

#create-variations-modal .modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

#generate-variations:disabled {
    background-color: #95a5a6;
    cursor: not-allowed;
    opacity: 0.6;
}

#generate-variations:disabled:hover {
    background-color: #95a5a6;
}

/* Premium Upgrade Message Styling */
.premium-upgrade-message {
    text-align: center;
    padding: 40px 20px;
}

.premium-icon {
    font-size: 48px;
    color: #ffc107;
    margin-bottom: 20px;
}

.premium-upgrade-message h3 {
    color: #333;
    margin-bottom: 15px;
    font-size: 24px;
    font-weight: 600;
}

.premium-upgrade-message p {
    color: #666;
    margin-bottom: 25px;
    font-size: 16px;
    line-height: 1.5;
}

.premium-benefits {
    text-align: left;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin: 25px 0;
}

.premium-benefits h4 {
    color: #333;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.premium-benefits ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.premium-benefits li {
    padding: 8px 0;
    color: #555;
    font-size: 15px;
    border-bottom: 1px solid #e9ecef;
}

.premium-benefits li:last-child {
    border-bottom: none;
}

.premium-upgrade-message .buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 25px;
}

.premium-upgrade-message .primary-button {
    background: linear-gradient(135deg, #ffc107, #ff9800);
    color: #333;
    font-weight: 600;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
}

.premium-upgrade-message .primary-button:hover {
    background: linear-gradient(135deg, #ffb300, #f57c00);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 193, 7, 0.4);
}

.premium-upgrade-message .secondary-button {
    background: #6c757d;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.premium-upgrade-message .secondary-button:hover {
    background: #5a6268;
}

/* Template Family Naming Styles */
.template-family-naming {
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #007bff;
}

.template-family-naming label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.template-family-naming input {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.template-family-naming input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.template-family-naming .help-text {
    display: block;
    margin-top: 6px;
    color: #666;
    font-size: 13px;
    line-height: 1.4;
}

/* Variation Options Styles */