:root {
            --navy: #0b2149;
            --navy-dark: #071630;
            --navy-sidebar: #091c3e;
            --pink: #e80072;
            --purple: #7347ef;
            --line: #e6eaf2;
            --muted: #68728a;
            --bg: #f7f9fc;
            --text-dark: #0f2444;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        html, body {
            width: 100%;
            max-width: 100%;
            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg);
            color: var(--navy);
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* App Layout */
        .dashboard-app-layout {
            display: flex;
            width: 100%;
            min-height: 100vh;
            background: #f4f8fd;
            position: relative;
        }

        /* ================= SIDEBAR (DESKTOP DOCKED, MOBILE OFFCANVAS) ================= */
        .slide-bar-drawer {
            width: 255px;
            min-width: 255px;
            background: var(--navy-sidebar);
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            border-right: 1px solid rgba(255, 255, 255, 0.07);
            box-shadow: 4px 0 20px rgba(7, 22, 48, 0.15);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 99999;
        }

        .slide-bar-header {
            padding: 22px 18px 18px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .slide-user-profile-wrap {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
        }

        .slide-user-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: linear-gradient(135deg, #8327db 0%, #ff2d60 100%);
            color: #ffffff;
            font-size: 16px;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
            flex-shrink: 0;
        }

        .slide-user-info {
            min-width: 0;
            overflow: hidden;
        }

        .slide-user-name {
            color: #ffffff;
            font-size: 13.5px;
            font-weight: 800;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .slide-user-id {
            color: #7b93b2;
            font-size: 11px;
            font-weight: 600;
            margin-top: 2px;
        }

        .slide-close-btn {
            display: none;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: #ffffff;
            font-size: 16px;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            align-items: center;
            justify-content: center;
        }

        .slide-nav-menu {
            display: flex;
            flex-direction: column;
            padding: 14px 10px;
            gap: 4px;
            flex: 1;
        }

        .slide-nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 11px 14px;
            border-radius: 12px;
            color: #b0c0d6;
            text-decoration: none;
            font-size: 13px;
            font-weight: 700;
            transition: all 0.15s ease;
            cursor: pointer;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
        }

        .slide-nav-item svg {
            width: 19px;
            height: 19px;
            flex-shrink: 0;
        }

        .slide-nav-item:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.06);
        }

        .slide-nav-item.active {
            background: linear-gradient(90deg, #ff5722 0%, #ff8a00 100%);
            color: #ffffff;
            box-shadow: 0 4px 12px rgba(255, 87, 34, 0.35);
        }

        /* Collapsible Privacy Nav Group */
        .slide-nav-group {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        .slide-nav-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
        }

        .slide-collapse-icon {
            margin-left: auto;
            font-size: 15px;
            font-weight: 800;
            line-height: 1;
            width: 22px;
            height: 22px;
            border-radius: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.08);
            color: #b0c0d6;
            transition: all 0.2s ease;
            user-select: none;
        }

        .slide-nav-toggle:hover .slide-collapse-icon {
            background: rgba(255, 255, 255, 0.18);
            color: #ffffff;
        }

        .slide-nav-group.open .slide-collapse-icon {
            background: rgba(255, 255, 255, 0.22);
            color: #ffffff;
        }

        .slide-subnav-menu {
            display: none;
            flex-direction: column;
            gap: 2px;
            padding: 4px 0 6px 14px;
            margin: 2px 0 4px 18px;
            border-left: 2px solid rgba(255, 255, 255, 0.12);
            transition: all 0.2s ease;
        }

        .slide-nav-group.open .slide-subnav-menu {
            display: flex;
        }

        .slide-subnav-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 10px;
            border-radius: 8px;
            color: #8fa0ba;
            text-decoration: none;
            font-size: 12px;
            font-weight: 600;
            transition: all 0.15s ease;
            text-transform: capitalize;
        }

        .slide-subnav-item:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.08);
            transform: translateX(2px);
        }

        .slide-subnav-item.active {
            color: #ff8a00;
            font-weight: 700;
            background: rgba(255, 138, 0, 0.15);
        }

        .subnav-dot {
            font-size: 13px;
            color: #0088cc;
            line-height: 1;
        }

        .slide-subnav-item.active .subnav-dot {
            color: #ff8a00;
        }

        .slide-nav-item.logout {
            margin-top: auto;
            color: #ff5b5b;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            padding-top: 14px;
            border-radius: 0;
        }

        .slide-bar-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(4, 15, 36, 0.6);
            backdrop-filter: blur(3px);
            z-index: 99998;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .slide-bar-backdrop.open {
            opacity: 1;
            pointer-events: auto;
        }

        /* ================= MAIN CONTENT PANEL ================= */
        .main-content-panel {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            background: #f8fbfe;
            min-height: 100vh;
        }

        /* Top Header */
        .dashboard-header {
            position: sticky;
            top: 0;
            z-index: 990;
            background: #ffffff;
            padding: 12px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(16, 52, 120, 0.08);
            box-shadow: 0 2px 10px rgba(16, 52, 120, 0.04);
            width: 100%;
        }

        .header-brand-wrap {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            min-width: 0;
        }

        .header-logo-icon {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            object-fit: cover;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .brand-text-block {
            display: flex;
            flex-direction: column;
        }

        .brand-logo-title {
            font-size: 16px;
            font-weight: 900;
            line-height: 1.15;
            letter-spacing: -0.3px;
        }

        .brand-logo-title .text-digital { color: #0084ff; }
        .brand-logo-title .text-scratch { color: #ff1a75; }
        .brand-logo-title .text-design { color: #0070e0; }

        .brand-tagline-row {
            display: flex;
            gap: 4px;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.2px;
            margin-top: 1px;
            color: #5c6b7e;
        }

        .header-actions-right {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .notification-btn {
            position: relative;
            background: #ffffff;
            border: 1px solid rgba(16, 52, 120, 0.12);
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #0b2149;
        }

        .notification-btn svg {
            width: 20px;
            height: 20px;
        }

        .notification-badge-dot {
            position: absolute;
            top: 7px;
            right: 7px;
            width: 8px;
            height: 8px;
            background: #ff1744;
            border-radius: 50%;
            border: 2px solid #ffffff;
        }

        .header-profile-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            display: flex;
            align-items: center;
        }

        .header-profile-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #0066ff;
            color: #ffffff;
            font-weight: 800;
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0, 102, 255, 0.3);
        }

        /* Page Head */
        .page-head {
            background: #ffffff;
            border-bottom: 1px solid var(--line);
            padding: 20px 25px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .page-title {
            font-size: 26px;
            margin: 0;
            font-weight: 900;
            letter-spacing: -0.5px;
            color: #0b2149;
        }

        .page-sub {
            font-size: 13.5px;
            color: #64708a;
            margin-top: 5px;
            font-weight: 600;
        }

        .breadcrumb {
            font-size: 12px;
            color: #64708a;
            margin-top: 6px;
        }

        .breadcrumb b {
            color: #0b2149;
        }

        /* Content Container */
        .content {
            padding: 22px 25px 95px;
            max-width: 1240px;
            width: 100%;
            margin: 0 auto;
        }

        .step-title {
            display: flex;
            align-items: center;
            gap: 13px;
            margin-bottom: 16px;
        }

        .step {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #12a38b;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 900;
            flex-shrink: 0;
        }

        .step.small {
            width: 38px;
            height: 38px;
            font-size: 16px;
        }

        .step-title h2 {
            font-size: 20px;
            font-weight: 800;
            margin: 0;
            color: #0b2149;
        }

        .step-title p {
            margin: 3px 0 0;
            color: #7b8498;
            font-size: 13px;
            font-weight: 600;
        }

        .top-message {
            background: linear-gradient(90deg, #fff0f7, #f3edff);
            border: 1px solid #f2d6e7;
            border-radius: 12px;
            padding: 14px 20px;
            color: #dc006d;
            font-weight: 800;
            font-size: 14px;
            margin-bottom: 18px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .top-message span {
            font-size: 12px;
            color: #64708a;
            font-weight: 600;
        }

        /* ==========================================================================
           PACKAGE CARDS SIZING & HEIGHT CONTROLS
           - Web View Breadth: Cards span 5 equal columns across the full desktop width.
           - Height Control: 'min-height: 325px' trims excessive empty vertical space 
             (reduced from original 379px by ~55px) while keeping all text & icons bold.
           - Responsive: Adapts gracefully on Mobile (full breadth 1 column) & Tablets.
           ========================================================================== */
        .packages {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 12px;
            margin-bottom: 22px;
            width: 100%;
        }

        /* Card Container: Controls overall card height and padding */
        .package {
            position: relative;
            background: #ffffff;
            border: 1.5px solid #dce8df;
            border-radius: 12px;
            text-align: center;
            padding: 14px 10px 14px;
            cursor: pointer;
            min-height: 325px; /* Reduced height from 379px: change this to adjust card vertical height */
            display: flex;
            flex-direction: column;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
            box-shadow: 0 3px 12px rgba(16, 52, 120, 0.04);
            box-sizing: border-box;
        }

        .package:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(16, 52, 120, 0.09);
        }

        .package.selected {
            border: 2px solid #f28b00;
            box-shadow: 0 5px 16px rgba(242, 139, 0, 0.22);
        }

        .package:nth-child(1) { background: linear-gradient(#effff6, #fff); }
        .package:nth-child(2) { background: linear-gradient(#fff1f7, #fff); }
        .package:nth-child(3) { background: linear-gradient(#edf7ff, #fff); }
        .package:nth-child(4) { background: linear-gradient(#fff8e9, #fff); }
        .package:nth-child(5) { background: linear-gradient(#f6f0ff, #fff); }

        .recommended {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: #ff9900;
            color: #fff;
            border-radius: 14px;
            padding: 4px 12px;
            font-size: 10px;
            font-weight: 800;
            white-space: nowrap;
            box-shadow: 0 2px 6px rgba(255, 153, 0, 0.35);
            letter-spacing: 0.3px;
        }

        /* Top Icon: Full breadth 52px circle */
        .picon {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            margin: 0 auto 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            flex-shrink: 0;
        }

        .p1 { background: #c9f3d8; }
        .p2 { background: #ffd0e4; }
        .p3 { background: #c9e7ff; }
        .p4 { background: #ffe5b1; }
        .p5 { background: #ded0ff; }

        /* Title & Description */
        .package h3 {
            font-size: 15.5px;
            font-weight: 800;
            margin: 0;
            line-height: 1.2;
            color: #0b2149;
        }

        .desc {
            font-size: 11.5px;
            color: #66718a;
            margin-top: 4px;
            min-height: 26px;
            font-weight: 600;
            line-height: 1.25;
        }

        /* Quantity Box */
        .qty {
            margin-top: 8px;
            background: #ffffff;
            border-radius: 8px;
            padding: 6px 4px;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .qty strong {
            font-size: 26px;
            display: block;
            font-weight: 900;
            color: #0b2149;
            line-height: 1.1;
        }

        .qty span {
            font-size: 12px;
            color: #5f6b83;
            font-weight: 700;
        }

        /* Rate pill */
        .rate {
            margin-top: 7px;
            padding: 5px 6px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 800;
            background: #e5faee;
            color: #00874e;
        }

        .package:nth-child(2) .rate { background: #fff0c9; color: #b78103; }
        .package:nth-child(3) .rate { background: #d9f4f7; color: #0077b6; }
        .package:nth-child(4) .rate { background: #fff3d7; color: #d06f00; }
        .package:nth-child(5) .rate { background: #fff4d9; color: #7209b7; }

        /* Total Price */
        .price {
            font-size: 24px;
            font-weight: 900;
            margin-top: 8px;
            color: #0b2149;
        }

        .package.selected .price {
            color: #c61d1d;
        }

        /* Select Button */
        .select {
            height: 38px;
            border: 1.5px solid #d9e0ec;
            border-radius: 8px;
            margin-top: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-weight: 800;
            font-size: 12.5px;
            background: #ffffff;
            transition: all 0.2s;
        }

        .selected .select {
            background: #df0870;
            border-color: #df0870;
            color: #ffffff;
        }

        .radio {
            width: 16px;
            height: 16px;
            border: 2px solid #aab5c7;
            border-radius: 50%;
            display: inline-block;
            box-sizing: border-box;
        }

        .selected .radio {
            border: 4px solid #ffffff;
            background: #df0870;
        }

        /* Referral Section */
        .referral-section {
            margin-top: 18px;
            background: linear-gradient(90deg, #fff2f8, #f3efff);
            border: 1px solid #efd9e9;
            border-radius: 12px;
            padding: 16px 20px;
        }

        .referral-head {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .referral-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #e80072, #7347ef);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 900;
            flex-shrink: 0;
        }

        .referral-head h2 {
            font-size: 16px;
            font-weight: 800;
            margin: 0;
            color: #0b2149;
        }

        .referral-head p {
            font-size: 12px;
            color: #69738a;
            margin: 3px 0 0;
            font-weight: 600;
        }

        .referral-form {
            display: flex;
            gap: 10px;
            margin-top: 12px;
        }

        .referral-form input {
            flex: 1;
            height: 48px;
            border: 1.5px solid #d8deea;
            border-radius: 9px;
            padding: 0 16px;
            font-size: 14px;
            font-family: inherit;
            outline: none;
            transition: border-color 0.2s;
        }

        .referral-form input:focus {
            border-color: #e80072;
        }

        .referral-form button {
            width: 100px;
            height: 48px;
            border: 0;
            border-radius: 9px;
            background: #e00070;
            color: #fff;
            font-size: 13px;
            font-weight: 900;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .referral-form button:hover {
            opacity: 0.92;
        }

        .referral-message {
            display: none;
            margin-top: 8px;
            font-size: 12px;
            font-weight: 700;
        }

        .divider {
            height: 1px;
            background: var(--line);
            margin: 25px 0 22px;
        }

        /* Bottom Sections */
        .bottom {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .section-header-wrap {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            margin-bottom: 12px;
        }

        .section-header-wrap h2 {
            font-size: 19px;
            margin: 0;
            font-weight: 800;
            color: #0b2149;
        }

        .section-header-wrap p {
            font-size: 13px;
            color: #7b8498;
            margin: 3px 0 0;
            font-weight: 600;
        }

        .summary, .payment-box {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 18px;
            box-shadow: 0 4px 14px rgba(16, 52, 120, 0.04);
        }

        .summary {
            min-height: 220px;
        }

        .sumrow {
            display: flex;
            justify-content: space-between;
            padding: 10px 4px;
            border-bottom: 1px solid #edf0f5;
            font-size: 13.5px;
            font-weight: 600;
        }

        .sumrow:last-of-type {
            border-bottom: 0;
        }

        .sumrow span {
            color: #5f6b82;
        }

        .sumrow b {
            font-size: 14px;
            color: #0b2149;
        }

        .sumrow.discount-row {
            color: #d9006b;
        }
        .sumrow.discount-row b {
            color: #d9006b;
        }

        .grand {
            font-size: 15px;
            font-weight: 800;
            margin-top: 4px;
            padding-top: 12px;
            border-top: 2px dashed #edf0f5;
        }

        .grand b {
            font-size: 24px;
            color: #df0870;
            font-weight: 900;
        }

        .notice {
            margin-top: 14px;
            background: #eaf5ff;
            border: 1px solid #cfe7ff;
            color: #145aa2;
            border-radius: 8px;
            padding: 11px 13px;
            font-size: 11.5px;
            line-height: 1.45;
            font-weight: 600;
        }

        .pay-btn {
            width: 100%;
            height: 54px;
            border: 0;
            border-radius: 10px;
            background: linear-gradient(90deg, #e00070 0%, #ff5722 100%);
            color: #fff;
            font-size: 16px;
            font-weight: 900;
            cursor: pointer;
            box-shadow: 0 4px 16px rgba(224, 0, 112, 0.35);
            transition: transform 0.15s, box-shadow 0.15s;
        }

        .pay-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(224, 0, 112, 0.45);
        }

        .pay-btn:active {
            transform: scale(0.98);
        }

        .secure {
            margin-top: 14px;
            background: #f0f9ff;
            border: 1px solid #dceaf7;
            border-radius: 10px;
            padding: 14px;
        }

        .secure-head {
            font-size: 13px;
            font-weight: 800;
            color: #1262b0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .razor {
            font-size: 18px;
            font-weight: 900;
            font-style: italic;
            color: #172f6d;
        }

        .check {
            font-size: 12px;
            color: #506079;
            margin-top: 8px;
            font-weight: 600;
            display: flex;
            align-items: center;
        }

        .check:before {
            content: "✓";
            display: inline-flex;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #18a66d;
            color: #fff;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
            font-weight: 800;
            font-size: 11px;
            flex-shrink: 0;
        }

        /* Features Bar */
        .features {
            margin-top: 24px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 16px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }

        .feature {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            border-right: 1px solid #e8ecf2;
        }

        .feature:last-child {
            border-right: 0;
        }

        .ficon {
            font-size: 24px;
            color: #149e87;
        }

        .feature b {
            font-size: 13px;
            color: #0b2149;
            font-weight: 800;
        }

        .feature span {
            display: block;
            font-size: 11px;
            color: #7a8497;
            margin-top: 2px;
            font-weight: 600;
        }

        footer {
            border-top: 1px solid var(--line);
            margin-top: 24px;
            padding: 16px 5px;
            font-size: 11px;
            color: #657087;
            display: flex;
            justify-content: space-between;
            font-weight: 600;
        }

        footer a {
            color: #52607a;
            text-decoration: none;
            margin-left: 20px;
        }

        /* Bottom Nav Bar (Mobile) */
        .bottom-nav-bar {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            background: #ffffff;
            border-top: 1px solid rgba(16, 52, 120, 0.09);
            box-shadow: 0 -4px 18px rgba(11, 33, 73, 0.08);
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 7px 6px 9px;
            z-index: 998;
        }

        .bottom-tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            text-decoration: none;
            cursor: pointer;
            background: none;
            border: none;
            outline: none;
            position: relative;
            padding: 0 4px;
        }

        .tab-icon-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
            transition: transform 0.15s ease;
        }

        .bottom-tab-item:active .tab-icon-circle { transform: scale(0.92); }
        .tab-icon-circle.home { background: linear-gradient(135deg, #ff4d29 0%, #ff7a00 100%); }
        .tab-icon-circle.unscratched { background: linear-gradient(135deg, #0099ff 0%, #0066cc 100%); }
        .tab-icon-circle.scratched { background: linear-gradient(135deg, #ff7e1d 0%, #f74d1a 100%); }
        .tab-icon-circle.customers { background: linear-gradient(135deg, #0ca872 0%, #059669 100%); }
        .tab-icon-circle.profile { background: linear-gradient(135deg, #8327db 0%, #c026d3 100%); }

        .tab-icon-circle svg { width: 20px; height: 20px; }

        .tab-text-label {
            font-size: 10.5px;
            font-weight: 800;
            color: #0b2149;
            line-height: 1;
        }

        /* ================= RESPONSIVE BREAKPOINTS ================= */
        @media (min-width: 1024px) {
            .slide-bar-drawer {
                position: sticky;
                top: 0;
                height: 100vh;
                transform: none !important;
            }
            .bottom-nav-bar {
                display: none !important;
            }
        }

        @media (max-width: 1023px) and (min-width: 728px) {
            .slide-bar-drawer {
                position: fixed;
                top: 0;
                left: 0;
                width: 275px;
                height: 100%;
                z-index: 99999;
                transform: translateX(-100%);
            }
            .slide-bar-drawer.open {
                transform: translateX(0);
            }
            .slide-close-btn {
                display: flex;
            }
            .packages {
                grid-template-columns: repeat(3, 1fr);
            }
            .bottom {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 727px) {
            .slide-bar-drawer {
                position: fixed;
                top: 0;
                left: 0;
                width: 275px;
                max-width: 82vw;
                height: 100%;
                z-index: 99999;
                transform: translateX(-100%);
            }
            .slide-bar-drawer.open {
                transform: translateX(0);
            }
            .slide-close-btn {
                display: flex;
            }
            .content {
                padding: 12px 12px 85px;
            }
            .page-head {
                padding: 12px 12px;
                flex-direction: column;
                gap: 4px;
            }
            .page-title {
                font-size: 20px;
            }
            .page-sub {
                font-size: 11.5px;
            }
            .step-title {
                margin-bottom: 10px;
                gap: 10px;
            }
            .step {
                width: 34px;
                height: 34px;
                font-size: 15px;
            }
            .step-title h2 {
                font-size: 16px;
            }
            .step-title p {
                font-size: 11.5px;
            }

            /* ==========================================================================
               MOBILE VIEW: COMPACT HEIGHT, FULL BREADTH PACKAGE CARDS
               - Breadth: 100% full screen width (not narrowed).
               - Height: Reduced to ~98px so AT LEAST 2 PACKAGES show in a single screen.
               ========================================================================== */
            .packages {
                grid-template-columns: 1fr;
                gap: 10px;
                margin-bottom: 18px;
            }

            .package {
                min-height: auto;
                padding: 10px 12px 10px 10px;
                display: grid;
                grid-template-columns: 42px minmax(0, 1fr) auto auto;
                grid-template-areas:
                    "icon  title  title  rate"
                    "icon  desc   desc   desc"
                    "qty   qty    price  select";
                column-gap: 8px;
                row-gap: 4px;
                align-items: center;
                text-align: left;
                border-radius: 12px;
                box-shadow: 0 2px 8px rgba(16, 52, 120, 0.05);
            }

            .package.selected {
                border-width: 2px;
            }

            .recommended {
                top: -8px;
                right: 12px;
                left: auto;
                transform: none;
                font-size: 9px;
                padding: 2px 8px;
                border-radius: 10px;
                font-weight: 800;
            }

            .picon {
                grid-area: icon;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                margin: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 20px;
                align-self: center;
            }

            .package h3 {
                grid-area: title;
                font-size: 14px;
                font-weight: 800;
                color: #0b2149;
                margin: 0;
                line-height: 1.2;
                text-align: left;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .desc {
                grid-area: desc;
                font-size: 11px;
                color: #66718a;
                margin: 0;
                min-height: auto;
                text-align: left;
                line-height: 1.2;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .rate {
                grid-area: rate;
                margin: 0;
                padding: 3px 8px;
                border-radius: 6px;
                font-size: 10.5px;
                font-weight: 800;
                white-space: nowrap;
                justify-self: end;
                align-self: center;
            }

            .qty {
                grid-area: qty;
                margin: 2px 0 0 0;
                background: transparent;
                border: none;
                padding: 0;
                display: flex;
                align-items: baseline;
                gap: 5px;
                text-align: left;
            }

            .qty strong {
                display: inline;
                font-size: 16px;
                font-weight: 900;
                color: #0b2149;
                line-height: 1;
            }

            .qty span {
                display: inline;
                font-size: 11px;
                color: #5f6b83;
                font-weight: 700;
            }

            .price {
                grid-area: price;
                margin: 2px 0 0 0;
                font-size: 17px;
                font-weight: 900;
                color: #0b2149;
                justify-self: end;
                align-self: center;
                white-space: nowrap;
                padding-right: 4px;
            }

            .select {
                grid-area: select;
                height: 32px;
                padding: 0 12px;
                border-radius: 7px;
                margin: 2px 0 0 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 5px;
                font-weight: 800;
                font-size: 11.5px;
                white-space: nowrap;
                justify-self: end;
                align-self: center;
            }

            .radio {
                width: 13px;
                height: 13px;
            }

            /* Referral Form Mobile */
            .referral-section {
                padding: 16px 14px;
                border-radius: 12px;
                margin-top: 16px;
            }
            .referral-form {
                gap: 10px;
                margin-top: 12px;
            }
            .referral-form input {
                height: 52px;              /* <-- Made taller/bigger for mobile view */
                font-size: 15px;
                padding: 0 16px;
                border-radius: 10px;
            }
            .referral-form button {
                height: 52px;
                font-size: 14px;
                border-radius: 10px;
            }

            .bottom {
                grid-template-columns: 1fr;
            }
            .features {
                grid-template-columns: 1fr;
                gap: 14px;
            }
            .feature {
                border-right: 0;
                border-bottom: 1px solid #eee;
                padding-bottom: 12px;
            }
            .feature:last-child {
                border-bottom: 0;
                padding-bottom: 0;
            }
            footer {
                flex-direction: column;
                gap: 8px;
            }
            footer a {
                margin-left: 0;
                margin-right: 16px;
            }
        }

        @media (max-width: 480px) {
            .referral-form {
                flex-direction: column;
                gap: 10px;
            }
            .referral-form input {
                width: 100%;
                height: 52px;              /* <-- Made taller/bigger for mobile view */
                font-size: 15px;
                padding: 0 16px;
                border-radius: 10px;
            }
            .referral-form button {
                width: 100%;
                height: 50px;
                font-size: 14px;
                border-radius: 10px;
            }
            .dashboard-header {
                padding: 8px 12px;
            }
            .header-logo-icon {
                width: 32px;
                height: 32px;
            }
            .brand-logo-title {
                font-size: 14px;
            }
            .brand-tagline-row {
                font-size: 8px;
            }
        }

        @media (max-width: 340px) {
            .content {
                padding: 10px 8px 75px;
            }
            .page-title {
                font-size: 18px;
            }
            .page-sub {
                font-size: 11.5px;
            }
            .step-title h2 {
                font-size: 15px;
            }
            .picon {
                width: 36px;
                height: 36px;
                font-size: 18px;
            }
            .package h3 {
                font-size: 13px;
            }
            .desc {
                font-size: 10.5px;
            }
            .qty strong {
                font-size: 15px;
            }
            .price {
                font-size: 15.5px;
            }
            .select {
                padding: 0 8px;
                font-size: 11px;
                height: 30px;
            }
            .referral-form input {
                height: 48px;
                font-size: 14px;
            }
            .referral-form button {
                height: 46px;
            }
            .bottom-nav-bar {
                padding: 3px 2px 5px;
            }
            .tab-icon-wrap {
                width: 30px;
                height: 30px;
            }
            .tab-icon-wrap svg {
                width: 16px;
                height: 16px;
            }
            .tab-text-label {
                font-size: 8.5px;
            }
        }
/* Keep the referral/promo field full-size when the mobile form stacks vertically. */
@media (max-width: 727px) {
    .referral-form { flex-direction: column; gap: 10px; }
    .referral-form input {
        flex: none;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        height: 52px;
        min-height: 52px;
        padding: 0 16px;
        font-size: 16px;
    }
    .referral-form button {
        flex: none;
        width: 100%;
        height: 48px;
        min-height: 48px;
        font-size: 15px;
    }
}
/* Animated offer badge beside the package introduction. */
.page-head > div { width: 100%; }
.page-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 3px; }
.page-intro .page-sub { margin-top: 0; }
.promo-offers { display: grid; gap: 16px; flex: 0 0 240px; margin-right: 6px; }
.promo-offers[hidden] { display: none; }
.fest-rect { font-family: "Arial Black", "Trebuchet MS", Arial, sans-serif; font-weight: 900; }
  .fest-rect {
    --width: 240px;           /* change this to resize (height follows) */
    --gold: #ffc21a;
    --gold-deep: #e89b00;
    --red: #d7263d;
    --red-deep: #a8182c;
    --cream: #fff4d6;
    width: min(var(--width), 92vw);
    aspect-ratio: 380 / 130;
  }
  .fest-rect svg { width: 100%; height: 100%; overflow: visible; display: block; }
  .fest-rect text { text-anchor: middle; }

  .fest-rect .r-body { filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }

  /* Blinking marquee lights around the border (two groups take turns) */
  .fest-rect .lights { fill: none; stroke: var(--cream); stroke-width: 4.5; stroke-linecap: round;
             stroke-dasharray: 0.1 14; }
  .fest-rect .lights.l1 { animation: r-blink 1s steps(1, end) infinite; }
  .fest-rect .lights.l2 { stroke-dashoffset: 7; animation: r-blink 1s steps(1, end) infinite .5s; }

  .fest-rect .t-use  { font-size: 22px; letter-spacing: 2px; fill: var(--cream); }
  .fest-rect .t-code { font-size: 40px; letter-spacing: 5px; fill: var(--gold); }
  .fest-rect .t-pct  { font-size: 26px; letter-spacing: 1px; fill: var(--cream); }
  .fest-rect .t-off  { font-size: 15px; letter-spacing: 4px; fill: var(--gold); }

  @keyframes r-blink {
    0%   { opacity: 1; }
    50%  { opacity: .1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .fest-rect .lights { animation: none; opacity: 1; }
  }

@media (max-width: 727px) {
    .page-intro { gap: 8px; align-items: flex-start; }
    .page-intro .page-sub { flex: 1 1 auto; min-width: 0; font-size: clamp(10px, 3vw, 11.5px); font-weight: 700; line-height: 1.5; }
    .page-intro .page-sub span { display: block; white-space: nowrap; }
    .promo-offers { flex-basis: clamp(140px, 40vw, 160px); margin-top: -12px; margin-right: 0; }
    .fest-rect { --width: 160px; width: 100%; }
    .page-head { padding-bottom: 6px; }
    .content { padding-top: 8px; }
}