/* style1.css */

@font-face {
    font-family: 'Dana';
    src: url('fonts/Dana-Regular.woff2') format('woff2'),
         url('fonts/Dana-Regular.woff') format('woff'),
         url('fonts/Dana-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Dana';
    src: url('fonts/Dana-DemiBold.woff2') format('woff2'),
         url('fonts/Dana-DemiBold.woff') format('woff'),
         url('fonts/Dana-DemiBold.ttf') format('truetype');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Dana';
    src: url('fonts/Dana-Bold.woff2') format('woff2'),
         url('fonts/Dana-Bold.woff') format('woff'),
         url('fonts/Dana-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Dana';
    src: url('fonts/Dana-ExtraBold.woff2') format('woff2'),
         url('fonts/Dana-ExtraBold.woff') format('woff'),
         url('fonts/Dana-ExtraBold.ttf') format('truetype');
    font-weight: 800; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------- */
/* 2. Theme Variables                                      */
/* ------------------------------------------------------- */
body { font-family: 'Dana', 'Vazirmatn', sans-serif !important; }

:root {
    --brand-50: #fbf7ff; --brand-100: #f5efff; --brand-200: #ede4ff; 
    --brand-300: #d8b4fe; --brand-400: #a78bfa; --brand-500: #8b5cf6; 
    --brand-600: #7c3aed; --brand-700: #6d28d9; --brand-900: #4c1d95;
    
    --pink-200: #fbcfe8; --pink-300: #f9a8d4; --pink-500: #ec4899; 
    --pink-600: #db2777; --pink-700: #be185d; --pink-900: #831843;

    --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; 
    --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; 
    --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; 
    --slate-900: #0f172a; --slate-950: #020617;

    --emerald-50: #ecfdf5; --emerald-100: #d1fae5; --emerald-400: #34d399; 
    --emerald-500: #10b981; --emerald-600: #059669; --emerald-800: #065f46; --emerald-900: #064e3b;
    --teal-500: #14b8a6;

    --bg-body: #f3f0ff;
    --text-main: var(--slate-700);
    --bg-glass: rgba(255, 255, 255, 0.8);
    --border-glass: rgba(255, 255, 255, 0.5);
    --bg-input: rgba(251, 247, 255, 0.5);
    --text-input: var(--slate-700);
    --placeholder: var(--slate-400);
    --bg-card: rgba(255, 255, 255, 0.8);
}

.dark {
    --bg-body: var(--slate-950);
    --text-main: var(--slate-200);
    --bg-glass: rgba(30, 41, 59, 0.8);
    --border-glass: rgba(255, 255, 255, 0.1);
    --bg-input: rgba(15, 23, 42, 0.5);
    --text-input: var(--slate-200);
    --placeholder: var(--slate-500);
    --bg-card: rgba(30, 41, 59, 0.8);
}

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

body {
    background-color: var(--bg-body); color: var(--text-main);
    min-height: 100vh; position: relative; overflow-x: hidden; padding-bottom: 3rem;
    transition: background-color 0.3s, color 0.3s;
}

.font-fa { font-family: 'Vazirmatn', sans-serif; }
.font-en { font-family: 'Inter', sans-serif; }

.hidden { display: none !important; }
.flex-row { display: flex; align-items: center; gap: 0.5rem; }

/* ------------------------------------------------------- */
/* Background Effect */
/* ------------------------------------------------------- */
.bg-blobs { position: fixed; inset: 0; z-index: -10; pointer-events: none; overflow: hidden; }
.blob { position: absolute; width: 24rem; height: 24rem; border-radius: 50%; filter: blur(3rem); opacity: 0.3; animation: blobAnim 10s infinite; mix-blend-mode: multiply; }
.dark .blob { mix-blend-mode: overlay; }
.blob-1 { top: 0; left: 25%; background-color: var(--brand-300); }
.dark .blob-1 { background-color: rgba(76, 29, 149, 0.3); }
.blob-2 { bottom: 0; right: 25%; background-color: var(--pink-200); animation-delay: 2s; }
.dark .blob-2 { background-color: rgba(131, 24, 67, 0.3); }

@keyframes blobAnim {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

.main-container { max-width: 64rem; margin: 0 auto; padding: 2rem 1rem 0; }

/* Header Elements */
.header-section { display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin-bottom: 2rem; gap: 1rem; }
@media (min-width: 768px) { .header-section { flex-direction: row; } }
.header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; justify-content: center; width: 100%; }
@media (min-width: 768px) { .header-actions { justify-content: flex-start; width: auto; } }

.btn-glass { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.6); color: var(--brand-700); font-weight: 700; font-size: 0.875rem; border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: all 0.3s; text-decoration: none; }
.dark .btn-glass { background: rgba(30, 41, 59, 0.6); color: var(--brand-300); border-color: rgba(255, 255, 255, 0.1); }
.btn-glass:hover { background: #fff; } .dark .btn-glass:hover { background: var(--slate-700); }

.btn-gradient { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border-radius: 9999px; background: var(--slate-900); color: #fff; font-weight: 700; font-size: 0.875rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.2); transition: all 0.3s; text-decoration: none; }
.dark .btn-gradient { background: #fff; color: var(--slate-900); box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.05); }
.gradient-overlay { position: absolute; inset: 0; background: linear-gradient(to right, var(--brand-600), var(--pink-600)); opacity: 0; transition: opacity 0.3s; }
.btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
.btn-gradient:hover .gradient-overlay { opacity: 1; }
.btn-content { position: relative; z-index: 10; display: flex; align-items: center; gap: 0.5rem; }
.dark .btn-gradient:hover .btn-content { color: white; }

.divider { width: 1px; height: 1.5rem; background: var(--slate-300); margin: 0 0.25rem; }
.dark .divider { background: var(--slate-700); }
@media (max-width: 767px) { .hide-mobile { display: none !important; } }
@media (min-width: 768px) { .hide-desktop { display: none !important; } }

.btn-circle { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.6); color: var(--slate-600); border: 1px solid rgba(255, 255, 255, 0.5); cursor: pointer; transition: all 0.3s; }
.dark .btn-circle { background: rgba(30, 41, 59, 0.6); color: #facc15; border-color: rgba(255, 255, 255, 0.1); }
.btn-circle:hover { background: #fff; } .dark .btn-circle:hover { background: var(--slate-700); }
.dark .light-icon { display: none; }
.dark-icon { display: none; color: var(--brand-300); }
.dark .dark-icon { display: inline-block; }

.btn-lang { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; border-radius: 9999px; background: var(--brand-50); color: var(--brand-600); font-weight: 700; font-size: 0.75rem; text-decoration: none; border: 1px solid rgba(237, 228, 255, 0.5); transition: all 0.3s; }
.dark .btn-lang { background: var(--slate-800); color: var(--brand-400); border-color: rgba(255, 255, 255, 0.1); }
.btn-lang:hover { background: #fff; } .dark .btn-lang:hover { background: var(--slate-700); }

.sys-status { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.5); }
.dark .sys-status { background: rgba(30, 41, 59, 0.4); border-color: rgba(255, 255, 255, 0.1); }
.status-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--emerald-500); }
.status-text { font-size: 0.75rem; font-weight: 700; color: var(--slate-500); }
.dark .status-text { color: var(--slate-400); }

/* Glass Panel & Form */
.glass-panel { background: var(--bg-glass); border-radius: 2.5rem; padding: 1.5rem; position: relative; z-index: 10; transition: background-color 0.3s; border: 1px solid var(--border-glass); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
@media (min-width: 768px) { .glass-panel { padding: 2.5rem; } }
.panel-header { text-align: center; margin-bottom: 2.5rem; }
.logo-wrapper { display: inline-block; position: relative; margin-bottom: 1rem; }
.logo-glow { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(to top right, var(--brand-300), var(--pink-300)); filter: blur(8px); opacity: 0.4; transition: opacity 0.3s; }
.dark .logo-glow { background: linear-gradient(to top right, var(--brand-900), var(--pink-900)); }
.logo-wrapper:hover .logo-glow { opacity: 0.6; }
.logo-circle { position: relative; width: 6rem; height: 6rem; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0.25rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); border: 4px solid rgba(255,255,255,0.8); }
.dark .logo-circle { background: var(--slate-800); border-color: rgba(51, 65, 85, 0.8); }
.logo-img { width: 4rem; object-fit: contain; }
.headline-title { font-size: 1.5rem; font-weight: 900; color: var(--slate-800); letter-spacing: -0.025em; }
.dark .headline-title { color: var(--slate-100); }

.tracking-form { max-width: 48rem; margin: 0 auto 2.5rem; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; background: rgba(255, 255, 255, 0.6); padding: 0.75rem; border-radius: 1.5rem; border: 1px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: background-color 0.3s, border-color 0.3s; }
.dark .form-grid { background: rgba(30, 41, 59, 0.5); border-color: rgba(255, 255, 255, 0.1); }
@media (min-width: 768px) { .form-grid { grid-template-columns: repeat(12, 1fr); } }

.input-group { position: relative; }
@media (min-width: 768px) { .input-group { grid-column: span 5; } }
.input-icon { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; pointer-events: none; color: var(--slate-400); }
.dark .input-icon { color: var(--slate-500); }
.right-0 { right: 0; } .left-0 { left: 0; } .pr-4 { padding-right: 1rem; } .pl-4 { padding-left: 1rem; } .pr-10 { padding-right: 2.5rem; } .pl-10 { padding-left: 2.5rem; }

.custom-input { width: 100%; height: 3.5rem; background: var(--bg-input); border: none; border-radius: 1rem; outline: none; color: var(--text-input); font-weight: 700; font-family: inherit; font-size: 1rem; transition: background-color 0.3s, color 0.3s; }
.custom-input::placeholder { color: var(--placeholder); font-weight: 400; }

.submit-group { display: block; }
@media (min-width: 768px) { .submit-group { grid-column: span 2; } }
.btn-submit { width: 100%; height: 3.5rem; background: var(--brand-600); color: #fff; border: none; border-radius: 1rem; font-weight: 700; font-size: 1.125rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.3); transition: all 0.2s; font-family: inherit; }
.btn-submit:hover { background: var(--brand-700); }
.dark .btn-submit { background: var(--brand-700); } .dark .btn-submit:hover { background: var(--brand-600); }
.btn-submit:active { transform: scale(0.95); }

/* Quick Access */
.quick-access-section { margin-top: 3rem; margin-bottom: 2rem; }
.section-title { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; padding: 0 1rem; }
.section-title .status-dot { width: 0.75rem; height: 0.75rem; background: var(--brand-500); }
.section-title h2 { font-size: 1.25rem; font-weight: 700; color: var(--slate-700); }
.dark .section-title h2 { color: var(--slate-200); }

.categories-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .categories-grid { grid-template-columns: repeat(3, 1fr); } }
.category-card { position: relative; background: var(--bg-card); display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: 1rem; border: 1px solid var(--border-glass); box-shadow: 0 1px 2px rgba(0,0,0,0.05); text-decoration: none; overflow: hidden; transition: all 0.3s; }
.category-card:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); background: #fff; }
.dark .category-card:hover { background: var(--slate-700); }
.card-border { position: absolute; top: 0; bottom: 0; width: 0.25rem; opacity: 0; transition: opacity 0.3s; }
.category-card:hover .card-border { opacity: 1; }
.card-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: inset 0 2px 4px rgba(0,0,0,0.06); transition: transform 0.3s; }
.dark .card-icon { box-shadow: none; background: var(--slate-900); color: var(--brand-400); }
.category-card:hover .card-icon { transform: scale(1.1); }
.card-text h3 { font-size: 0.875rem; font-weight: 700; color: var(--slate-700); transition: color 0.3s; }
.dark .card-text h3 { color: var(--slate-200); }
.category-card:hover .card-text h3 { color: var(--brand-700); }
.dark .category-card:hover .card-text h3 { color: var(--brand-300); }
.card-text span { font-size: 0.625rem; color: var(--slate-400); display: flex; align-items: center; gap: 0.25rem; margin-top: 0.25rem; }
.dark .card-text span { color: var(--slate-500); }
.category-card:hover .card-text span { color: var(--brand-400); }
@media (min-width: 768px) { .card-text h3 { font-size: 1rem; } }

/* Modals */
.modal-wrapper { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(12px); opacity: 0; transition: opacity 0.3s; }
.modal-backdrop.bg-light { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); }
.modal-content-wrap { position: relative; width: 100%; display: flex; justify-content: center; }
.modal-panel { position: relative; width: 100%; transform: scale(0.95); opacity: 0; transition: all 0.3s; }
.max-w-4xl { max-width: 56rem; } .max-w-md { max-width: 28rem; }

.btn-close-modal { position: absolute; top: -3rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255,255,255,0.1); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 50; transition: background 0.2s; }
.btn-close-modal:hover { background: rgba(255,255,255,0.2); }
.right-pos { right: 0; } .left-pos { left: 0; }
@media (min-width: 768px) { .right-pos { right: -3rem; } .left-pos { left: -3rem; } }

.media-container { background: #000; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); position: relative; border: 1px solid rgba(255,255,255,0.1); min-height: 300px; display: flex; align-items: center; justify-content: center; }
.media-element { width: 100%; max-height: 80vh; object-fit: contain; }
.media-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; background: linear-gradient(to top, rgba(0,0,0,1), transparent); display: flex; justify-content: space-between; align-items: flex-end; transform: translateY(1rem); opacity: 0; transition: all 0.3s; pointer-events: none; }
.media-container:hover .media-overlay { transform: translateY(0); opacity: 1; }
.media-info, .btn-download { pointer-events: auto; }
.media-label { color: rgba(255,255,255,0.6); font-size: 0.75rem; margin-bottom: 0.25rem; }
.media-id { color: white; font-family: monospace; font-weight: 700; font-size: 1.25rem; }
.btn-download { background: #fff; color: #000; padding: 0.625rem 1.25rem; border-radius: 0.75rem; font-weight: 700; font-size: 0.875rem; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; transition: background 0.2s; }
.btn-download:hover { background: var(--brand-50); }

/* Delivery Modal Styling */
.delivery-card { background: #fff; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.2); position: relative; font-family: 'Dana', 'Vazirmatn', sans-serif;}
.dark .delivery-card { background: var(--slate-800); border-color: var(--slate-700); }
.delivery-header { height: 8rem; background: linear-gradient(to right, var(--emerald-400), var(--teal-500)); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.header-bg-icons { position: absolute; inset: 0; opacity: 0.2; pointer-events: none; }
.icon-gift { position: absolute; right: -1rem; top: -1rem; font-size: 8rem; transform: rotate(12deg); color: white; }
.icon-shapes { position: absolute; left: 1rem; bottom: 1rem; font-size: 4rem; color: white; }
.success-badge { width: 5rem; height: 5rem; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); position: relative; z-index: 10; animation: bounceBadge 2s infinite; }
.dark .success-badge { background: var(--slate-800); }
.success-badge .icon { font-size: 2.25rem; color: var(--emerald-500); }
.delivery-body { padding: 1.5rem; text-align: center; }
.del-title { font-size: 1.5rem; font-weight: 900; color: var(--slate-800); margin-bottom: 1rem; }
.dark .del-title { color: #fff; }
.del-msg { color: var(--slate-600); font-size: 0.875rem; line-height: 1.6; margin-bottom: 1.5rem; }
.dark .del-msg { color: var(--slate-300); }
.discount-box { margin: 1.5rem 0; padding: 1rem; border: 2px dashed var(--brand-200); border-radius: 1rem; background: var(--brand-50); position: relative; cursor: pointer; transition: background 0.2s; }
.dark .discount-box { border-color: rgba(139, 92, 246, 0.3); background: rgba(76, 29, 149, 0.1); }
.discount-box:hover { background: #f5efff; }
.discount-label { font-size: 0.75rem; color: var(--brand-500); font-weight: 700; margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.05em; }
.dark .discount-label { color: var(--brand-400); }
.code-wrapper { display: flex; justify-content: center; align-items: center; gap: 0.75rem; }
.discount-code { font-size: 1.25rem; font-weight: 900; color: var(--brand-700); font-family: monospace; letter-spacing: 0.1em; }
.dark .discount-code { color: var(--brand-300); }
.icon-copy { color: var(--brand-400); transition: color 0.2s; }
.discount-box:hover .icon-copy { color: var(--brand-600); }
.copy-toast { position: absolute; inset: 0; background: rgba(124, 58, 237, 0.9); color: white; display: flex; align-items: center; justify-content: center; border-radius: 0.75rem; font-weight: 700; font-size: 0.875rem; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.action-buttons { display: flex; flex-direction: column; gap: 0.75rem; }
.btn-shop { width: 100%; padding: 0.875rem; background: var(--brand-600); color: white; border-radius: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.3); transition: all 0.2s; }
.btn-shop:hover { background: var(--brand-700); transform: translateY(-2px); }
.btn-shop:active { transform: scale(0.95); }
.btn-whatsapp { width: 100%; padding: 0.875rem; background: var(--emerald-50); color: var(--emerald-600); border: 1px solid var(--emerald-100); border-radius: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; transition: all 0.2s; }
.dark .btn-whatsapp { background: rgba(6, 78, 59, 0.2); color: var(--emerald-400); border-color: var(--emerald-800); }
.btn-whatsapp:hover { background: var(--emerald-100); }
.dark .btn-whatsapp:hover { background: rgba(6, 78, 59, 0.4); }
.btn-close-small { position: absolute; top: 0.5rem; right: 0.5rem; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(0,0,0,0.2); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.btn-close-small:hover { background: rgba(0,0,0,0.4); }

.floating-btn { position: fixed; bottom: 1rem; z-index: 50; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: 9999px; background: var(--pink-600); color: white; font-weight: 700; font-size: 0.875rem; text-decoration: none; box-shadow: 0 20px 25px -5px rgba(219, 39, 119, 0.5); transition: all 0.3s; }
.floating-btn:hover { background: var(--pink-700); transform: scale(1.05); }
.floating-btn:active { transform: scale(0.95); }
.floating-btn .icon { font-size: 1.125rem; }
.floating-btn:hover .icon-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@media (max-width: 640px) { .show-mobile { display: inline !important; } }

/* Animations */
@keyframes fadeIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
@keyframes pulse { 50% { opacity: .5; } }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }
@keyframes bounceBadge { 0%, 100% { transform: translateY(-10%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }

/* Vectors Masks */
.icon { display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; vertical-align: middle; }
.fa-arrow-right { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0-105.4 105.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E"); }
.fa-arrow-left { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0 105.4-105.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E"); }
.fa-circle-user { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M399 384.2C376.9 345.8 335.4 320 288 320l-64 0c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z'/%3E%3C/svg%3E"); }
.fa-sun { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 0 192 0 96 96 0 1 0 -192 0zm224 0a128 128 0 1 1 -256 0 128 128 0 1 1 256 0z'/%3E%3C/svg%3E"); }
.fa-moon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z'/%3E%3C/svg%3E"); }
.fa-globe { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M352 256c0 22.2-1.2 43.6-3.3 64l-185.3 0c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64l185.3 0c2.2 20.4 3.3 41.8 3.3 64zm28.8-64l123.1 0c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64l-123.1 0c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32l-116.7 0c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0l-176.6 0c9.5-41.6 24.6-78.7 44.5-108.3c21.2-31.4 46.1-51.7 72-51.7s50.8 20.3 72 51.7c19.8 29.6 35 66.7 44.5 108.3zm-205.4 0L22.2 160C52.1 85.9 115.9 29.1 194.2 8.4C168.7 42.6 148.9 96.1 138.9 160zM8.1 192l123.1 0c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64L8.1 320C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.2 503.6c-78.3-20.7-142-77.5-171.9-151.6l116.7 0c10 63.9 29.8 117.4 55.3 151.6zm106.9 0c25.5-34.2 45.3-87.7 55.3-151.6l116.7 0c-29.9 74.1-93.6 130.9-171.9 151.6zm-15.5-151.6l-176.6 0c-9.5 41.6-24.6 78.7-44.5 108.3c-21.2 31.4-46.1 51.7-72 51.7s-50.8-20.3-72-51.7c-19.8-29.6-35-66.7-44.5-108.3z'/%3E%3C/svg%3E"); }
.fa-hashtag { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M181.3 32.4c17.4 2.9 29.2 19.4 26.3 36.8L197.8 128l95.1 0 11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3s29.2 19.4 26.3 36.8L355.7 128l57.1 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-67.7 0-21.3 128 67.7 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-78.4 0-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8l9.8-58.7-95.1 0-11.5 69.3c-2.9 17.4-19.4 29.2-36.8 26.3s-29.2-19.4-26.3-36.8L151 384l-57.1 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l67.7 0 21.3-128-67.7 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l78.4 0 11.5-69.3c2.9-17.4 19.4-29.2 36.8-26.3zM187.1 192L165.8 320l95.1 0 21.3-128-95.1 0z'/%3E%3C/svg%3E"); }
.fa-user-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM625 177L497 305c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L591 143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E"); }
.fa-magnifying-glass { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E"); }
.fa-circle-notch { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M224 256A256 256 0 1 0 224 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z'/%3E%3C/svg%3E"); }
.fa-angle-left { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E"); }
.fa-angle-right { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E"); }
.fa-xmark { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E"); }
.fa-download { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/svg%3E"); }
.fa-gift { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M190.5 68.8L225.3 128H224 152c-22.1 0-40-17.9-40-40s17.9-40 40-40h2.2c14.9 0 28.8 7.9 36.3 20.8zM64 88c0 44.2 35.8 80 80 80h80V32h-2.2C169.1 32 127 57.5 106.3 100.4C79.6 92.6 64 69 64 48c0-26.5 21.5-48 48-48h80c44.2 0 80 35.8 80 80v80h80c44.2 0 80-35.8 80-80s-35.8-80-80-80h-2.2c-52.7 0-98.1 25.5-118.7 68.4C304.4 25.5 259.1 0 206.4 0H204.2C151.5 0 106.1 25.5 85.5 68.4C64.8 25.5 19.4 0-33.3 0h-2.2zM288 168V32h80c26.5 0 48 21.5 48 48s-21.5 48-48 48H288zm0 136H480v144c0 35.3-28.7 64-64 64H288V304zM32 304h192V512H96c-35.3 0-64-28.7-64-64V304z'/%3E%3C/svg%3E"); }
.fa-shapes { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M208 32c0-17.7 14.3-32 32-32h32c17.7 0 32 14.3 32 32v29.5c0 14.7-9.5 27.5-23.7 31.4L184.2 120.3c-13.6 3.7-27.8-3.4-33-16.5l-9.8-24.8C136.2 65.9 146.4 51.5 161 47.6L208 34.9V32zM32 288c-17.7 0-32 14.3-32 32v32c0 17.7 14.3 32 32 32h29.5c14.7 0 27.5-9.5 31.4-23.7l27.4-96.1c3.7-13.6-3.4-27.8-16.5-33l-24.8-9.8c-13.1-5.2-27.5 5-31.4 19.6L34.9 288H32zm448 0h-2.9l-13.1-46.7c-3.9-14.6-18.3-24.8-31.4-19.6l-24.8 9.8c-13.1 5.2-20.2 19.4-16.5 33l27.4 96.1c3.9 14.2 16.7 23.7 31.4 23.7H480c17.7 0 32-14.3 32-32v-32c0-17.7-14.3-32-32-32zM304 480v2.9c0 14.7-9.5 27.5-23.7 31.4l-96.1 27.4c-13.6 3.7-27.8-3.4-33-16.5l-9.8-24.8c-5.2-13.1 5-27.5 19.6-31.4l46.7-13.1V480h96.3z'/%3E%3C/svg%3E"); }
.fa-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E"); }
.fa-copy { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256v-48h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z'/%3E%3C/svg%3E"); }
.fa-cart-shopping { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41.1 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E"); }
.fa-whatsapp { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zM223.9 414.7c-33 0-65.3-8.9-93.6-25.7l-6.7-4-69.5 18.2 18.6-67.8-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 54 81.3 54 130.6 0 101.9-82.8 184.3-184.6 184.3z'/%3E%3C/svg%3E"); }
.fa-file-invoice { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM112 256H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64H272c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16z'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------- */
/* 11. Redesigned Tracking UI Classes (Pure CSS)           */
/* ------------------------------------------------------- */

/* Header Error Box */
.error-box { max-width: 42rem; margin: 0 auto; padding: 1rem; border-radius: 1rem; background-color: rgba(255, 228, 230, 0.8); border: 1px solid rgba(254, 205, 211, 1); color: #e11d48; display: flex; align-items: center; justify-content: center; gap: 0.75rem; font-weight: 700; font-size: 0.875rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.dark .error-box { background-color: rgba(136, 19, 55, 0.2); border-color: rgba(159, 18, 57, 0.3); color: #fda4af; }
.error-box .icon { background-color: #e11d48; padding: 0.25rem; border-radius: 50%; color: white; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; }

/* Status Greeting */
.status-header { text-align: center; margin-bottom: 2.5rem; margin-top: 2rem; }
.status-title { font-size: 1.5rem; font-weight: 900; background: linear-gradient(to right, var(--brand-700), var(--pink-600)); -webkit-background-clip: text; color: transparent; margin-bottom: 1rem; }
.dark .status-title { background: linear-gradient(to right, var(--brand-300), var(--pink-300)); -webkit-background-clip: text; }
@media (min-width: 768px) { .status-title { font-size: 1.875rem; } }

.status-badge { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1.5rem; border-radius: 9999px; background: rgba(255,255,255,0.8); backdrop-filter: blur(4px); border: 1px solid var(--brand-200); box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.1); color: var(--slate-700); font-weight: 700; font-size: 0.875rem; }
.dark .status-badge { background: rgba(30, 41, 59, 0.8); border-color: rgba(139, 92, 246, 0.3); color: var(--slate-200); }
.status-badge-text { color: var(--brand-700); font-weight: 900; }
.dark .status-badge-text { color: var(--brand-300); }
.ping-dot { position: relative; display: flex; width: 0.875rem; height: 0.875rem; }
.ping-dot-animate { position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: var(--emerald-400); opacity: 0.75; animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.ping-dot-core { position: relative; width: 100%; height: 100%; border-radius: 50%; background-color: var(--emerald-500); box-shadow: 0 0 8px rgba(16,185,129,0.8); }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }

/* Modern Stepper */
.modern-stepper { position: relative; width: 100%; max-width: 64rem; margin: 2.5rem auto 4rem; padding: 0 1rem; z-index: 1; }
.stepper-bg-line, .stepper-progress-line { position: absolute; border-radius: 9999px; z-index: -1; }
.stepper-bg-line { background-color: var(--slate-200); box-shadow: inset 0 2px 4px rgba(0,0,0,0.06); }
.dark .stepper-bg-line { background-color: var(--slate-700); }
.stepper-progress-line { background: linear-gradient(to right, var(--brand-500), var(--pink-500)); transition: all 1s ease-in-out; box-shadow: 0 0 10px rgba(139, 92, 246, 0.5); }

.stepper-items { display: flex; flex-direction: column; gap: 2rem; position: relative; z-index: 10; }

@media (min-width: 768px) {
    .stepper-items { flex-direction: row; justify-content: space-between; gap: 0; }
    .stepper-bg-line { top: 2rem; left: 3rem; right: 3rem; height: 0.375rem; }
    .stepper-progress-line { top: 2rem; height: 0.375rem; }
    /* LTR / RTL Support for Desktop Line */
    .dir-ltr .stepper-progress-line { left: 3rem; right: auto; width: var(--progress-width); }
    .dir-rtl .stepper-progress-line { right: 3rem; left: auto; width: var(--progress-width); background: linear-gradient(to left, var(--brand-500), var(--pink-500)); }
}
@media (max-width: 767px) {
    .modern-stepper { padding-left: 1.5rem; padding-right: 1.5rem; }
    /* Mobile Line (Vertical) */
    .stepper-bg-line { top: 0; bottom: 0; width: 0.375rem; }
    .stepper-progress-line { top: 0; width: 0.375rem; height: var(--progress-width); background: linear-gradient(to bottom, var(--brand-500), var(--pink-500)); }
    .dir-ltr .stepper-bg-line, .dir-ltr .stepper-progress-line { left: 3rem; }
    .dir-rtl .stepper-bg-line, .dir-rtl .stepper-progress-line { right: 3rem; }
}

.step-item-modern { display: flex; flex-direction: row; align-items: center; gap: 1.25rem; width: 100%; }
@media (min-width: 768px) { .step-item-modern { flex-direction: column; width: auto; text-align: center; } }

.step-icon-box { width: 4rem; height: 4rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; transition: all 0.5s ease; border: 2px solid var(--slate-200); background-color: #fff; color: var(--slate-300); }
.dark .step-icon-box { border-color: var(--slate-700); background-color: var(--slate-800); color: var(--slate-600); }

/* Passed Step */
.step-item-modern.passed .step-icon-box { background: linear-gradient(to bottom right, var(--brand-500), var(--brand-600)); color: white; border: none; box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.4); }
.dark .step-item-modern.passed .step-icon-box { background: linear-gradient(to bottom right, var(--brand-600), var(--brand-800)); }
/* Active Step */
.step-item-modern.active .step-icon-box { transform: scale(1.1); box-shadow: 0 0 0 4px rgba(237, 228, 255, 1); }
.dark .step-item-modern.active .step-icon-box { box-shadow: 0 0 0 4px rgba(76, 29, 149, 0.6); }

.step-text { flex: 1; padding-top: 0.25rem; text-align: left; }
.dir-rtl .step-text { text-align: right; }
@media (min-width: 768px) { .step-text, .dir-rtl .step-text { text-align: center; padding-top: 0.75rem; } }

.step-title { font-weight: 900; font-size: 1rem; color: var(--slate-400); transition: color 0.3s; }
.dark .step-title { color: var(--slate-500); }
.step-desc { font-size: 0.75rem; margin-top: 0.25rem; color: var(--slate-400); opacity: 0.7; }
/* Text styles for Passed/Active */
.step-item-modern.passed .step-title { color: var(--brand-800); }
.dark .step-item-modern.passed .step-title { color: var(--brand-200); }
.step-item-modern.passed .step-desc { color: var(--brand-600); font-weight: 600; opacity: 1; }
.dark .step-item-modern.passed .step-desc { color: var(--brand-400); }

/* Note Box */
.note-box-modern { max-width: 64rem; margin: 0 auto 2.5rem; position: relative; overflow: hidden; border-radius: 2rem; padding: 1.5rem; background: linear-gradient(to bottom right, #fffbeb, #fff7ed); border: 1px solid #fde68a; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.dark .note-box-modern { background: linear-gradient(to bottom right, var(--slate-800), var(--slate-900)); border-color: rgba(120, 53, 15, 0.3); }
.note-blur-circle { position: absolute; top: -2.5rem; right: -2.5rem; width: 8rem; height: 8rem; background-color: rgba(251, 191, 36, 0.1); border-radius: 50%; filter: blur(24px); }
.note-content { position: relative; z-index: 10; }
.note-header { display: flex; align-items: center; gap: 0.75rem; font-weight: 900; font-size: 1.125rem; color: #b45309; margin-bottom: 1rem; }
.dark .note-header { color: #fbbf24; }
.note-body { color: var(--slate-700); font-size: 0.875rem; line-height: 1.7; font-weight: 600; }
.dark .note-body { color: var(--slate-300); }
@media (min-width: 768px) { .note-box-modern { padding: 2rem; } .note-header { font-size: 1.25rem; } .note-body { font-size: 1rem; } }

/* Media Section & Tabs */
.media-section-modern { max-width: 64rem; margin: 0 auto; background: rgba(255,255,255,0.8); backdrop-filter: blur(16px); border-radius: 2rem; padding: 1.5rem; border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
.dark .media-section-modern { background: rgba(30, 41, 59, 0.8); border-color: rgba(255,255,255,0.05); }
@media (min-width: 768px) { .media-section-modern { padding: 2rem; } }

.media-header-flex { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--slate-100); }
.dark .media-header-flex { border-color: rgba(51, 65, 85, 0.5); }
@media (min-width: 768px) { .media-header-flex { flex-direction: row; align-items: center; justify-content: space-between; } }

.media-title-modern { display: flex; align-items: center; gap: 0.75rem; font-weight: 900; font-size: 1.25rem; color: var(--slate-800); }
.dark .media-title-modern { color: white; }
.media-title-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; background-color: var(--brand-50); display: flex; align-items: center; justify-content: center; color: var(--brand-600); font-size: 1.5rem; box-shadow: inset 0 2px 4px rgba(0,0,0,0.06); }
.dark .media-title-icon { background-color: rgba(76, 29, 149, 0.4); color: var(--brand-400); }
@media (min-width: 768px) { .media-title-modern { font-size: 1.5rem; } }

/* Modern Pills Tabs */
.modern-tabs-wrapper { display: flex; background: rgba(241, 245, 249, 0.8); padding: 0.375rem; border-radius: 1rem; overflow-x: auto; border: 1px solid rgba(226, 232, 240, 0.5); -ms-overflow-style: none; scrollbar-width: none;
    font-family: 'Dana';}
.dark .modern-tabs-wrapper { background: rgba(15, 23, 42, 0.8); border-color: var(--slate-800); }
.modern-tabs-wrapper::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .modern-tabs-wrapper { border-radius: 9999px; } }

.tab-pill { flex: 1 0 auto; padding: 0.625rem 1.5rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 700; color: var(--slate-500); background: transparent; border: 1px solid transparent; cursor: pointer; transition: all 0.3s; white-space: nowrap; }
.dark .tab-pill { color: var(--slate-400); }
@media (min-width: 768px) { .tab-pill { border-radius: 9999px; } }
.tab-pill:hover { color: var(--brand-600); } .dark .tab-pill:hover { color: var(--brand-300); }

/* Active Tab */
.tab-pill.active { background: white; color: var(--brand-700); font-weight: 900; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); border-color: rgba(226, 232, 240, 0.5); }
.dark .tab-pill.active { background: var(--slate-800); color: var(--brand-300); border-color: var(--slate-700); }

/* Media Grid */
.media-grid-modern { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .media-grid-modern { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
@media (min-width: 1024px) { .media-grid-modern { grid-template-columns: repeat(4, 1fr); } }

.media-card { aspect-ratio: 1 / 1; border-radius: 1rem; overflow: hidden; position: relative; cursor: pointer; border: 2px solid transparent; background-color: var(--slate-100); box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: all 0.3s; }
.dark .media-card { background-color: var(--slate-800); }
.media-card:hover { border-color: var(--brand-400); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
.dark .media-card:hover { border-color: var(--brand-500); }

.media-card img, .media-card video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.media-card video { opacity: 0.6; }
.media-card:hover img { transform: scale(1.1); }
.video-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-overlay .icon { font-size: 3rem; color: rgba(255,255,255,0.9); filter: drop-shadow(0 0 10px rgba(0,0,0,0.5)); }
.media-card-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 50%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.media-card:hover .media-card-gradient { opacity: 1; }

.empty-media-msg { grid-column: 1 / -1; text-align: center; color: var(--slate-400); padding: 3rem 1rem; font-size: 0.875rem; font-weight: 700; background: rgba(255,255,255,0.5); border-radius: 1rem; border: 1px dashed var(--slate-300); }
.dark .empty-media-msg { background: rgba(30, 41, 59, 0.5); border-color: var(--slate-700); }
.empty-media-msg .icon { font-size: 2.5rem; opacity: 0.5; margin-bottom: 0.75rem; }