/* PatternShow Styles */

:root {
    /* PatternShow Color Palette - Harmonized Theme */
    --favorite-pink: #d40055; /* Updated to match theme pink */
    --navbar-bg: #f50062; /* Navigation bar color */

    /* Bootstrap variable overrides for alerts/tints */
    --bs-primary-bg-subtle: rgba(255, 0, 102, 0.1);
    --bs-primary-text-emphasis: #800033;
    --bs-primary-border-subtle: rgba(255, 0, 102, 0.2);

    /* also override info variations so alerts/info are not blue */
    --bs-info-bg-subtle: rgba(212, 0, 85, 0.1); /* very light pink */
    --bs-info-text-emphasis: #800033; /* dark pink text */
    --bs-info-border-subtle: rgba(212, 0, 85, 0.2);
    --footer-bg: #d40055; /* Footer color */
    --primary-action: #44aa00; /* Action/Save buttons */
    --secondary-cancel: #d40055; /* Cancel buttons */
    --delete-text: #d40055; /* Delete button text color */
    --delete-hover: #800033; /* Delete button hover color */
    --headers: #aa0044; /* Header text color */
    --links: #ff0066; /* Link color */

    /* Derived colors for hover effects */
    --navbar-and-footer-dark: #0a0205;
    --navbar-and-footer-light: #ffffff; /* White text on colored navbar */
    --success-green: #44aa00; /* Keep success green */
    --success-green-dark: #338000; /* Darker shade for hover */

    /* Override Bootstrap colors with new theme */
    --bs-primary: var(--primary-action); /* #44aa00 for primary/action buttons */
    --bs-primary-rgb: 68, 170, 0;
    --bs-secondary: var(--secondary-cancel); /* #d40055 for secondary/cancel buttons */
    --bs-secondary-rgb: 212, 0, 85;
    --bs-success: var(--success-green); /* Use theme green for success */
    --bs-success-rgb: 82, 170, 94;
    --bs-danger: #ffffff; /* White background for delete buttons */
    --bs-danger-rgb: 255, 255, 255;
    --bs-warning: var(--blue-400); /* Keep warning */
    --bs-warning-rgb: 66, 165, 245;
    --bs-info: var(--blue-200); /* Keep info */
    --bs-info-rgb: 144, 202, 249;
    --bs-link: var(--links); /* #d40055 for links */
    --bs-heading-color: var(--headers); /* Use canonical header color for Bootstrap headings */

    /* Legacy colors for backward compatibility */
    --primary-color: #ff0066; /* Navigation color */
    --secondary-color: var(--secondary-cancel); /* Cancel button color */
    --success-color: var(--success-green);
    --light-color: #f8f9fa;
    --dark-color: var(--headers); /* Headers color for text */
    --border-color: #dee2e6;
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

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

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: #000;
    background-color: #fff;
}

/* Override Bootstrap dark backgrounds with Intense Cherry */
.navbar-dark.bg-dark {
    background-color: var(--navbar-bg) !important;
}

footer.bg-dark {
    background-color: var(--footer-bg) !important;
}

#navbarNav {
    margin-left: 1rem;
}

/* Improve navbar text contrast on blue background */
.navbar-dark .navbar-nav .nav-link {
    color: #ffffff !important; /* White text on blue navbar */
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #ffb3cc !important; /* Light pink on hover for the red navbar */
}

.navbar-dark .navbar-brand {
    color: #ffffff !important; /* White for logo */
}

/* Ensure navbar brand stays left-aligned on mobile */
@media (max-width: 991.98px) {
    .navbar-brand {
        margin-right: auto !important;
        text-align: left !important;
    }
    
    /* Prevent navbar height changes when dropdown opens */
    .navbar {
        min-height: 56px; /* Standard Bootstrap navbar height */
        align-items: center; /* Keep items vertically centered */
    }
    
    /* Ensure dropdown doesn't affect navbar layout */
    .navbar-nav.d-lg-none .dropdown-menu {
        position: absolute;
        top: 100%;
        right: 0;
        z-index: 1050;
        margin-top: 0;
    }
}

/* Custom link colors using Bright Ocean */
a {
    color: var(--links);
    text-decoration: none;
}

background-color
border-bottom-color

/* Override alert-primary to match PatternShow theme (not Bootstrap blue) */
.alert-primary {
    /* Hard‑coded light pink background and dark pink text -- ignore Bootstrap variables */
    background-color: rgba(255, 0, 102, 0.1) !important;
    color: #800033 !important;
    border-color: rgba(255, 0, 102, 0.2) !important;
}

.alert-primary a,
.alert-primary .btn {
    color: #800033 !important;
}
a:hover {
    color: #cc0052; /* Darker shade of #ff0066 for link hover */
}

/* Custom form control styles */
.form-check-input:checked {
    background-color: var(--secondary-cancel) !important;
    border-color: var(--secondary-cancel) !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(212, 0, 85, 0.25) !important;
}

.form-switch .form-check-input:checked {
    background-color: var(--primary-action) !important;
    border-color: var(--primary-action) !important;
}

.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(68, 170, 0, 0.25) !important;
}

/* Outline button styles */
.btn-outline-danger {
    color: var(--delete-text) !important;
    border-color: var(--delete-text) !important;
}

.btn-outline-danger:hover {
    color: #ffffff !important;
    background-color: var(--delete-text) !important;
    border-color: var(--delete-text) !important;
}

.btn-outline-danger:focus {
    box-shadow: 0 0 0 0.25rem rgba(212, 0, 85, 0.25) !important;
}

/* Solid danger button styles (for delete buttons) - white background with colored text */
.btn-danger {
    background-color: #ffffff !important;
    border-color: var(--delete-text) !important;
    color: var(--delete-text) !important;
}

.btn-danger:hover {
    background-color: var(--delete-hover) !important;
    border-color: var(--delete-hover) !important;
    color: #ffffff !important;
}

.btn-danger:focus {
    box-shadow: 0 0 0 0.25rem rgba(212, 0, 85, 0.25) !important;
}

/* Outline primary button styles */
.btn-outline-primary {
    color: var(--links) !important;
    border: none !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover {
    color: white !important;
    background-color: var(--links) !important;
    border: none !important;
}

.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 0, 102, 0.25) !important;
    border: none !important;
}

/* Outline secondary button styles */
.btn-outline-secondary {
    color: var(--secondary-cancel) !important;
    border-color: var(--secondary-cancel) !important;
}

.btn-outline-secondary:hover {
    color: white !important;
    background-color: var(--secondary-cancel) !important;
    border-color: var(--secondary-cancel) !important;
}

.btn-outline-secondary:focus {
    box-shadow: 0 0 0 0.25rem rgba(212, 0, 85, 0.25) !important;
}

header {
    background-color: #fff;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}



.logo {
    font-size: 24px;
    font-weight: bold;
    color: var(--primary-color);
    text-decoration: none;
}



main {
    min-height: calc(100vh - 120px);
}


.feature {
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.feature h3 {
    font-size: 24px;
    color: var(--headers);
}

/* Recent Content Sections */
.recent-content .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.recent-content .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}



.recent-content .card-title {
    color: var(--headers);
    font-size: 18px;
    margin-bottom: 10px;
}

.recent-content .text-muted {
    font-size: 14px;
}

.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 40px 20px;
}

.auth-form {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    width: 100%;
    max-width: 400px;
}

/* Mobile styles - remove border and padding */
@media (max-width: 768px) {
    .auth-container {
        padding: 20px 10px;
        min-height: auto;
    }
    
    .auth-form {
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
    }
    
    .auth-form h2 {
        margin-bottom: 20px;
    }
}

/* Make register form wider */
.register-form {
    max-width: 600px !important;
}

.auth-form h2 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--headers);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--headers);
}



.invalid-feedback {
    color: #e67700;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 16px;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(255, 0, 102, 0.25);
}

.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 16px;
    font-family: inherit;
    resize: vertical;
}

.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(255, 0, 102, 0.25);
}

/* Status indicator for username availability and password match */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    /* fixed pixel height to avoid subpixel rounding differences */
    min-height: 20px; /* reserve vertical space to avoid jumps */
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative; /* for absolute positioning of ::before */
    padding-left: 24px; /* 20px for icon + 4px gap */
    vertical-align: top; /* prevent baseline shifts */
}
.status-indicator::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex; /* center icon vertically */
    align-items: center;
    justify-content: center;
    width: 20px; /* reserve space for icon even when empty */
    height: 20px;
    text-align: center;
    font-weight: 700; /* original weight */
}
.status-indicator:empty::before {
    content: '';
}
.status-indicator.valid {
    color: var(--success-green-dark);
}
.status-indicator.valid::before { content: '✓'; color: inherit; }
.status-indicator.invalid {
    color: var(--delete-text);
}
.status-indicator.invalid::before { content: '✗'; color: inherit; }

/* Register hint (to the right of the register button). Reserve space and
   only toggle visibility to avoid layout shift. */
#register-hint {
    min-width: 260px;
    min-height: 20px;
    height: 20px;
    visibility: hidden;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#register-hint.visible {
    visibility: visible;
}

.bio-textarea {
    width: 100% !important;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

/* Ensure link buttons are properly centered */
.btn[href] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background-color: #44aa00 !important;
    color: #fff;
    border-color: #44aa00 !important;
}

.btn-primary:hover {
    background-color: #338000 !important;
    border-color: #338000 !important;
}

.btn-primary:active {
    background-color: #338000 !important; /* Same as hover, no darker clicked color */
    border-color: #338000 !important;
}

.btn-primary:focus {
    border-color: #52aa5e !important;
    box-shadow: 0 0 0 0.25rem rgba(68, 170, 0, 0.25) !important;
}

.btn-secondary {
    background-color: var(--bs-secondary);
    color: #fff;
}

.btn-secondary:hover {
    background-color: #b00046; /* Darker shade of #d40055 */
}

.btn-secondary:active {
    background-color: #b00046; /* Same as hover for consistency */
}

.auth-link {
    text-align: center;
    margin-top: 20px;
}

.auth-link a {
    color: var(--primary-color);
    text-decoration: none;
}

.auth-link a:hover {
}

.alert {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-weight: 500;
}

.alert-success {
    background-color: rgba(82, 170, 94, 0.1);
    color: #52AA5E;
    border: 1px solid rgba(82, 170, 94, 0.3);
}



.welcome-message {
    background: var(--blue-100); /* Blue 100 for welcome background */
    color: var(--blue-900); /* Dark blue text */
    padding: 24px 32px;
    border-radius: 12px;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);
}

.welcome-message h4 {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 1.5rem;
}

.welcome-message p {
    margin: 0;
    font-size: 1.1rem;
    opacity: 0.95;
}

footer {
    text-align: center;
    padding: 20px;
    background-color: var(--light-color);
    border-top: 1px solid var(--border-color);
    color: var(--secondary-color);
}

/* Ensure footer titles/headings are white for contrast */
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
    color: var(--navbar-and-footer-light);
}

/* User Profile Styles */


.profile-header {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    align-items: flex-start;
}

.profile-picture {
    flex-shrink: 0;
}

.profile-picture img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--light-color);
}

.profile-info {
    flex: 1;
}

.profile-info h1 {
    font-size: 32px;
    margin-bottom: 5px;
    color: var(--headers);
}

.username {
    color: var(--secondary-color);
    font-size: 18px;
    margin-bottom: 15px;
}

.bio {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 600px;
}

.profile-links {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.profile-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}

.profile-link:hover {
}

.profile-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    color: var(--secondary-color);
}



.profile-content {
    border-top: 1px solid var(--border-color);
    padding-top: 40px;
}

.profile-content.has-tabs {
    border-top: none;
    padding-top: 0;
}

.profile-section {
    margin-bottom: 40px;
}

.profile-section h2 {
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--headers);
}

.asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}


.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--secondary-color);
}

.empty-state p {
    font-size: 18px;
}

/* Edit Profile Form */
.form-help {
    font-size: 12px;
    margin-top: 5px;
}

/* Password validation styles */
.password-strength {
    margin-top: 8px;
}

#strength-indicator {
    height: 4px;
    background-color: #e9ecef;
    border-radius: 2px;
    margin-bottom: 4px;
    transition: background-color 0.2s;
}

#strength-indicator.valid {
    background-color: var(--success-green);
}

#strength-indicator.invalid {
    background-color: var(--danger-color);
}

#password-feedback {
    font-size: 11px;
    color: var(--secondary-color);
}

.password-match {
    margin-top: 4px;
    font-size: 12px;
    min-height: 16px;
}

.password-match.valid {
    color: var(--success-color);
}

.password-match.invalid {
    color: var(--danger-color);
}

/* Disabled button styling */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Override disabled primary button to keep green background */
.btn-primary:disabled {
    background-color: var(--primary-action) !important;
    border-color: var(--primary-action) !important;
}

/* Responsive adjustments for user profiles */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
        height: auto;
        padding: 20px;
    }



    .hero h1 {
        font-size: 36px;
    }

    .hero p {
        font-size: 18px;
    }



    .features {
        grid-template-columns: 1fr;
        padding: 40px 20px;
    }

    .profile-header {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .profile-picture img {
        width: 120px;
        height: 120px;
    }

    .profile-links {
        justify-content: flex-start;
    }

    .profile-stats {
        justify-content: flex-start;
    }

    .asset-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* Pattern Item Standard Display */
.pattern-item-standard {
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
    overflow: visible;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
}

.pattern-item-standard:hover {
    border-color: #ff0066;
    box-shadow: 0 2px 8px rgba(255, 0, 102, 0.1);
    transform: translateY(-1px);
}

.pattern-item-standard .pattern-thumbnail {
    width: 100%;
    height: 120px; /* 4x3 aspect ratio for full width */
    object-fit: cover;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.pattern-item-standard .pattern-info {
    padding: 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.variant-color-section {
    padding: 8px;
    background-color: transparent;
    border: none;
}

.variant-color-section h6 {
    font-size: 0.88em;
}

.variant-size-label {
    font-size: 0.8em;
    color: #555;
}

.variant-size-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* Expanded variants: different layouts based on grid span */
.variant-size-grid.expanded-2col {
    /* For 2-column expanded: single column of colors, 4 variants per row */
    display: block;
}

.variant-size-grid.expanded-2col .variant-color-section .variant-size-grid {
    grid-template-columns: repeat(4, 1fr);
}

.variant-size-grid.expanded-3col {
    /* For 3-column expanded: single column of colors, 6 variants per row */
    display: block;
}

.variant-size-grid.expanded-3col .variant-color-section .variant-size-grid {
    grid-template-columns: repeat(6, 1fr);
}

.variant-size-grid.expanded-4col {
    /* For 4-column expanded: show colors in 2 columns */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.variant-size-grid.expanded-4col .variant-color-section {
    /* Ensure color sections work as grid items */
    display: block;
    width: 100%;
}

.variant-size-grid.expanded-4col .variant-color-section .variant-size-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.pattern-item-standard .pattern-title {
    font-size: 0.95em;
    font-weight: 600;
    color: #333;
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pattern-item-standard .pattern-author {
    font-size: 0.85em;
    color: #666;
    margin: 0;
    font-weight: 500;
}

.pattern-item-standard .pattern-meta {
    font-size: 0.8em;
    color: #888;
    margin: 0;
    margin-top: auto;
    padding: 6px 8px; /* slightly reduced padding */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer; /* make whole row feel clickable */
}

.pattern-item-standard .pattern-meta:hover {
    background: rgba(255, 0, 102, 0.06); /* Light pink background using theme color */
    color: #cc0052; /* Darker shade of theme link color */
}

.pattern-item-standard .pattern-meta span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pattern-item-standard .expand-btn {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all 0.2s ease;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.pattern-item-standard .pattern-meta:focus {
    outline: 2px solid rgba(255,0,102,0.2);
    outline-offset: 2px;
}

.pattern-item-standard .expand-btn:hover {
    background: rgba(255, 0, 102, 0.12); /* Light pink background using theme color */
    color: #ff0066; /* Theme link color */
}

.pattern-item-standard .expand-icon {
    transition: transform 0.2s ease;
    font-size: 0.9em;
}

.pattern-item-standard .pattern-variants {
    display: none;
    overflow: visible;
}

.pattern-item-standard .pattern-variants.expanded {
    display: block;
}

/* Expanded pattern items span full row based on grid layout */
.pattern-item-standard.expanded {
    grid-column: span 2; /* Default for 2-column layout */
}

@media (min-width: 1750px) {
    .pattern-item-standard.expanded {
        grid-column: span 3; /* Span 3 columns in 3-column layout */
    }
}

@media (min-width: 1900px) {
    .pattern-item-standard.expanded {
        grid-column: span 4; /* Span 4 columns in 4-column layout */
    }
}

.pattern-item-standard .color-section {
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.pattern-item-standard .color-section:last-child {
    border-bottom: none;
}

.pattern-item-standard .color-title {
    font-size: 0.9em;
    color: #333;
    font-weight: 600;
    margin-bottom: 8px;
}

.pattern-item-standard .size-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 6px;
}



.pattern-item-standard .size-thumbnail {
    width: 100%;
    height: 40px;
    object-fit: cover;
    border-radius: 2px;
    margin-bottom: 4px;
    background-size: auto;
    background-repeat: repeat;
}

.pattern-item-standard .size-label {
    font-size: 0.7em;
    color: #666;
    display: block;
}

/* Grid layouts for pattern sections */
.pattern-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .pattern-grid-2col {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .pattern-item-standard .pattern-thumbnail {
        height: 100px;
    }
    
    .pattern-item-standard .pattern-info {
        padding: 10px;
    }
}

/* Patterns Page Styles */
.pattern-card {
    transition: transform 0.2s;
}

.pattern-card:hover {
    transform: translateY(-2px);
}

.pattern-thumbnail {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

/* Edit pattern page specific thumbnail height */
.colors-list .pattern-thumbnail {
    height: 400px !important;
}

.color-swatches {
    display: flex;
    gap: 2px;
    margin-bottom: 8px;
}

.color-swatch {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid #dee2e6;
}

.color-swatch-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: #f8f9fa;
    color: #666;
    font-size: 10px;
    border-radius: 2px;
    border: 1px solid #dee2e6;
}

.size-info {
    font-size: 12px;
    color: #666;
    margin-left: 8px;
}

.library-btn {
    /* icons are used for library now — make them behave like favorites */
    cursor: pointer;
    display: inline-flex; /* center like .favorite-container */
    align-items: center;
    vertical-align: middle;
}

.library-btn:hover {
    color: var(--success-color) !important; /* bootstrap success */
}

.library-btn[data-in-library="true"] {
    color: #198754 !important;
}

.library-btn[data-in-library="false"] {
    color: #6c757d !important; /* muted */
}

/* Match favorites behavior: provide specific hover shades for true/false states */
.library-btn[data-in-library="true"]:hover {
    /* lighter green when already in library */
    color: #cfead7 !important;
}

.library-btn[data-in-library="false"]:hover {
    /* brighter green when hovering a non-saved bookmark */
    color: #71df86 !important;
}

/* Pressed state (active) — slightly darker */
.library-btn:active {
    color: #1e7f3e !important;
}

/* Mockup Selection Page Styles */
.mockup-card {
    transition: transform 0.2s;
}

.mockup-card:hover {
    transform: translateY(-2px);
}



/* Pattern Detail Page Styles */
span.color-swatch {
    /* larger palette circles for detail pages, but keep them flat */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-block;
    margin: 2px;
    /* remove border and shadow to avoid button-like appearance */
    border: none;
    box-shadow: none;
}





.look-canvas {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* allow children (image, share-buttons) to fill available width */
    width: 100%;
    margin-bottom: 20px;
}

.look-image {
    max-width: 100%;
    height: auto;
    border: 2px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}



.look-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-section {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
}

/* Remove boxes around Mockup and Patterns sections on mobile */
@media (max-width: 768px) {
    .info-section {
        background: transparent;
        border: none;
        padding: 0;
    }
    
    .assignment-item {
        background: transparent;
        border: none;
        padding: 8px 0;
        margin-bottom: 12px;
    }
}

.info-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
}

.assignments-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.assignment-item {
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 4px;
    margin-bottom: 10px;
}

.assignment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pattern-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pattern-title-full {
    width: 100%;
}

.pattern-title-full a {
    text-decoration: none;
    color: inherit;
}

.pattern-title-full a:hover {
    color: #cc0052; /* Darker shade of theme link color */
}

.pattern-author-line {
    color: #666;
    margin-bottom: 8px;
}

.pattern-details-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pattern-thumbnail-col {
    flex-shrink: 0;
}

.pattern-size-col {
    flex: 1;
    min-width: 0;
}

.pattern-actions-col {
    flex-shrink: 0;
}



.pattern-thumbnail-col a {
    text-decoration: none;
    display: block;
    transition: opacity 0.2s ease;
}

.pattern-thumbnail-col a:hover {
    opacity: 0.8;
}

.pattern-thumbnail {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
    flex-shrink: 0;
    transition: border-color 0.2s ease;
}

.pattern-thumbnail-col a:hover .pattern-thumbnail {
    border-color: #ff0066; /* Theme link color */
}

.pattern-details {
    min-width: 0;
    flex: 1;
}

.look-detail .pattern-details strong {
    color: #ff0066; /* Theme color for emphasis */
}

.look-detail .pattern-details small {
    color: #666;
}

.look-detail .pattern-actions {
    margin-top: 8px;
}

.look-detail .btn-spoonflower {
    display: inline-block;
    padding: 6px 12px;
    background: #ff6b35;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: bold;
    transition: background-color 0.2s;
}

.look-detail .btn-spoonflower:hover {
    background: #e55a2b;
    color: white;
    text-decoration: none;
}

.look-detail .slot-name {
    font-weight: bold;
}

.look-detail .assignment-type {
    font-size: 0.9em;
    color: #666;
}

.look-detail .color-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid #ccc;
    margin-left: 8px;
}

/* Mockup thumbnail in look detail */
.look-detail .mockup-thumbnail-container {
    text-align: center;
    margin-bottom: 15px;
}

.look-detail .mockup-thumbnail {
    max-width: 120px;
    max-height: 90px;
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.look-detail .mockup-info-content {
    text-align: center;
}

/* Colors section */
.look-detail .colors-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.color-item {
    padding: 12px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
}

.look-detail .color-info {
    flex: 1;
}

.look-detail .color-info .slot-name {
    font-weight: bold;
    margin-bottom: 4px;
}

.look-detail .color-info .color-hex {
    font-family: monospace;
    font-size: 0.9em;
    color: #666;
    font-weight: bold;
}

.color-swatch-circular {
    /* flat circular swatches used in look details */
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    border-radius: 50% !important;
    border: none !important;
    box-shadow: none !important;
    flex: none !important;
    box-sizing: border-box !important;
    display: block !important;
}

.look-detail .look-actions {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.look-detail .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s;
}

.look-detail .btn-primary {
    background: var(--primary-action);
    color: white;
}

.look-detail .btn-primary:hover {
    background: var(--success-green-dark);
}

.look-detail .btn-secondary {
    background: var(--navbar-and-footer-light);
    color: var(--navbar-and-footer);
}

.look-detail .btn-secondary:hover {
    background: var(--navbar-and-footer);
    color: white;
}

@media (max-width: 768px) {


    .look-canvas {
        width: 100%;
    }

    .look-info {
        width: 100%;
    }

    .look-detail .look-actions {
        flex-direction: column;
        align-items: center;
    }

    .look-detail .btn {
        width: 200px;
    }
}

/* Look Editor Page Styles */
.page-container {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* Center content with reasonable max-width on very large screens */
@media (min-width: 1400px) {
    .page-container {
        max-width: 1400px;
        margin: 0 auto;
    }

    .look-editor-page {
        max-width: none; /* Use full screen width */
    }    

    .look-editor .controls-section {
        flex: 1 !important;
        min-width: 380px !important;
        max-width: none !important;
    }    
}

/* Very large screens: use full screen width for look editor */
@media (min-width: 1600px) {

    .look-editor .editor-container {
        display: flex !important;
        gap: 40px !important;
    }
    
    .look-editor .canvas-section {
        flex: 0 0 1080px !important;
        max-width: 1080px !important;
    }

}

/* Ultra-wide screens: limit to 2000px max */
@media (min-width: 2000px) {
    .look-editor-page {
        max-width: 2000px;
    }
    
    .look-editor .editor-container {
        gap: 50px !important;
    }
    /* Remove fixed width - let controls grow with screen */
}

.look-editor {
    width: 100%;
    margin: 0;
    padding: 0;
}

.look-editor .editor-header {
    text-align: center;
    margin-bottom: 30px;
}

.look-editor .title-input-section {
    margin-bottom: 20px;
}

.look-editor .title-input-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

.look-editor .title-input-section input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box;
}

.look-editor .title-input-section input:focus {
    outline: none;
    border-color: #ff0066; /* Theme color for focus */
    box-shadow: 0 0 0 2px rgba(255, 0, 102, 0.25); /* Theme color with opacity */
}

.look-editor .title-input-section input.valid {
    border-color: #28a745;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25);
}

.look-editor .title-input-section input.invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
}

.look-editor .editor-container {
    display: grid;
    /* Use more fluid proportions that scale better across different container widths */
    grid-template-columns: 1fr minmax(280px, 380px);
    gap: 30px;
    margin-bottom: 30px;
}

/* Make the layout more fluid in the intermediate screen range */
@media (min-width: 576px) and (max-width: 1199px) {
    .look-editor .editor-container {
        grid-template-columns: 1fr minmax(260px, 380px);
        gap: 25px;
    }
}

.look-editor .canvas-section {
    display: flex;
    flex-direction: column;
}

.look-editor .mockup-canvas {
    text-align: center;
}

.look-editor .controls-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.look-editor .slot-controls,
.look-editor .pattern-library {
    background: #fff;
}

/* Desktop Pattern Library Tabs */
.look-editor .desktop-pattern-tabs {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 0;
    background: #f8f9fa;
}

.look-editor .desktop-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: #6c757d;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.look-editor .desktop-tab:hover {
    color: #495057;
    background: #e9ecef;
}

.look-editor .desktop-tab.active {
    color: var(--secondary-cancel);
    border-bottom-color: var(--secondary-cancel);
    background: white;
}

.look-editor .tab-content {
    /* Container for tab content */
}

.look-editor .slot-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.look-editor .slot-item.selected {
    border-color: #ff0066; /* Theme color for selection */
    background-color: #f8f9fa;
}

.look-editor .slot-item.selected .slot-name {
    color: #ff0066; /* Theme color for selection */
}

/* SVG slot selection styling */
.look-editor [data-slot-id].selected {
    stroke: #ff0066 !important; /* Theme color for selection */
    stroke-width: 2px !important;
}

.look-editor .slot-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.look-editor .slot-name {
    font-weight: bold;
}

.look-editor .slot-type {
    background: var(--primary-action);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.8em;
}

.look-editor .slot-assignment {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.look-editor .assignment-preview {
    flex-shrink: 0;
}

.look-editor .assignment-text {
    flex: 1;
    font-size: 0.9em;
    color: #666;
}

.look-editor .clear-assignment-btn {
    background: none;
    border: none;
    color: #999;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: all 0.2s;
}

.look-editor .clear-assignment-btn:hover {
    background-color: #f0f0f0;
    color: #666;
}



.look-editor .pattern-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

/* Force 3 columns at 1750px+ */
@media (min-width: 1750px) {
    .look-editor .pattern-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Force 4 columns at 1900px+ */
@media (min-width: 1900px) {
    .look-editor .pattern-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

.look-editor .color-picker {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
}

.look-editor .color-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.look-editor .color-picker-header h3 {
    margin: 0;
}

.look-editor .color-picker .mobile-modal-close {
    margin: 0;
    padding: 4px;
}

.look-editor .color-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.color-controls {
    display: flex;
    gap: 24px;
    align-items: center;
    /* allow buttons to size naturally; no fixed width now that we have an extra element */
    width: auto;
}

.hex-input {
    width: 120px;
    flex-shrink: 0;
    padding: 8px 12px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    font-family: monospace;
    text-align: center;
    background-color: #f8f9fa;
}

.hex-input:focus {
    outline: none;
    border-color: var(--links);
    background-color: #fff;
}

.apply-color-btn, .pick-color-btn {
    flex: none;
    padding: 8px 12px; /* smaller since icon doesn't need so much space */
    background-color: var(--primary-action);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* separate hover style so both buttons react the same */
.apply-color-btn:hover, .pick-color-btn:hover {
    background-color: var(--success-green-dark);
}

/* cursor while sampling colors from mockup */
.color-sampling-active, .color-sampling-active * {
    cursor: crosshair !important;
}

/* share button row in look detail page */
/* use CSS grid with fixed six columns so icons are equally sized and always fit on one row */
.share-buttons {
    display: grid;
    /* six equal columns that are allowed to shrink to avoid overflow */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(0.5rem, 2vw, 1rem); /* grow with viewport width */
    width: 100%;
    max-width: 600px;
    /* keep left-aligned; no auto horizontal margins */
    justify-content: start;
    align-items: start; /* row height determined by button size */
}

.share-buttons .share-btn {
    width: 100% !important; /* override default 48px */
    height: auto !important; /* let aspect-ratio dictate height */
    aspect-ratio: 1 / 1; /* square cells, ensures button shape is square */
    display: flex;
    align-items: center;
    justify-content: center;
    /* font-size controlled via JS, stored in custom property; fallback for
       very old browsers keeps text at 1.5rem */
    font-size: var(--share-icon-size, 1.5rem) !important;
}

/* slightly smaller icons on very narrow screens to prevent overflow */
@media (max-width: 480px) {
    .share-buttons .share-btn {
        font-size: 1.25rem;
        padding: 0.2rem;
    }
}




/* overlay canvas used for internal color sampling */
#svg-picker-overlay {
    pointer-events: auto; /* allow click to register */
    cursor: crosshair;
    background: transparent;
}

/* icon inside pick button smaller than text buttons */
.pick-color-btn svg {
    width: 20px;
    height: 20px;
}


.apply-color-btn:hover {
    background-color: var(--success-green-dark);
}

.look-editor .pattern-item {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.look-editor .pattern-item.dragging {
    opacity: 0.5;
    transform: rotate(5deg);
}

.look-editor .pattern-item:hover {
    border-color: #ff0066;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 0, 102, 0.2);
}

/* SVG drag and drop styles */
.look-editor [data-slot-id].drag-over {
    stroke: #28a745 !important;
    stroke-width: 3px !important;
    stroke-dasharray: 5,5 !important;
    fill-opacity: 0.7 !important;
}

.look-editor [data-slot-id].selected {
    stroke: #ff0066 !important;
    stroke-width: 2px !important;
}

/* Enhanced slot controls */
.look-editor .slot-item {
    padding: 12px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    background: white;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.look-editor .slot-item:hover {
    border-color: #ff0066; /* Theme color for hover */
    background: #f8f9fa;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(255, 0, 102, 0.1); /* Theme color with opacity */
}

.look-editor .slot-item.selected {
    border-color: #ff0066; /* Theme color for selection */
    background-color: #fce4ec; /* Light pink background for selected state */
    box-shadow: 0 0 0 3px rgba(255, 0, 102, 0.1); /* Theme color with opacity */
}

.look-editor .slot-item.selected .slot-name {
    color: #ff0066; /* Theme color for selection */
    font-weight: bold;
}

/* Slot preview */
.look-editor .slot-preview {
    margin-top: 8px;
    text-align: center;
}

.look-editor .slot-color {
    width: 100%;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

/* SVG slot animations */
@keyframes pulse {
    0%, 100% { stroke-width: 2px; }
    50% { stroke-width: 4px; }
}

@keyframes selectedPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 0, 102, 0.1); }
    50% { box-shadow: 0 0 0 6px rgba(255, 0, 102, 0.2); }
}



/* Loading and feedback states */
.look-editor .pattern-item.loading {
    position: relative;
    pointer-events: none;
}

.look-editor .pattern-item.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #ff0066;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error and success message animations */
.look-editor .error-message {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.look-editor .pattern-search {
    position: relative;
    margin-bottom: 20px;
}

.look-editor .pattern-search input {
    width: 100%;
    padding: 10px 40px 10px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.look-editor .pattern-search input:focus {
    outline: none;
    border-color: #ff0066;
    box-shadow: 0 0 0 2px rgba(255, 0, 102, 0.25);
}

.look-editor .clear-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 18px;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.look-editor .clear-btn:hover {
    background: #f0f0f0;
    color: #333;
}

.look-editor .recently-used-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.look-editor .recently-used-section h4 {
    margin: 0 0 10px 0;
    font-size: 1em;
    color: #666;
    font-weight: 600;
}

.look-editor .recent-patterns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}



.look-editor .pattern-variants {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    max-width: calc(100% - 10px);
}



.look-editor .load-more-container {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.look-editor .load-more-container button {
    padding: 10px 20px;
    font-size: 14px;
}

.look-editor .editor-actions {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.look-editor .loading,
.look-editor .error {
    color: #666;
    font-style: italic;
}

.look-editor .error {
    color: #dc3545;
}

/* Mobile styles applied when JS detects mobile device */
.mobile .look-editor .editor-container {
    grid-template-columns: 1fr;
}

.mobile .look-editor .pattern-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 20px;
}

.mobile .look-editor .pattern-item {
    min-height: 100px;
}

.mobile .look-editor .pattern-item img {
    height: 70px;
}

.mobile .look-editor .slot-item {
    padding: 16px;
    margin-bottom: 12px;
}

.mobile .look-editor .slot-item .slot-name {
    font-size: 1.1em;
}

.mobile .look-editor .editor-actions {
    padding: 20px;
}

.mobile .look-editor .editor-actions button {
    width: 100%;
    padding: 15px;
    font-size: 1.1em;
}

/* Larger touch targets for mobile */
.mobile .look-editor .pattern-item,
.mobile .look-editor .slot-item,
.mobile .look-editor .assign-btn,
.mobile .look-editor #apply-color {
    min-height: 44px; /* iOS recommended minimum */
}

/* Improve color picker for mobile */
.mobile .look-editor .color-input {
    flex-direction: column;
    gap: 15px;
}

.mobile .look-editor .color-input input[type="color"] {
    width: 80px;
    height: 60px;
}

.mobile .look-editor .color-input button {
    width: 100%;
    padding: 15px;
}

/* Better spacing for mobile */
.mobile .look-editor .controls-section {
    gap: 25px;
}

.mobile .look-editor .slot-list {
    gap: 15px;
}

/* Hide complex animations on mobile for performance */
.mobile .look-editor .pattern-item:hover {
    transform: none;
}



/* Make page full width on mobile */
.mobile .page-container:not(.look-editor-page) {
    padding-left: 10px;
    padding-right: 10px;
}

.mobile .look-editor-container {
    padding-left: 0;
    padding-right: 0;
}

.mobile .look-editor .mockup-canvas {
    border: none !important;
    border-radius: 0;
    padding: 0 !important;
    margin: 0;
}

/* Keep margins on header and controls */
.mobile .look-editor .editor-header {
    padding-left: 25px;
    padding-right: 25px;
}

.mobile .look-editor .title-input-section {
    padding-left: 25px;
    padding-right: 25px;
}

.mobile .look-editor .controls-section {
    padding-left: 25px;
    padding-right: 25px;
}

@media (max-width: 1080px) {
    .look-editor .editor-container {
        grid-template-columns: 1fr;
    }

    .look-editor .pattern-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 20px;
    }

    .look-editor .pattern-item {
        min-height: 100px;
    }

    .look-editor .pattern-item img {
        height: 70px;
    }

    .look-editor .slot-item {
        padding: 16px;
        margin-bottom: 12px;
    }

    .look-editor .slot-item .slot-name {
        font-size: 1.1em;
    }

    .look-editor .editor-actions {
        padding: 20px;
    }

    .look-editor .editor-actions button {
        width: 100%;
        padding: 15px;
        font-size: 1.1em;
    }

    /* Larger touch targets for mobile */
    .look-editor .pattern-item,
    .look-editor .slot-item,
    .look-editor .assign-btn,
    .look-editor #apply-color {
        min-height: 44px; /* iOS recommended minimum */
    }

    /* Improve color picker for mobile */
    .look-editor .color-input {
        flex-direction: column;
        gap: 15px;
    }

    .look-editor .color-input input[type="color"] {
        width: 80px;
        height: 60px;
    }

    .look-editor .color-input button {
        width: 100%;
        padding: 15px;
    }

    /* Better spacing for mobile */
    .look-editor .controls-section {
        gap: 25px;
    }

    .look-editor .slot-list {
        gap: 15px;
    }

    /* Hide complex animations on mobile for performance */
    .look-editor .pattern-item:hover {
        transform: none;
    }

    /* Larger text for mobile readability */
    .look-editor .slot-name,
    .look-editor .assignment-text,
    .look-editor .pattern-title {
        font-size: 1em;
    }

    /* Make page full width on mobile */
    .page-container:not(.look-editor-page) {
        padding-left: 10px;
        padding-right: 10px;
    }

    .look-editor-container {
        padding-left: 0;
        padding-right: 0;
    }

    .look-editor .mockup-canvas {
        border: none !important;
        border-radius: 0;
        padding: 0 !important;
        margin: 0;
    }

    /* Keep margins on header and controls */
    .look-editor .editor-header {
        padding-left: 20px;
        padding-right: 20px;
    }

    .look-editor .title-input-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .look-editor .controls-section {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 480px) {
    .look-editor .pattern-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 15px;
    }

    .look-editor .pattern-item img {
        height: 60px;
    }

    /* Ensure mockup has no border/padding on mobile */
    .mobile .look-editor .mockup-canvas {
        border: none !important;
        padding: 0 !important;
    }

    .look-editor .editor-header h1 {
        font-size: 1.5em;
    }

    .look-editor .title-input-section input {
        font-size: 1em;
        padding: 12px;
    }
}

/* Pattern Library Section Styles */
.look-editor .pattern-section {
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    overflow: hidden;
    /* allow smooth height transitions when content changes */
    transition: height 160ms ease;
}

.look-editor .recently-used-section {
    /* Use same styles as other tab content sections */
}

.look-editor .search-results-section {
    /* Use base pattern-section styles */
}

.look-editor .pattern-library-section {
    /* Use base pattern-section styles */
}

.look-editor .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.look-editor .section-header h4 {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    color: #495057;
}

.look-editor .results-count {
    font-size: 0.9em;
    color: #6c757d;
    font-weight: 500;
}

 .look-editor .section-content {
     /* fixed height so the UI doesn't jump when contents change */
     height: 300px;
    overflow-y: auto;
    /* reserve scrollbar gutter to prevent width shifts when scrollbars appear/disappear */
    scrollbar-gutter: stable;
    padding: 16px;
}

/* Desktop: increase height for better usability */
@media (min-width: 1024px) {
    .look-editor .section-content {
        height: auto;
    }
    .look-editor .section-content-inner {
        height: 600px;
    }
}

/* Search results section gets double height */
.look-editor .search-results-section .section-content {
    height: 600px;
}

.look-editor .section-content.expanded {
    /* allow the section to grow to fit expanded content */
    height: auto;
    /* keep overflow-y:auto so the scrollbar visibility doesn't toggle and cause width shifts */
    overflow-y: auto;
}

/* Dynamic height adjustment for canvas matching */
.look-editor .section-content.canvas-matched {
    height: auto !important;
}

/* Desktop: keep fixed height even when expanded */
@media (min-width: 1081px) {
    .look-editor .section-content.expanded {
        height: 600px;
    }
}

/* Color picker section should display entirely without scrolling */
.look-editor .choose-color-section .section-content {
    height: auto;
    overflow-y: visible;
}

.look-editor .loading-indicator {
    text-align: center;
    padding: 20px;
    color: #6c757d;
    font-style: italic;
}

.look-editor .empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.look-editor .empty-state p {
    margin: 0;
    font-size: 0.95em;
}

.modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 0;
    border: 1px solid #888;
    width: 90%;
    max-width: 800px;
    border-radius: 8px;
    max-height: 80vh;
    overflow-y: auto;
}

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

.modal-header h3 {
    margin: 0;
    font-size: 1.5em;
    color: #333;
}

.modal-close {
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    padding: 0 10px;
}

.modal-close:hover {
    color: #000;
}

#pattern-modal-content {
    padding: 20px;
}

.modal-pattern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.modal-color-section {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    background: #f9f9f9;
}

.modal-color-section h4 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 1.1em;
}

.modal-size-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
}

/* When a modal card is expanded, make it occupy the full modal width */
.modal-pattern-grid .modal-color-section.expanded {
    grid-column: 1 / -1; /* span all columns */
}

/* Make expanded size grid display more prominently */
.modal-pattern-grid .modal-color-section.expanded .modal-size-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.modal-size-item {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-size-item:hover {
    border-color: #ff0066;
    background: #f8f9fa;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(255, 0, 102, 0.2);
}

.modal-size-item img {
    width: 100%;
    height: 60px; /* Changed from default to 60px for 4x3 aspect ratio */
    object-fit: cover;
    border-radius: 2px;
    margin-bottom: 5px;
}

.modal-size-item span {
    font-size: 0.8em;
    color: #666;
    display: block;
}

/* Mobile styles for existing modal */
@media (max-width: 768px) {
    .modal-content {
        margin: 10px;
        width: calc(100vw - 20px);
        max-width: none;
        max-height: calc(100vh - 20px);
    }

    .modal-header {
        padding: 16px;
    }

    .modal-header h3 {
        font-size: 1.3em;
    }

    .modal-close {
        font-size: 24px;
        padding: 8px;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #pattern-modal-content {
        padding: 16px;
    }

    .modal-pattern-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .modal-color-section {
        padding: 12px;
    }

    .modal-color-section h4 {
        margin-bottom: 12px;
        font-size: 1.1em;
    }

    .modal-size-grid {
        gap: 8px;
    }

    .modal-size-item {
        min-height: 80px;
        padding: 8px;
    }

    .modal-size-item .modal-thumbnail-container {
        width: 60px;
        height: 50px;
    }

    .modal-size-item span {
        font-size: 11px;
    }
}

/* Search results styles */
.look-editor .search-results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 100%;
}

.look-editor .search-results-grid .pattern-item {
    margin: 0;
}

.look-editor .pattern-variants {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}







.look-editor .expand-btn {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 4px;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.look-editor .expand-btn:hover {
    background: rgba(255, 0, 102, 0.1);
    color: #ff0066;
}

.look-editor .expand-icon {
    font-size: 0.8em;
    transition: transform 0.2s ease;
}



.look-editor .color-section {
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.look-editor .color-section:last-child {
    border-bottom: none;
}

.look-editor .color-section h5 {
    margin: 0 0 8px 0;
    font-size: 0.9em;
    color: #333;
    font-weight: 600;
}





/* Ensure pattern variants on the standard pattern card expand the parent box
   (avoid the .look-editor .pattern-variants rule that positions variants absolutely)
   This rule is intentionally specific and placed at the end so it overrides earlier
   declarations and lets the parent element grow to fit the variants. */
.look-editor .pattern-item-standard .pattern-variants,
.pattern-item-standard .pattern-variants {
    position: static !important;
    display: none !important;
}

.look-editor .pattern-item-standard .pattern-variants.expanded,
.pattern-item-standard .pattern-variants.expanded {
    display: block !important;
    position: static !important;
}

/* Favorite button hover effects */
.favorite-btn:hover {
    color: var(--favorite-pink);
}

/* Specific hover colors for favorited vs unfavorited */
.favorite-btn[data-favorited="true"]:hover {
    color: #ffe6ec; /* Very light neon pink for favorited hover */
}

.favorite-btn[data-favorited="false"]:hover {
    color: #ffb3c1; /* Light neon pink for unfavorited */
}

.favorite-btn {
    cursor: pointer;
}

/* Ensure programmatic class colors take precedence over hover */
.favorite-btn.text-danger {
    color: var(--favorite-pink) !important;
}

.favorite-btn.text-muted {
    color: #6c757d !important; /* Bootstrap text-muted color */
}

/* Ensure favorite count colors also take precedence */
.favorite-count.text-danger {
    color: var(--favorite-pink) !important;
}

.favorite-count.text-muted {
    color: #6c757d !important; /* Bootstrap text-muted color */
}

/* Favorite button focus effects for mobile */
.favorite-btn:focus {
    outline: none;
    color: inherit !important;
}

/* Prevent color changes on focus for favorited/unfavorited states */
.favorite-btn[data-favorited="true"]:focus {
    color: var(--danger-color) !important;
}

.favorite-btn[data-favorited="false"]:focus {
    color: var(--text-muted) !important;
}

/* Mobile Full-Screen Pattern Selection Modal */
.mobile-pattern-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    z-index: 10000;
    overflow: hidden;
    flex-direction: column;
}

.mobile-modal-header {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 10001;
}

.mobile-modal-search {
    flex: 1;
    position: relative;
    margin-right: 16px;
}

.mobile-modal-search input {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 16px; /* Prevents zoom on iOS */
    background-color: #f8f9fa;
}

.mobile-modal-search input:focus {
    outline: none;
    border-color: #ff0066;
    background-color: #fff;
}

.clear-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 4px;
}

.mobile-modal-close {
    font-size: 24px;
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mobile-modal-close:hover {
    color: #333;
}

.mobile-modal-tabs {
    display: flex;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.mobile-tab {
    flex: 1;
    padding: 16px 12px;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}

.mobile-tab.active {
    color: var(--secondary-cancel);
    border-bottom-color: var(--secondary-cancel);
    background-color: #fff;
}

.mobile-tab:hover {
    background-color: #e9ecef;
}

.mobile-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.mobile-pattern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.mobile-pattern-item {
    display: flex;
    flex-direction: column;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    background-color: #fff;
    min-height: 140px;
}

.mobile-pattern-item:hover,
.mobile-pattern-item.selected {
    border-color: #ff0066;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255,0,102,0.15);
}

.mobile-pattern-thumbnail {
    width: 100%;
    height: 100px;
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
    border-bottom: 1px solid #e9ecef;
}

.mobile-pattern-info {
    padding: 12px;
    text-align: center;
}

.mobile-pattern-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}



.mobile-loading-indicator {
    text-align: center;
    padding: 40px;
    color: #6c757d;
}

.mobile-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.mobile-empty-state p {
    margin: 0;
    font-size: 16px;
}



/* Mobile Pattern Details View */
.mobile-pattern-details {
    padding: 16px;
}

.mobile-pattern-header {
    text-align: center;
    margin-bottom: 24px;
}

.mobile-pattern-header h3 {
    margin: 0 0 8px 0;
    font-size: 1.5em;
    color: #333;
}

.mobile-pattern-header p {
    margin: 0;
    color: #666;
    font-size: 0.9em;
}

.mobile-color-sections {
    margin-bottom: 24px;
}

.mobile-color-section {
    margin-bottom: 24px;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 16px;
    background-color: #f8f9fa;
}

.mobile-color-section h4 {
    margin: 0 0 16px 0;
    color: #333;
    font-size: 1.1em;
}

.mobile-size-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
}

.mobile-size-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 2px solid transparent;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

/* Size items in look editor grid need borders and vertical layout */
.mobile-size-item--grid {
    flex-direction: column;
    padding: 12px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    min-height: 80px;
}

.mobile-size-item:hover,
.mobile-size-item.selected {
    border: 2px solid #ff0066 !important;
    transform: translateY(-2px);
}

.color-title-editable i,
.color-description-editable i {
    pointer-events: none; /* let clicks pass through to parent */
    font-size: 0.85em;
    vertical-align: middle;
}

.size-thumbnail {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 4px;
    transition: all 0.2s;
}

/* responsive layout for the size thumbnails grid */
.size-thumbnails-grid {
    display: grid;
    /* allow columns to flexibly grow to fill space; width capped via wrapper */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    justify-content: start; /* left align */
}

/* force two columns on very narrow containers to keep rows balanced */
@media (max-width: 320px) {
    .size-thumbnails-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.size-thumbnail-wrapper {
    /* allow thumbnails to grow/shrink within the grid cell and cap max width */
    width: 100%;
    max-width: 250px;
}

.size-thumbnail:hover {
    border-color: #ff0066;
}

.size-thumbnail.selected {
    border: 2px solid #ff0066 !important;
}

.mobile-size-thumbnail {
    width: 60px;
    height: 45px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    background-color: #f8f9fa;
    margin-bottom: 8px;
}

.mobile-size-item span {
    font-size: 12px;
    color: #666;
    text-align: center;
}

.mobile-modal-actions {
    display: flex;
    justify-content: center;
    padding-top: 16px;
    border-top: 1px solid #e9ecef;
}

.mobile-back-btn {
    padding: 12px 24px;
    background-color: var(--navbar-and-footer-light);
    color: var(--navbar-and-footer);
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.mobile-back-btn:hover {
    background-color: var(--navbar-and-footer);
    color: white;
}

/* Mobile Full-Screen Color Selection Modal */
.mobile-color-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    z-index: 10000;
    overflow: hidden;
    flex-direction: column;
}

/* Position close button in top right */
.mobile-color-modal .mobile-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10001;
}


.mobile-color-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 8px; /* Reduced from 16px */
}

.mobile-color-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Changed from center to flex-start */
    align-items: center;
    padding: 20px 12px 12px 12px; /* Reduced top padding since close button is in corner */
    overflow-y: auto;
}

/* Ensure color picker fits within screen bounds */
#mobile-color-picker-container {
    max-width: 100%;
    box-sizing: border-box;
}

/* Responsive sizing for mobile color picker on larger screens */
@media (min-width: 768px) {
    .mobile-color-content {
        padding: 20px 40px 40px 40px; /* Reduced top padding */
    }
    
    .mobile-color-picker {
        gap: 40px;
    }
    
    .mobile-color-modal .color-btn {
        width: 60px;
        height: 60px;
    }
}

@media (min-width: 1024px) {
    .mobile-color-content {
        padding: 20px 20px 20px 20px;
    }
    
    .mobile-color-picker {
        gap: 48px;
    }
    
    .mobile-color-modal .color-btn {
        width: 70px;
        height: 70px;
    }
}

.mobile-color-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px; /* Reduced from 32px */
    max-width: 600px;
    width: 100%;
}

.mobile-color-picker label {
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

.mobile-color-picker input[type="color"] {
    width: 180px;
    height: 180px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Mobile: Hide selected patterns and color picker sections */
.mobile .slot-controls {
    display: none !important;
}

.mobile .color-picker {
    display: none !important;
}

.mobile .pattern-library {
    display: none !important;
}

@media (max-width: 1080px) {
    .slot-controls {
        display: none !important;
    }
    
    .color-picker {
        display: none !important;
    }
    
    .pattern-library {
        display: none !important;
    }
}

/* Modal header buttons */
.modal-header-buttons {
    margin-left: auto;
    margin-right: 1rem;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Color Picker Enhancements */
.quick-colors-section {
    margin-top: 0.5rem; /* Reduced from 0.75rem */
    padding-top: 0.25rem; /* Reduced from 0.5rem */
    text-align: center;
}

.quick-colors-section h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #495057;
    text-align: center;
}

.color-buttons-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 0rem;
    overflow-x: auto;
    padding-bottom: 4px;
    justify-content: center;
}

/* Ensure borders are fully visible for recently used colors */
#recent-colors,
#mobile-recent-colors {
    padding-top: 2px;
    padding-left: 2px;
}

.color-btn {
    width: 50px;
    height: 50px;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.color-btn:hover {
    border-color: #d40055;
    transform: scale(1.05);
}

.color-btn:active {
    transform: scale(0.95);
}

.color-btn.selected-color {
    border: 2px solid #d40055 !important;
    box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.25);
}

.color-btn.selected-color:hover {
    border: 2px solid #d40055 !important;
    transform: none;
}

.color-placeholder {
    opacity: 0;
    cursor: default !important;
    pointer-events: none;
}

.color-placeholder:hover {
    border-color: #e9ecef !important;
    transform: none !important;
}

.favorite-btn {
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.favorite-btn:hover {
    transform: none; /* Override the scale from .color-btn:hover */
}

/* Prevent scaling for all color buttons in color picker sections */
.color-picker .color-btn:hover,
.mobile-color-modal .color-btn:hover {
    transform: none;
}

/* Mobile color picker enhancements */
@media (max-width: 768px) {
    .color-buttons-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 4px;
        justify-content: flex-start;
    }

    .color-btn {
        width: 45px;
        height: 45px;
    }

    .quick-colors-section h4 {
        font-size: 1rem;
    }
}

/* Color thumbnails for pattern cards */
.color-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
    align-items: center;
}

.color-thumbnail-link {
    text-decoration: none;
    transition: transform 0.2s ease;
}

.color-thumbnail-link:hover {
    transform: scale(1.1);
}

.color-thumbnail {
    flex-shrink: 0;
}

.color-thumbnail img {
    transition: transform 0.2s ease;
}

.color-thumbnail:hover img {
    transform: scale(1.1);
}

.color-thumbnail-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
}

.size-info {
    margin-left: 8px;
    font-size: 0.875rem;
    color: #6c757d;
}

/* Color Tabs for Pattern Detail Pages */
.color-tabs {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    margin-bottom: 16px;
}

/* Mobile: horizontal scroll */
@media (max-width: 767px) {
    .color-tabs {
        overflow-x: auto;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }
    .color-tabs::-webkit-scrollbar {
        display: none; /* Chrome, Safari, and Opera */
    }
}

/* Desktop: wrap */
@media (min-width: 768px) {
    .color-tabs {
        flex-wrap: wrap;
    }
}

.color-tab-thumbnail {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    border: none;
}

.color-tab-placeholder {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: #e9ecef;
    border: none;
    text-align: center;
    line-height: 58px;
    font-size: 10px;
    color: #6c757d;
    overflow: hidden;
    text-overflow: ellipsis;
}

.color-section {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 8px;
}

.color-content-container {
    display: flex;
    flex-wrap: wrap;
}

/* Mobile: Single column, show/hide sections */
@media (max-width: 767.98px) {
    .color-section {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
    }
}

/* Small badges for mobile */
.badge-sm {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* Custom badge for unavailable patterns */
.badge-unavailable {
    background-color: #ffb3c1; /* Light pink */
    color: #d40055; /* Dark pink text */
}

/* Extra small buttons for buy links */
.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.2rem;
}

.buy-wallpaper-btn {
    vertical-align: middle;
}

/* flex container used around the two buy links; row-gap provides larger vertical spacing when wrapped */
.buy-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    column-gap: 1rem; /* match fabric right margin */
    row-gap: 1rem;    /* extra vertical space when stacked */
}

/* Share buttons */
.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: inherit; /* default, allow parent to dictate when used in grid */
    text-decoration: none;
    color: white !important;
}

.share-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.share-btn:active {
    transform: scale(0.95);
}

.download-btn {
    background-color: var(--primary-action);
}

.download-btn:hover {
    background-color: var(--success-green-dark);
}

.facebook-btn {
    background-color: #1877f2;
}

.facebook-btn:hover {
    background-color: #166fe5;
}

.whatsapp-btn {
    background-color: #25d366;
}

.whatsapp-btn:hover {
    background-color: #22c55e;
}

.pinterest-btn {
    background-color: #e60023;
}

.pinterest-btn:hover {
    background-color: #cc001e;
}

.instagram-btn {
    background: linear-gradient(45deg, #833AB4, #FD1D1D, #FCB045);
}

.instagram-btn:hover {
    background: linear-gradient(45deg, #6a2c91, #d01717, #e6a03d);
}

.copy-btn {
    background-color: #6c757d;
}

.copy-btn:hover {
    background-color: #5a6268;
}

.copy-btn.copied {
    background-color: #52aa5e;
}

.copy-btn.copied:hover {
    background-color: #3d7a45;
}

/* Edit icon hover effects */
.edit-icon-link {
    transition: color 0.2s ease;
}

.edit-icon-link:hover {
    color: #ff0066 !important; /* Theme link color */
}

/* Consistent Tab styling for all tabs */
.nav-tabs {
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 1.5rem;
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: #6c757d;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover {
    border-bottom-color: #dee2e6;
    color: #495057;
}

.nav-tabs .nav-link.active {
    border-bottom-color: #ff0066;
    color: #ff0066;
    background-color: transparent;
}

.edit-icon-link:hover i {
    transform: scale(1.1);
}

/* Reduce bottom padding of cards */
.look-card .card-body,
.pattern-card .card-body,
.mockup-card .card-body {
    padding-bottom: 0.75rem;
}

/* Override Bootstrap table-primary to use theme colors */
.table-primary {
    --bs-table-bg: rgba(255, 0, 102, 0.1);
    --bs-table-color: #ff0066;
    --bs-table-border-color: rgba(255, 0, 102, 0.2);
}

/* FAQ page heading styles for better hierarchy */
.content-markdown h2 {
    /* font-size: 2.25rem; */ /* Larger than default h2 (2rem) */
    color: var(--headers);
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 600;
    border-bottom: 2px solid var(--primary-action);
    padding-bottom: 0.5rem;
}

.content-markdown h3 {
    font-size: 1.5rem; /* Smaller than default h3 (1.75rem) */
    color: var(--headers);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 500;
}