/* STREAMING_CHUNK:Defining Premium SaaS Global Variables & Encapsulation... */:root {--e2-primary: #0f172a;--e2-accent: #3b82f6;--e2-success: #10b981;--e2-warning: #f59e0b;--e2-danger: #ef4444;--e2-bg: #f8fafc;--e2-surface: #ffffff;--e2-border: #e2e8f0;--e2-text-main: #1e293b;--e2-text-muted: #64748b;}/* Encapsulation: Prevents WordPress Themes from bullying our design */.e2-premium-portal {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;color: var(--e2-text-main);background: transparent;padding: 0;box-sizing: border-box;width: 100%;}.e2-premium-portal * {box-sizing: border-box;}/* STREAMING_CHUNK:Styling Registration Form Aesthetics... */.e2-form-card {background: var(--e2-surface);padding: 40px;border-radius: 16px;box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);max-width: 550px;margin: 0 auto;border: 1px solid var(--e2-border);}.e2-form-title {font-size: 26px !important;font-weight: 800 !important;margin-bottom: 25px !important;color: var(--e2-primary) !important;text-align: center;letter-spacing: -0.5px;}.e2-input-group {margin-bottom: 20px;text-align: left;}.e2-input-group label {display: block;font-size: 14px;font-weight: 600;margin-bottom: 8px;color: var(--e2-text-main);}.e2-input-group label .req {color: var(--e2-danger);}.e2-input-group input,.e2-input-group select {width: 100% !important;padding: 14px 16px !important;border-radius: 10px !important;border: 1px solid var(--e2-border) !important;background: var(--e2-bg) !important;font-size: 15px !important;color: var(--e2-text-main) !important;transition: all 0.3s ease !important;box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;}.e2-input-group input:focus,.e2-input-group select:focus {border-color: var(--e2-accent) !important;background: var(--e2-surface) !important;outline: none !important;box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15) !important;}.e2-checkbox-label {display: flex;align-items: center;gap: 10px;font-size: 14px;color: var(--e2-text-muted);cursor: pointer;}/* STREAMING_CHUNK:Designing Interactive Buttons & Instant Alerts... */.e2-btn {width: 100%;padding: 16px !important;border-radius: 10px !important;font-size: 16px !important;font-weight: 700 !important;cursor: pointer;transition: all 0.2s ease;border: none;text-align: center;display: inline-block;}.e2-btn-primary {background: var(--e2-primary) !important;color: #ffffff !important;box-shadow: 0 4px 6px rgba(15, 23, 42, 0.2) !important;}.e2-btn-primary:hover:not(:disabled) {background: #1e293b !important;transform: translateY(-2px);box-shadow: 0 6px 12px rgba(15, 23, 42, 0.3) !important;}.e2-btn:disabled {opacity: 0.7;cursor: not-allowed;}.e2-alert {padding: 16px 20px;border-radius: 10px;margin-bottom: 20px;font-weight: 500;font-size: 14px;display: flex;align-items: center;gap: 10px;animation: fadeIn 0.3s ease-in-out;}@keyframes fadeIn {from { opacity: 0; transform: translateY(-10px); }to { opacity: 1; transform: translateY(0); }}.e2-alert-error { background: #fef2f2; border: 1px solid #fecaca; color: var(--e2-danger); }.e2-alert-success { background: #ecfdf5; border: 1px solid #a7f3d0; color: var(--e2-success); }.e2-alert-info { background: #eff6ff; border: 1px solid #bfdbfe; color: var(--e2-accent); }/* STREAMING_CHUNK:Structuring Dashboard Grids & Panels... */.e2-dash-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 24px;margin-bottom: 30px;}.e2-grid-2 {display: grid;grid-template-columns: 1fr 1fr;gap: 15px;}.e2-panel {background: var(--e2-surface);border: 1px solid var(--e2-border);border-radius: 16px;padding: 35px;margin-bottom: 30px;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);}.e2-panel h3 {margin-top: 0;font-size: 18px;color: var(--e2-primary);border-bottom: 1px solid var(--e2-border);padding-bottom: 15px;margin-bottom: 20px;}.e2-dash-card {background: var(--e2-surface);border: 1px solid var(--e2-border);border-radius: 16px;padding: 25px;box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);transition: transform 0.2s, box-shadow 0.2s;text-align: center;}.e2-dash-card:hover {transform: translateY(-3px);box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05);}.e2-dash-card h4 {margin: 0 0 10px 0;font-size: 13px;color: var(--e2-text-muted);text-transform: uppercase;letter-spacing: 0.5px;}.e2-dash-card .amt {font-size: 32px;font-weight: 800;margin: 0 0 8px 0;color: var(--e2-primary);}.e2-dash-card .amt.green { color: var(--e2-success); }.e2-dash-card .amt.orange { color: var(--e2-warning); }/* STREAMING_CHUNK:Polishing Marketing Links and QR Codes... */.e2-link-box {display: flex;gap: 10px;margin-bottom: 15px;}.e2-link-box input {flex-grow: 1;padding: 12px 16px;border-radius: 8px;border: 1px solid var(--e2-border);background: var(--e2-bg);color: var(--e2-text-muted);font-family: monospace;font-size: 14px;}.e2-qr-wrap {display: flex;align-items: center;gap: 25px;background: #f8fafc;padding: 20px;border-radius: 12px;border: 1px dashed #cbd5e1;}.e2-qr-img {border-radius: 8px;background: #fff;padding: 5px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);}/* STREAMING_CHUNK:Implementing Mobile Media Queries... */@media (max-width: 1024px) {.e2-dash-grid { grid-template-columns: repeat(2, 1fr); }}@media (max-width: 768px) { /* Stack columns on phones */ .e2-dash-grid, .e2-grid-2 { grid-template-columns: 1fr; }/* Make form fit perfectly on small screens */
.e2-form-card { padding: 25px 20px; border-radius: 12px; }
.e2-panel { padding: 20px; }

.e2-link-box {
    flex-direction: column;
}

.e2-link-box button {
    width: 100%;
}

/* Ensure tables don't break the layout by making them swipeable horizontally */
.e2-premium-portal .woocommerce-orders-table,
.e2-premium-portal .shop_table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border: 1px solid var(--e2-border);
    border-radius: 8px;
}

/* Stack the QR Code area */
.e2-qr-wrap {
    flex-direction: column;
    text-align: center;
}

/* Cross-sell carousel: exactly 2 cards visible at once on mobile, shorter cards */
.e2-carousel-card {
    flex-basis: calc(50% - 7px);
}

.e2-carousel-img {
    height: 90px;
}

.e2-carousel-tag {
    font-size: 10px;
    padding: 3px 8px;
}
}

/* Cross-sell carousel: exactly 3 cards visible at once on tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .e2-carousel-card {
        flex-basis: calc(33.333% - 10px);
    }
}

/* STREAMING_CHUNK: Cross-Sell Recommendation Carousel */
.e2-carousel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.e2-carousel-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 5px 5px 15px 5px;
    flex-grow: 1;
    -webkit-overflow-scrolling: touch;
}

.e2-carousel-track::-webkit-scrollbar { height: 6px; }
.e2-carousel-track::-webkit-scrollbar-thumb { background: var(--e2-border); border-radius: 10px; }

.e2-carousel-card {
    /* Desktop default: a comfortable fixed width, however many fit is fine - the
       track scrolls regardless of count. Mobile/tablet breakpoints below override
       this to show an exact number of cards per view. */
    flex: 0 0 200px;
    scroll-snap-align: start;
    background: var(--e2-surface);
    border: 1px solid var(--e2-border);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.e2-carousel-tag {
    display: inline-block;
    background: rgba(16, 185, 129, 0.1);
    color: var(--e2-success);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
    align-self: flex-start;
}

.e2-carousel-img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
    background: var(--e2-bg);
}

.e2-carousel-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--e2-text-main);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.e2-carousel-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--e2-primary);
    margin-bottom: 10px;
}

.e2-carousel-copy-btn {
    padding: 9px !important;
    font-size: 12px !important;
    width: 100%;
    margin-top: auto;
}

.e2-carousel-arrow {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--e2-border);
    background: var(--e2-surface);
    color: var(--e2-text-main);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.e2-carousel-arrow:hover {
    background: var(--e2-primary);
    color: #fff;
    border-color: var(--e2-primary);
}