/**
 * SHL Promo Engine - Layout Studio CSS
 * Version: 5.8.0
 *
 * This file contains the modular styles for the 15+ 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-gsr-icon.shl-shape-circle { border-radius: 50% !important; }
.shl-gsr-icon.shl-shape-square { border-radius: 0 !important; }
.shl-gsr-icon.shl-shape-rounded { border-radius: 12px !important; }

/* Squircle Mask (Apple style) */
.shl-gsr-icon.shl-shape-squircle {
    border-radius: 0 !important;
}

/* Wavy Circle Mask (Android/Liquid style) */
.shl-gsr-icon.shl-shape-wavy {
    border-radius: 0 !important;
}

/* --- Texture Studio --- */
.shl-promo-container[class*="shl-texture-"]::before,
.shl-promo-container[class*="shl-texture-"]::after {
    border-radius: inherit;
}

.shl-texture-grain::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; 
    opacity: var(--shl-preset-texture-opacity, 0.30);
    filter: contrast(var(--shl-preset-texture-contrast, 1.0));
    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.50' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='2.2 2.2 2.2 0 -2.2  2.2 2.2 2.2 0 -2.2  2.2 2.2 2.2 0 -2.2  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    z-index: 1;
}

.shl-texture-linen::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; 
    opacity: var(--shl-preset-texture-opacity, 0.15);
    background-image: 
        linear-gradient(90deg, rgba(255,255,255,0.07) 50%, transparent 50%),
        linear-gradient(rgba(255,255,255,0.07) 50%, transparent 50%),
        linear-gradient(90deg, rgba(0,0,0,0.08) 50%, transparent 50%),
        linear-gradient(rgba(0,0,0,0.08) 50%, transparent 50%);
    background-size: 6px 6px, 6px 6px, 4px 4px, 4px 4px;
    z-index: 1;
}

.shl-texture-carbon::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; 
    opacity: var(--shl-preset-texture-opacity, 0.15);
    background: 
        linear-gradient(27deg, rgba(0,0,0,0.3) 5px, transparent 5px) 0 5px,
        linear-gradient(207deg, rgba(0,0,0,0.3) 5px, transparent 5px) 10px 0px,
        linear-gradient(27deg, rgba(255,255,255,0.15) 5px, transparent 5px) 0px 10px,
        linear-gradient(207deg, rgba(255,255,255,0.15) 5px, transparent 5px) 10px 5px,
        linear-gradient(90deg, rgba(0,0,0,0.15) 10px, transparent 10px),
        linear-gradient(rgba(0,0,0,0.2) 25%, rgba(0,0,0,0.1) 25%, rgba(0,0,0,0.1) 50%, transparent 50%);
    background-size: 20px 20px;
    mix-blend-mode: overlay;
    z-index: 1;
}

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

.shl-texture-metal::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; 
    opacity: var(--shl-preset-metal-sheen-opacity, 0.85);
    filter: brightness(var(--shl-preset-metal-sheen-brightness, 1.0));
    background: 
        linear-gradient(110deg, 
            rgba(0,0,0,0.15) 0%, 
            transparent 28%, 
            rgba(255,255,255,0.65) 38%, 
            rgba(255,255,255,0.92) 42%, 
            rgba(255,255,255,0.65) 46%, 
            transparent 56%, 
            rgba(0,0,0,0.15) 68%,
            rgba(255,255,255,0.5) 78%, 
            rgba(255,255,255,0.75) 81%, 
            rgba(255,255,255,0.5) 84%, 
            transparent 92%
        );
    mix-blend-mode: overlay;
    border-radius: inherit;
    z-index: 1;
}

.shl-texture-metal::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; 
    opacity: var(--shl-preset-metal-noise-opacity, 0.15);
    filter: contrast(var(--shl-preset-metal-noise-contrast, 1.0));
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85 0.003' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='3 3 3 0 -4.0  3 3 3 0 -4.0  3 3 3 0 -4.0  0 0 0 0.3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
    border-radius: inherit;
    z-index: 1;
}

.shl-texture-paper::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; 
    opacity: var(--shl-preset-texture-opacity, 0.22);
    filter: contrast(var(--shl-preset-texture-contrast, 1.0));
    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.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.08' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  1 0 0 0 -0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
    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: 200px;
    --shl-icon-top: -80px;
    --shl-icon-left: -50px;
    --shl-icon-radius: 50%; 
    --shl-icon-border: 7px;
    --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;  
}



/* --- 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;
    --shl-icon-moat: 7px;
    
    /* v5.2.8 Cleanup: Removed clip-path, background, and drop-shadow to allow shl_pe-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 Ticket (Notched Tear-Away Edges via clip-path) */
.shl-layout-ribbon {
    border: none;
    background: var(--shl-surface);
    filter: drop-shadow(0 4px 12px var(--shl-shadow));
    /* clip-path creates the scalloped left and right tear edges */
    clip-path: polygon(
        0%    0%,
        4%    0%,   4%    4%,   8%    0%,
        12%   0%,   12%   4%,  16%    0%,
        20%   0%,   20%   4%,  24%    0%,
        28%   0%,   28%   4%,  32%    0%,
        36%   0%,   36%   4%,  40%    0%,
        44%   0%,   44%   4%,  48%    0%,
        52%   0%,   52%   4%,  56%    0%,
        60%   0%,   60%   4%,  64%    0%,
        68%   0%,   68%   4%,  72%    0%,
        76%   0%,   76%   4%,  80%    0%,
        84%   0%,   84%   4%,  88%    0%,
        92%   0%,   92%   4%,  96%    0%,
        100%  0%,
        100%  96%, 96%  100%, 92%  96%,
        88%  100%, 84%  96%,  80% 100%,
        76%  100%, 76%  96%,  72% 100%,
        68%  100%, 68%  96%,  64% 100%,
        60%  100%, 60%  96%,  56% 100%,
        52%  100%, 52%  96%,  48% 100%,
        44%  100%, 44%  96%,  40% 100%,
        36%  100%, 36%  96%,  32% 100%,
        28%  100%, 28%  96%,  24% 100%,
        20%  100%, 20%  96%,  16% 100%,
        12%  100%, 12%  96%,   8% 100%,
        4%   100%,  4%  96%,   0% 100%
    );
}

/* 5. Lottery Scratch-Off */
.shl-layout-scratch {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--shl-surface);
    border: 1px solid var(--shl-border);
    border-radius: var(--shl-radius);
}
/* Scratch-off foil overlay: covers the card and reveals on hover or interaction */
.shl-layout-scratch::before {
    content: 'Scratch to Reveal';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    background: repeating-linear-gradient(
        135deg,
        #b8b8b8 0px,
        #c8c8c8 6px,
        #a0a0a0 6px,
        #b0b0b0 12px
    );
    z-index: 10;
    border-radius: inherit;
    pointer-events: none;
    transition: opacity 0.4s ease;
    /* clip-path creates the notched scratch-ticket bottom edge */
    clip-path: polygon(
        0% 0%, 100% 0%,
        100% 85%,
        97% 100%, 94% 85%,
        91% 100%, 88% 85%,
        85% 100%, 82% 85%,
        79% 100%, 76% 85%,
        73% 100%, 70% 85%,
        67% 100%, 64% 85%,
        61% 100%, 58% 85%,
        55% 100%, 52% 85%,
        49% 100%, 46% 85%,
        43% 100%, 40% 85%,
        37% 100%, 34% 85%,
        31% 100%, 28% 85%,
        25% 100%, 22% 85%,
        19% 100%, 16% 85%,
        13% 100%, 10% 85%,
        7%  100%,  4% 85%,
        0%  100%
    );
}
/* Reveal content on hover (desktop preview) */
.shl-layout-scratch:hover::before {
    opacity: 0;
    pointer-events: none;
}

/* 7. Inline Pill - inline-flex so text flows around it when block alignment is set */
.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);
    vertical-align: middle;
    margin: 10px auto;
}
.shl-layout-pill .shl-gsr-header {
    gap: 8px;
}
.shl-layout-pill .shl-gsr-icon {
    width: 32px !important;
    height: 32px !important;
    --shl-icon-moat: 2px;
}
.shl-layout-pill .shl-gsr-dev {
    display: none !important;
}
.shl-layout-pill .shl-gsr-title {
    font-size: 14px !important;
    margin: 0 !important;
}
.shl-layout-pill .shl-claim-section {
    margin: 0 !important;
}
.shl-layout-pill .shl-btn-primary {
    padding: 6px 14px !important;
    font-size: 11px !important;
    border-radius: 20px !important;
    width: auto !important;
    margin: 0 !important;
    line-height: 1 !important;
}
.shl-layout-pill .shl-promo-footer {
    margin: 0 !important;
}

/* 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. Modern Slate - display inline-block so text flows around it when block is aligned */
.shl-layout-minimalist {
    display: inline-block;
    border: none;
    box-shadow: none;
    padding: 10px 0;
    border-bottom: 2px solid var(--shl-border);
    border-radius: 0;
    vertical-align: top;
}

/* 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), var(--shl-gradient-to, #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;
}