/* PREMIUM STORE PINK THEME - LIGHT & SOFT VISUALS
   Pure CSS Implementation - Matching Store Palette
*/

:root {
    /* Exact Store Colors from Screenshot */
    --store-bg: #fedbe7;          /* الخلفية */
    --store-bg-sub: #fca8c6;      /* الخلفية الثانوية */
    --store-elements: #ec528d;    /* خلفية العناصر */
    --store-identity: #d0306c;    /* هوية المتجر */
    --store-text-main: #3a1020;   /* النص الأساسي */
    --store-text-sub: #8c4b63;    /* النص الثانوي */

    /* Custom Gradients */
    --ai-gradient-primary: linear-gradient(135deg, #d0306c, #ec528d);
    --ai-gradient-vivid: linear-gradient(135deg, #ec528d, #fca8c6);
    
    /* Effects */
    --ai-neon-pink: 0 4px 15px rgba(236, 82, 141, 0.25);
    --ai-grid-opacity: 0.15;
}

/* ============================================
   1. SOFT PINK BACKGROUND (NO DARKNESS)
   ============================================ */

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

html {
    scroll-behavior: smooth;
}

/* خلفية المتجر الفاتحة بدال الأسوداد */
body {
    background: var(--store-bg) !important;
    color: var(--store-text-main) !important;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

/* شبكة خلفية لطيفة وناعمة */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(208, 48, 108, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(208, 48, 108, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

/* توهج وردي ناعم بالخلفية */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(252, 168, 198, 0.4) 0%, transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(236, 82, 141, 0.2) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   2. BROWSER WARNING TEXT
   ============================================ */

.w-full.whitespace-nowrap.text-center.text-primary-text {
    font-size: 115% !important;
    letter-spacing: 0.5px;
    color: var(--store-identity) !important;
    font-weight: 600;
}

/* ============================================
   3. HIDE SILVER TWEAKS BADGE
   ============================================ */

span.bg-primary.text-xs.text-nowrap.w-min.pb-9.pt-2.px-8.text-background.rounded-full:has(span:contains("تويكس الفضية")),
.absolute.z-0.-left-1.rtl\:-right-1.-top-6.w-full.flex.justify-end.items-end span.bg-primary {
    display: none !important;
}

/* ============================================
   4. PINK GLOW BAR
   ============================================ */

.absolute.z-0.-left-1.rtl\:-right-1.-top-6.w-full.flex.justify-end.items-end {
    display: block !important;
    height: 4px;
    background: linear-gradient(90deg, 
        transparent, 
        var(--store-elements), 
        var(--store-identity), 
        transparent);
    border-radius: 4px;
}

/* ============================================
   5. LIGHT CARDS DESIGN
   ============================================ */

.max-w-sm.md\:max-w-\[32rem\].mx-1\.5.lg\:mx-8 {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform: translate3d(0, 0, 0) !important;
}

.max-w-sm.md\:max-w-\[32rem\].mx-1\.5.lg\:mx-8:hover .relative.z-10.border {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 12px 25px rgba(208, 48, 108, 0.15) !important;
}

/* كروت بخلفية وردية فاتحة وناعمة */
.max-w-sm.md\:max-w-\[32rem\].mx-1\.5.lg\:mx-8 .relative.z-10.border {
    background: #ffffff !important;
    border: 2px solid var(--store-bg-sub) !important;
    border-radius: 28px !important;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

/* عنوان الباقة */
.max-w-sm.md\:max-w-\[32rem\].mx-1\.5.lg\:mx-8 .text-base.text-primary-text.font-bold {
    color: var(--store-identity) !important;
    font-size: 1.4rem;
}

/* السعر */
.max-w-sm.md\:max-w-\[32rem\].mx-1\.5.lg\:mx-8 .text-4xl.font-extrabold {
    color: var(--store-elements) !important;
}

/* قائمة المميزات */
.max-w-sm.md\:max-w-\[32rem\].mx-1\.5.lg\:mx-8 ul.list-disc {
    background: var(--store-bg) !important;
    border-radius: 16px;
    padding: 12px;
    color: var(--store-text-main) !important;
}

/* زر الاشتراك */
.max-w-sm.md\:max-w-\[32rem\].mx-1\.5.lg\:mx-8 button.w-10\/12 {
    background: linear-gradient(135deg, var(--store-elements), var(--store-identity)) !important;
    border: none !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
}

.max-w-sm.md\:max-w-\[32rem\].mx-1\.5.lg\:mx-8 button.w-10\/12:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(236, 82, 141, 0.4);
}

/* ============================================
   6. FEATURE GRID CARDS (LIGHT STYLE)
   ============================================ */

.w-full.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4.gap-x-3.lg\:gap-x-8.gap-y-3 > div,
.w-full.grid.grid-cols-1.md\:grid-cols-2.gap-x-3.lg\:gap-x-8.gap-y-3 > div {
    background: #ffffff !important;
    border: 1px solid var(--store-bg-sub) !important;
    border-radius: 20px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: var(--store-text-main) !important;
}

.w-full.grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-4.gap-x-3.lg\:gap-x-8.gap-y-3 > div:hover,
.w-full.grid.grid-cols-1.md\:grid-cols-2.gap-x-3.lg\:gap-x-8.gap-y-3 > div:hover {
    transform: translateY(-4px) !important;
    border-color: var(--store-elements) !important;
    box-shadow: 0 10px 20px rgba(236, 82, 141, 0.15) !important;
}

/* ============================================
   7. SCROLLBAR
   ============================================ */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--store-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--store-bg-sub);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--store-elements);
}