/**
 * SHL Promo Engine - Layout Studio CSS
 * Version: 4.9.9
 * 
 * This file contains the modular styles for the 13+ promo card layouts,
 * icon shapes, and tactile textures.
 */

:root {
    --shl-primary: #1d2327;
    --shl-primary-rgb: 29, 35, 39;
    --shl-surface: #ffffff;
    --shl-text: #1d2327;
    --shl-text-dim: #646970;
    --shl-border: #dcdcde;
    --shl-shadow: rgba(0, 0, 0, 0.08);
    --shl-radius: 12px;
}

/* --- Theme Engine --- */
.shl-theme-dark {
    --shl-surface: #1C1C1E;
    --shl-text: #FFFFFF;
    --shl-text-dim: #8E8E93;
    --shl-border: #3A3A3C;
    --shl-shadow: rgba(0, 0, 0, 0.5);
}

/* Pulse Fix: Ensure auto-theme uses dark variables if system prefers dark */
@media (prefers-color-scheme: dark) {
    .shl-theme-auto {
        --shl-surface: #1C1C1E;
        --shl-text: #FFFFFF;
        --shl-text-dim: #8E8E93;
        --shl-border: #3A3A3C;
        --shl-shadow: rgba(0, 0, 0, 0.5);
    }
}

/* Visibility Guard: Force light text on dark surfaces if not explicitly themed */
.shl-layout-neon, .shl-layout-gradient {
    --shl-text: #FFFFFF;
    --shl-text-dim: rgba(255,255,255,0.7);
}

/* --- Shape Studio --- */
.shl-shape-circle { border-radius: 50% !important; }
.shl-shape-square { border-radius: 0 !important; }
.shl-shape-rounded { border-radius: 12px !important; }

/* Squircle Mask (Apple style) */
.shl-shape-squircle {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 50C0 10.5 10.5 0 50 0s50 10.5 50 50-10.5 50-50 50S0 89.5 0 50z'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    border-radius: 0 !important;
}

/* Wavy Circle Mask (Android/Liquid style) */
.shl-shape-wavy {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0c7.8 0 15 2.1 20.8 5.8C75.8 8.9 79 14.2 83.3 16.7c4.3 2.5 10.3 1.8 15 5 4.7 3.2 5.5 10 7.8 14.8 2.3 4.8 7.9 8.2 7.9 13.5s-5.6 8.7-7.9 13.5c-2.3 4.8-3.1 11.6-7.8 14.8-4.7 3.2-10.7 2.5-15 5-4.3 2.5-7.5 7.8-12.5 10.9-5.8 3.7-13 5.8-20.8 5.8s-15-2.1-20.8-5.8c-5-3.1-8.2-8.4-12.5-10.9-4.3-2.5-10.3-1.8-15-5-4.7-3.2-5.5-10-7.8-14.8-2.3-4.8-7.9-8.2-7.9-13.5s5.6-8.7 7.9-13.5c2.3-4.8 3.1-11.6 7.8-14.8 4.7-3.2 10.7-2.5 15-5 4.3-2.5 7.5-7.8 12.5-10.9C35 2.1 42.2 0 50 0z'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    border-radius: 0 !important;
}

/* --- Texture Studio --- */
.shl-texture-grain::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    z-index: 1;
}

.shl-texture-linen::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.05;
    background-image: repeating-linear-gradient(45deg, #000 0, #000 1px, transparent 0, transparent 50%), repeating-linear-gradient(-45deg, #000 0, #000 1px, transparent 0, transparent 50%);
    background-size: 4px 4px;
    z-index: 1;
}

.shl-texture-carbon::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.05;
    background: linear-gradient(45deg, #000 25%, transparent 25%), linear-gradient(-45deg, #000 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #000 75%), linear-gradient(-45deg, transparent 75%, #000 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px 4px, 4px 0;
    z-index: 1;
}

.shl-texture-stripes::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.03;
    background: repeating-linear-gradient(45deg, #000, #000 10px, transparent 10px, transparent 20px);
    z-index: 1;
}


/* --- Base Container --- */
.shl-promo-container {
    position: relative !important;
    overflow: visible !important; /* ALLOW FLOATING ICONS */
    background: var(--shl-surface);
    color: var(--shl-text) !important;
    border: 1px solid var(--shl-border);
    border-radius: var(--shl-radius);
    padding: 24px;
    box-shadow: 0 4px 12px var(--shl-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
    max-width: 520px;
    margin: 60px auto 40px auto;
}

.shl-promo-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--shl-shadow);
}

/* Layout Freeze: Stops 'strobe' flickering by disabling background activity during modals */
body.shl-modal-active .shl-promo-container {
    transform: none !important;
    transition: none !important;
    pointer-events: none !important; /* Forces background to ignore mouse tracing through the blur */
    box-shadow: 0 4px 12px var(--shl-shadow) !important;
    user-select: none !important;
}

.shl-gsr-header {
    display: flex;
    align-items: center;
    gap: 18px;
    text-align: left;
}

.shl-gsr-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #000;
}

.shl-gsr-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* --- Core Classic Premium Restoration (Balanced Variations) --- */
.shl-layout-classic,
.shl-layout-classic-premium,
.shl-layout-classic-top,
.shl-layout-classic-bottom {
    --shl-surface: #1C1C1E;
    --shl-border: #3A3A3C;
    --shl-text: #FFFFFF;
    --shl-text-dim: #8E8E93;
    
    /* Layout Default Geometry (Circle) */
    --shl-icon-size: 246px;
    --shl-icon-top: -101px;
    --shl-icon-left: -90px;
    --shl-icon-radius: 50%; 
    --shl-icon-border: 13px;
    --shl-icon-pos: absolute; /* Floating premium look */
    
    background-color: var(--shl-surface) !important;
    border: 1px solid var(--shl-border) !important;
    color: var(--shl-text) !important;
    padding: 24px !important;
    border-radius: var(--shl-radius) !important;
    overflow: visible !important; 
    margin-top: 80px !important;  
}

/* --- Per-Shape Geometry Customization (Shape-by-Shape sizing) --- */
.shl-layout-classic.shl-shape-square .shl-gsr-icon,
.shl-layout-classic-premium.shl-shape-square .shl-gsr-icon,
.shl-layout-classic-top.shl-shape-square .shl-gsr-icon,
.shl-layout-classic-bottom.shl-shape-square .shl-gsr-icon {
    --shl-icon-size: 325px; 
    --shl-icon-top: -100px;
    --shl-icon-left: -85px;
}

.shl-layout-classic.shl-shape-squircle .shl-gsr-icon,
.shl-layout-classic-premium.shl-shape-squircle .shl-gsr-icon,
.shl-layout-classic-top.shl-shape-squircle .shl-gsr-icon,
.shl-layout-classic-bottom.shl-shape-squircle .shl-gsr-icon {
    --shl-icon-size: 340px;
    --shl-icon-top: -105px;
    --shl-icon-left: -90px;
}

.shl-layout-classic.shl-shape-rounded .shl-gsr-icon,
.shl-layout-classic-premium.shl-shape-rounded .shl-gsr-icon,
.shl-layout-classic-top.shl-shape-rounded .shl-gsr-icon,
.shl-layout-classic-bottom.shl-shape-rounded .shl-gsr-icon {
    --shl-icon-size: 345px;
    --shl-icon-top: -108px;
    --shl-icon-left: -92px;
}

/* --- Enriched Icon Geometry (Variable Driven + Synthetic Border Sync) --- */
.shl-layout-classic .shl-gsr-icon,
.shl-layout-classic-premium .shl-gsr-icon,
.shl-layout-classic-top .shl-gsr-icon,
.shl-layout-classic-bottom .shl-gsr-icon {
    /* Floating Icon Logic: Remove from flow to allow text-overlay */
    position: var(--shl-icon-pos, absolute) !important;
    top: var(--shl-icon-top, -101px) !important;
    left: var(--shl-icon-left, -90px) !important;
    
    width: var(--shl-icon-size) !important;
    height: var(--shl-icon-size) !important;
    
    /* v5.2.8 Cleanup: Removed clip-path, background, and drop-shadow to allow shl-style.css mastery */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.shl-layout-classic .shl-gsr-info,
.shl-layout-classic-premium .shl-gsr-info,
.shl-layout-classic-top .shl-gsr-info,
.shl-layout-classic-bottom .shl-gsr-info {
    flex-grow: 1;
    margin-left: 175px !important; /* Recalculated clearance (246px size @ -90px offset) */
    position: relative;
    z-index: 2;
}

/* --- Classic Structural Core (Unified Positioning) --- */
.shl-layout-classic .shl-gsr-header,
.shl-layout-classic-premium .shl-gsr-header,
.shl-layout-classic-top .shl-gsr-header,
.shl-layout-classic-bottom .shl-gsr-header {
    display: flex;
    align-items: center;
    position: relative;
    text-align: left;
    min-height: 110px; /* Unified clearance height */
    padding: 24px;
    border-radius: var(--shl-radius);
    box-sizing: border-box;
}

/* --- Variant Theme Overrides --- */

/* Variant: Seamless Hero (Classic) */
.shl-layout-classic .shl-gsr-header {
    background: transparent;
    border: none;
    padding: 24px 0;
    margin-bottom: 20px;
}

/* Variant: Top Box (Premium / Top) */
.shl-layout-classic-top .shl-gsr-header,
.shl-layout-classic-premium .shl-gsr-header {
    background: #2C2C2E;
    border: 1px solid var(--shl-border);
    margin-bottom: 25px;
}

/* Variant: Bottom Box */
.shl-layout-classic-bottom .shl-gsr-header {
    background: transparent;
    border: none;
    padding: 24px 0; /* Align with seamless look at top */
    margin-bottom: 10px;
}

.shl-layout-classic-bottom .shl-success-box {
    background: #2C2C2E !important;
    border: 1px solid var(--shl-border) !important;
    border-radius: var(--shl-radius) !important;
    padding: 24px !important;
    margin-top: 10px !important;
}

.shl-layout-classic-premium .shl-gsr-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--shl-text) !important;
    margin-bottom: 2px !important;
}

.shl-layout-classic-premium .shl-gsr-dev {
    color: var(--shl-text-dim) !important;
    font-size: 15px !important;
}

.shl-layout-classic-premium .shl-btn-primary {
    border-radius: 6px !important;
    padding: 14px 24px !important;
}

/* --- Layout Gallery (Legacy Support) --- */


/* 1. Glassmorphism */
.shl-layout-glass {
    background: rgba(var(--shl-primary-rgb), 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--shl-primary-rgb), 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
}

/* 2. Social Media Card */
.shl-layout-social {
    padding: 0;
    border: none;
    background: transparent;
}
.shl-layout-social .shl-art-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--shl-primary);
    border-radius: var(--shl-radius) var(--shl-radius) 0 0;
    overflow: hidden;
    position: relative;
}
.shl-layout-social .shl-content {
    padding: 20px;
    background: var(--shl-surface);
    border: 1px solid var(--shl-border);
    border-top: none;
    border-radius: 0 0 var(--shl-radius) var(--shl-radius);
}

/* 3. Split-Pane */
.shl-layout-split {
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 0;
}
.shl-layout-split .shl-pane-left {
    flex: 1;
    padding: 24px;
    background: rgba(var(--shl-primary-rgb), 0.05);
}
.shl-layout-split .shl-pane-right {
    flex: 1.5;
    padding: 24px;
}

/* 4. Perforated Ribbon (Ticket) */
.shl-layout-ribbon {
    border: none;
    background: var(--shl-surface);
    filter: drop-shadow(0 4px 8px var(--shl-shadow));
    mask-image: radial-gradient(circle at 0 50%, transparent 12px, black 12px);
}
.shl-layout-ribbon::after {
    content: ''; position: absolute; top: 0; right: 0; width: 12px; height: 100%;
    background-image: radial-gradient(circle at 12px 50%, transparent 12px, var(--shl-surface) 12px);
    background-size: 24px 24px;
    background-position: 0 0;
}

/* 7. Inline Pill (Minimalist) */
.shl-layout-pill {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    padding: 6px 16px;
    border-radius: 50px;
    gap: 12px;
    max-width: fit-content;
    box-shadow: 0 2px 6px var(--shl-shadow);
}

/* 8. Neon Glow */
.shl-layout-neon {
    border: 2px solid var(--shl-primary);
    box-shadow: 0 0 15px var(--shl-primary), inset 0 0 5px var(--shl-primary);
    background: #000;
}
.shl-layout-neon .shl-gsr-title { text-shadow: 0 0 10px var(--shl-primary); }

/* 9. Minimalist */
.shl-layout-minimalist {
    border: none;
    box-shadow: none;
    padding: 10px 0;
    border-bottom: 2px solid var(--shl-border);
    border-radius: 0;
}

/* 10. Floating Bubble */
.shl-layout-floating {
    border-radius: 40px;
    animation: shl-bounce 4s infinite ease-in-out;
}
@keyframes shl-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* 11. Neumorphic */
.shl-layout-neumorphic {
    background: var(--shl-surface);
    box-shadow: 10px 10px 20px #bebebe, -10px -10px 20px #ffffff;
    border: none;
}
.shl-theme-dark .shl-layout-neumorphic {
    box-shadow: 5px 5px 15px #14181a, -5px -5px 15px #262e34;
}

/* 12. Gradient Blast */
.shl-layout-gradient {
    background: linear-gradient(135deg, var(--shl-primary), #6366f1);
    color: #fff;
}
.shl-layout-gradient .shl-text-dim { color: rgba(255,255,255,0.7); }

/* 13. High Contrast Grid */
.shl-layout-grid {
    text-align: center;
    padding: 40px 20px;
    border: 3px solid var(--shl-text);
}

/* --- Helpers --- */
.shl-float-left { float: left; margin: 0 24px 24px 0; }
.shl-float-right { float: right; margin: 0 0 24px 24px; }
.shl-full-width { width: 100%; clear: both; margin-bottom: 24px; }

/* --- Global Modal System (Current Standards) --- */
.shl-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

.shl-modal-content {
    background: var(--shl-surface);
    border: 1px solid var(--shl-border);
    padding: 25px;
    border-radius: var(--shl-radius);
    max-width: 500px;
    width: 90%;
    box-shadow: 0 10px 30px var(--shl-shadow);
    text-align: left;
    color: var(--shl-text);
}

.shl-modal-content h3 {
    margin-top: 0;
    color: var(--shl-text);
}

.shl-modal-content p {
    color: var(--shl-text-dim);
    font-size: 14px;
    line-height: 1.6;
}

.shl-modal-content strong {
    color: var(--shl-text);
}

/* Mini Preview Scaler (for Admin Gallery) */
.shl-mini-preview {
    transform: scale(0.6);
    transform-origin: top left;
    pointer-events: none;
}