/* Import Roboto (latin) + Heebo (Hebrew) — Heebo renders RTL text far cleaner than Roboto */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;600&display=swap');

/* ============================================================
   COLOR TEMPLATE — per-product theming
   Duplicate this file to shop-{productId}.css and edit the
   variables below to reskin the shop for that product.
   All other rules in this file reference these via var(--...).
   ------------------------------------------------------------
   --shop-primary        main brand accent (buttons, active)
   --shop-primary-dark   hover / pressed state of primary
   --shop-secondary      secondary/heading color (dark navy today)
   --shop-bg             page background (warm cream today)
   --shop-border         subtle border / divider color
   ============================================================ */
:root {
    --shop-primary: #6C297A;
    --shop-primary-dark: #4a1c53;
    --shop-secondary: #002141;
    --shop-bg: #ffffff;
    --shop-border: #e2e8f0;
    /* Back-button (and other soft chrome) — defaults are a lavender tied to the
       Takdin family. Each per-product shop-N.css can override these. */
    --shop-back-bg: #EEE6EF;
    --shop-back-border: #DCD0DF;
    --shop-back-hover: #E0D2E3;
}

/* Shop Container */
.shop-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 20px;
    font-family: 'Heebo', 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--shop-bg);
}

/* Update body background to match if needed, though shop-container handles it */
html,
body,
.lpx-wrapper,
.lpx-content-container,
.lpx-content,
.lpx-layout {
    background-color: var(--shop-bg) !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
}

.lpx-content .card-body {
    padding: 10px !important;
    background-color: var(--shop-bg);
}

/* Ensure no white wrapper around it */
.lpx-content-container .lpx-content {
    padding: 0 !important;
    max-width: none !important;
}

/* Desktop Progress Steps */
.shop-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    padding: 30px 0;
    background: var(--shop-bg);
    position: relative;
    border-bottom: 1px solid var(--shop-border);
}

/* Mobile Step Indicator */
.mobile-step-indicator {
    display: none;
    background: #ffffff;
    border-bottom: 1px solid #e9ecef;
    padding: 15px 20px;
    position: relative;
}

.step-indicator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.mobile-back-button {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
}

.btn-back-mobile {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #e9ecef;
    border: 2px solid #e9ecef;
    color: #6c757d;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.btn-back-mobile:hover {
    background-color: #6c757d;
    color: white;
    border-color: #6c757d;
    box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.2);
}

.step-info {
    flex: 1;
    text-align: center;
    margin: 0 15px;
}

.current-step-text {
    font-size: 14px;
    color: var(--shop-primary);
    font-weight: 600;
    margin-bottom: 4px;
}

.current-step-title {
    font-size: 16px;
    color: #495057;
    font-weight: 500;
}

.step-dots-container {
    display: flex;
    justify-content: center;
}

.step-dots {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

.step-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--shop-bg);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    border: 2px solid #9E9C95;
}

.step-dot.active {
    background-color: var(--shop-primary);
    border-color: var(--shop-primary);
    transform: scale(1.3);
    box-shadow: 0 0 0 3px rgba(108, 41, 122, 0.2);
}

.step-dot.completed {
    background-color: #28a745;
    border-color: #28a745;
    transform: scale(1.1);
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
}

.step-dot.completed::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 8px;
    font-weight: bold;
}

/* Tooltip for step dots */
.step-dot:hover::before {
    content: attr(title);
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
}

/* Back Button in Progress Area */
.progress-back-button {
    position: absolute;
    right: 20px;
    top: 60px;
    transform: translateY(-50%);
}

.progress-back-button .btn-back {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #e9ecef;
    border: 2px solid #e9ecef;
    color: #6c757d;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
}

.progress-back-button .btn-back:hover {
    background-color: #6c757d;
    color: white;
    border-color: #6c757d;
    box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.2);
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    transition: all 0.3s ease;
    max-width: 150px;
    min-width: 120px;
}

.progress-step.active {
    transform: scale(1.02);
}

.progress-step.completed {
    transform: scale(1.01);
}

.step-number {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    border: 2px solid #e9ecef;
    font-size: 18px;
}

.progress-step.active .step-number {
    background-color: var(--shop-primary);
    border-color: var(--shop-primary);
    color: white;
    box-shadow: 0 0 0 3px rgba(108, 41, 122, 0.2);
}

.progress-step.completed .step-number {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2);
}

.progress-step.completed .step-number {
    font-size: 0;
    /* Hide the number */
}

.progress-step.completed .step-number::before {
    content: "✓";
    font-size: 20px;
    font-weight: bold;
}

.step-title {
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    color: #6c757d;
    font-weight: 500;
}

.progress-step.active .step-title {
    font-weight: 600;
    color: var(--shop-primary);
}

.progress-step.completed .step-title {
    font-weight: 600;
    color: #28a745;
}

/* Progress Line Connectors - Shorter lines with proper margins */
.progress-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 25px;
    right: -35px;
    width: 70px;
    height: 3px;
    background: #e9ecef;
    z-index: 0;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.progress-step.completed:not(:last-child)::after {
    background: #28a745;
    box-shadow: 0 0 4px rgba(40, 167, 69, 0.3);
}

.progress-step.active:not(:last-child)::after {
    background: linear-gradient(90deg, var(--shop-primary) 0%, #e9ecef 100%);
    box-shadow: 0 0 4px rgba(108, 41, 122, 0.3);
}

/* Hide line for the first step (step 1) */
.progress-step:first-child::after {
    display: none;
}

/* Enhanced Progress Line Animation */
.progress-step.completed:not(:last-child)::after {
    animation: progressLineComplete 0.5s ease-in-out;
}

.progress-step.active:not(:last-child)::after {
    animation: progressLineActive 0.5s ease-in-out;
}

@keyframes progressLineComplete {
    0% {
        width: 0;
        opacity: 0;
    }

    100% {
        width: 50px;
        opacity: 1;
    }
}

@keyframes progressLineActive {
    0% {
        background: #e9ecef;
    }

    100% {
        background: linear-gradient(90deg, var(--shop-primary) 0%, #e9ecef 100%);
    }
}

/* Step Content */
.shop-content {
    min-height: 600px;
}

.step-content {
    display: none;
}

.step-content.active {
    display: block;
}

/* Return to Shop Button - tracks the cart sidebar's right edge. Cart is
   width: clamp(200px, 20vw, 300px), so the button sits 20px past that.
   When cart is closed it follows to the left margin. */
.btn-return-shop {
    position: fixed;
    top: 22px;
    left: calc(clamp(200px, 20vw, 300px) + 20px);
    background: var(--shop-back-bg);
    border: 1px solid var(--shop-back-border);
    border-radius: 0.7em;
    color: var(--shop-primary);
    cursor: pointer;
    font-weight: 600;
    transition: left 0.3s ease, background 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-size: 0.95em;
    padding: 0.55em 1.4em;
    z-index: 1002;
}

body:has(.cart-sidebar-left.closed) .btn-return-shop {
    left: 20px;
}

/* Right-pointing chevron (>) per design — colored LEFT border, top/bottom transparent. */
.btn-return-shop::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid currentColor;
}

.btn-return-shop:hover {
    background: var(--shop-back-hover);
    color: var(--shop-primary);
}

/* Bug 12 — disable back button while payment/registration submit is in flight */
#register-step:has(.btn-pay-modern:disabled) .btn-return-shop {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.return-text-mobile {
    display: none;
}

@media (max-width: 768px) {
    /* Compact back button — icon-only, anchored to the top-left of the viewport
       so it doesn't fight with the brand logo or the tabs. */
    .btn-return-shop {
        font-size: 0.85em;
        padding: 0.3em 0.6em;
        position: fixed;
        top: 8px;
        left: 8px;
        right: auto;
        transform: none;
        z-index: 1002;
        gap: 0.25em;
    }
    .return-text-desktop {
        display: none;
    }
    .return-text-mobile {
        display: inline-flex;
    }

}

.step-header {
    text-align: center;
    margin-bottom: 30px;
}

.step-header h2 {
    color: #333;
    margin-bottom: 10px;
}

.step-header p {
    color: #666;
    font-size: 16px;
}

.btn-back {
    background: none;
    border: 1px solid #6c757d;
    color: #6c757d;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.btn-back:hover {
    background-color: #6c757d;
    color: white;
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-top: 20px;
    padding: 0 8px;
}

.product-card {
    position: relative;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    background: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    direction: rtl;
}

.product-card::before {
    content: "לרכישה";
    position: absolute;
    top: 16px;
    right: -8px;
    background: linear-gradient(135deg, var(--shop-primary) 0%, var(--shop-primary-dark) 100%);
    color: white;
    padding: 6px 20px 6px 12px;
    font-size: 12px;
    font-weight: 600;
    transform: rotate(0deg);
    border-radius: 4px 0 0 4px;
    box-shadow: 0 2px 4px rgba(108, 41, 122, 0.3);
    z-index: 2;
}

.product-card::after {
    content: "";
    position: absolute;
    top: 16px;
    right: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid var(--shop-primary-dark);
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    transform: translateX(100%);
    z-index: 1;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06);
    border-color: var(--shop-primary);
}

.product-card:hover::before {
    background: linear-gradient(135deg, var(--shop-primary-dark) 0%, var(--shop-primary) 100%);
}

.product-header {
    margin-bottom: 16px;
    padding-top: 8px;
}

.product-card h4 {
    color: #1e293b;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
}

.product-card p {
    color: #64748b;
    margin-bottom: 20px;
    line-height: 1.6;
    font-size: 0.95rem;
}

.product-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.product-price {
    font-weight: 700;
    color: #059669;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.product-price::before {
    content: "💰";
    font-size: 0.9rem;
}

.product-packages {
    font-size: 14px;
    color: #64748b;
    background: #f8fafc;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.product-packages::before {
    content: "📦";
    font-size: 0.8rem;
}

/* Product Card Icons */
.product-icon {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--shop-bg) 0%, #e9ecef 100%);
    border: 2px solid var(--shop-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-shadow: 0 2px 4px rgba(108, 41, 122, 0.2);
}

.product-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(214deg) brightness(97%) contrast(97%);
}

.product-card:hover .product-icon {
    background: linear-gradient(135deg, #e9ecef 0%, var(--shop-border) 100%);
    border-color: var(--shop-primary-dark);
    transform: scale(1.05);
    transition: all 0.3s ease;
}

.product-card:hover .product-icon img {
    filter: brightness(0) saturate(100%) invert(12%) sepia(81%) saturate(2851%) hue-rotate(214deg) brightness(97%) contrast(106%);
}

/* No Products Message */
.no-products {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
    font-size: 1.1rem;
    grid-column: 1 / -1;
}

.no-products::before {
    content: "🛍️";
    display: block;
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* Packages Grid */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 20px;
    padding: 0 8px;
}

.package-card {
    position: relative;
    border: 2px solid var(--shop-border);
    border-radius: 15px;
    padding: 8px;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: visible;
    direction: rtl;
    margin-bottom: 8px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    min-height: 400px;
}


.package-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    border-color: var(--shop-primary);
}


.package-header {
    margin-bottom: 15px;
    padding-top: 15px;
    text-align: center;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.package-header h4 {
    color: #424242;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.2;
}

.package-subtitle {
    color: #9E9C95;
    font-size: 0.8rem;
    margin-bottom: 0;
    font-weight: 400;
}

.package-separator {
    width: 100%;
    height: 1px;
    background-color: var(--shop-border);
    margin: 10px 0;
    border: none;
}

.package-price {
    font-size: 1.6rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    text-align: right;
    height: 60px;
    direction: ltr;
}

.package-price::before {
    content: none;
}

.package-price.sale {
    color: #dc2626;
}

.package-price .original-price {
    font-size: 1.2rem;
    color: #9E9C95;
    text-decoration: line-through;
    margin-left: 12px;
    font-weight: 400;
}

.package-description {
    color: #9E9C95;
    margin-bottom: 15px;
    line-height: 1.6;
    font-size: 0.8rem;
    text-align: center;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Package Icon */
.package-icon {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 2px solid #059669;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #059669;
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
}

.package-card:hover .package-icon {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-color: #047857;
    transform: scale(1.05);
    transition: all 0.3s ease;
}

.package-card.on-sale .package-icon {
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
    border-color: #dc2626;
    color: #dc2626;
}

.package-card.on-sale:hover .package-icon {
    background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
    border-color: #b91c1c;
}

/* Container Widget - for products only */
.container-widget {
    border-radius: 20px;
    background: #FFF;
    box-shadow: 4px 4px 36px 0px rgba(0, 0, 0, 0.16);
    height: 212px;
    width: 367px;
    position: relative;
    overflow: hidden;
    direction: rtl;
}

.container-widget:hover {
    outline: 2px solid var(--shop-primary);
    cursor: auto;
}

/* Ribbon - for products only */
.container-widget .ribbon {
    position: absolute;
    top: -35px;
    left: -75px;
    width: 193px;
    background-color: var(--shop-primary);
    color: white;
    text-align: center;
    transform: rotate(-45deg);
    transform-origin: right;
    font-size: 20px;
    padding-bottom: 5px;
    font-weight: 600;
}

.package-card-new .ribbon {
    position: absolute;
    top: -35px;
    left: -75px;
    width: 193px;
    background-color: var(--shop-primary);
    color: white;
    text-align: center;
    transform: rotate(-45deg);
    transform-origin: right;
    font-size: 20px;
    padding-bottom: 5px;
    font-weight: 600;
    z-index: 20;
}

.container-widget .ribbon a {
    text-decoration: none;
    color: white !important;
}

.package-card-new .ribbon a {
    text-decoration: none;
    color: white !important;
}

/* Header - for products only */
.container-widget .header {
    height: 64px;
    display: flex;
    padding: 0 20px 0 15px;
    justify-content: space-between;
    align-items: center;
    box-shadow: 4px 4px 36px 0px rgba(0, 0, 0, 0.08);
}

.container-widget .header p {
    font-size: 20px;
    font-weight: 600;
    text-align: right;
    margin-bottom: 0;
    color: #424242;
    margin-top: 2px;
}

/* Card Calc Items - for products only */
.container-widget .card-calc-items {
    display: flex;
    border-top: 0.6px solid var(--shop-border);
    height: 70%;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
}

.container-widget .card-calc-items p {
    margin-bottom: unset;
    padding-right: 13px;
    padding-left: 13px;
    padding-top: 6px;
    padding-bottom: 6px;
    width: 100%;
    color: #9E9C95;
    font-size: 14px;
    font-weight: 400;
}

/* Link Calc - for products only */
.container-widget .link-calc {
    font-size: 16px;
    font-weight: 600;
    color: var(--shop-primary);
    text-align: start;
    display: flex;
    width: 45%;
    align-items: center;
    padding-right: 19px;
}

.container-widget .link-calc div {
    margin-left: 8px;
}

.container-widget .link-calc img {
    width: 16px;
    height: 16px;
}

.package-details {
    margin-bottom: 15px;
}

.package-detail {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 14px;
}

.package-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.package-addons {
    margin-bottom: 15px;
    text-align: right;
    flex: 1;
    height: 140px;
    overflow: hidden;
}

.package-addons h6 {
    color: #2c3e50;
    margin-bottom: 10px;
    font-size: 0.9rem;
    font-weight: 600;
}

.addon-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.addon-item {
    padding: 4px 0;
    font-size: 12px;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 5px;
}

.addon-item::before {
    content: "✓";
    color: #4CAF50;
    font-weight: bold;
    font-size: 10px;
    width: 12px;
    height: 12px;
    background: #E8F5E8;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    flex-shrink: 0;
}

.addon-item:last-child {
    border-bottom: none;
}

.addon-item.required {
    color: #2c3e50;
    font-weight: 500;
}

.addon-item.included {
    color: #2c3e50;
}

.more-addons-btn {
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
    font-size: 14px;
    text-decoration: underline;
    padding: 0;
    margin-top: 5px;
}

.package-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    gap: 8px;
    padding-top: 15px;
}

.btn-add-to-cart {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: background-color 0.3s ease;
    flex: 1;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-add-to-cart:hover {
    background-color: #0056b3;
}

.btn-view-addons {
    background: white;
    border: 2px solid #6c757d;
    color: #6c757d;
    padding: 10px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 13px;
    flex: 1;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-view-addons:hover {
    background-color: #6c757d;
    color: white;
}

.btn-view-details {
    background: none;
    border: 1px solid #007bff;
    color: #007bff;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-view-details:hover {
    background-color: #007bff;
    color: white;
}

/* Cart Sidebar - Left Side - Show by default */
.cart-sidebar-left {
    position: fixed;
    top: 0;
    left: 0;
    width: 20%;
    max-width: 300px;
    min-width: 200px;
    height: 100vh;
    background: white;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    transition: left 0.3s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    direction: rtl;
}

.cart-sidebar-left.closed {
    left: -350px;
}

/* Alternative class name support */
.cart-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 350px;
    height: 100vh;
    background: white;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    transition: left 0.3s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    direction: rtl;
}



.cart-header {
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-header h5 {
    margin: 0;
    font-size: 1.25em;
    font-weight: 400;
    color: var(--shop-secondary);
    font-family: 'Heebo', 'Roboto', sans-serif;
}

.cart-toggle {
    background: #007bff;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    width: 50px;
    height: 50px;
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Enhanced Cart Items */
.cart-items {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cart-item {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
    position: relative;
    font-family: 'Heebo', 'Roboto', sans-serif;
}

.cart-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Delete button in top left */
.remove-item-top {
    position: absolute;
    top: 10px;
    left: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.2s ease;
}

.remove-item-top:hover {
    transform: scale(1.1);
}

.remove-item-top svg {
    display: block;
}

.cart-item-details {
    margin-bottom: 12px;
    padding-right: 5px;
    /* Space for delete button */
}

/* Title - 1em, bold, color */
.cart-item-title {
    font-family: 'Heebo', 'Roboto', sans-serif;
    font-size: 1em;
    font-weight: bold;
    color: #424242;
    margin-bottom: 4px;
    line-height: 1.3;
}

/* Description - 0.8em */
.cart-item-description {
    font-family: 'Heebo', 'Roboto', sans-serif;
    font-size: 0.8em;
    color: #9E9C95;
    margin-bottom: 0;
    font-weight: 400;
}

/* Bottom section with controls and price */
.cart-item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e9ecef;
}

.cart-item-controls {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--shop-primary);
    border-radius: 8px;
    background: #F9FAFB;
    padding: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cart-item-controls button {
    background: transparent;
    color: var(--shop-primary);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: all 0.2s ease;
    font-size: 18px;
    font-family: 'Heebo', 'Roboto', sans-serif;
}

.cart-item-controls button:hover:not(:disabled) {
    background: #F5F5F5;
    color: var(--shop-primary);
}

.cart-item-controls button:disabled {
    background: transparent;
    color: #ccc;
    cursor: not-allowed;
}

.cart-item-controls .quantity {
    font-weight: 600;
    font-size: 1em;
    color: var(--shop-primary);
    min-width: 40px;
    text-align: center;
    font-family: 'Heebo', 'Roboto', sans-serif;
    padding: 0 8px;
}

.cart-item-price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-right: 5px;
}

.cart-item-price span {
    font-weight: 700;
    font-size: 1.5em;
    color: #424242;
    font-family: 'Heebo', 'Roboto', sans-serif;
}

/* Volume Discount Badge (legacy - kept for backwards compat) */
.discount-badge-package {
    display: none;
}

/* Per-user cost display */
.per-user-cost {
    color: #000;
    font-size: 0.85em;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    font-family: 'Heebo', 'Roboto', sans-serif;
}


.empty-cart-message {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 40px 20px;
}

.cart-footer {
    padding: 20px;
    border-top: 1px solid #e9ecef;
}

.cart-total {
    margin-bottom: 15px;
    font-size: 18px;
    color: #424242;
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 14px;
    direction: rtl;
}

.cart-grand-total {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
    font-size: 16px;
}

/* Bug 28570: subtotal + VAT rows sit above the grand total; muted color and
   tabular numbers for readability. */
.cart-subtotal-row,
.cart-vat-row {
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

.btn-checkout {
    width: 100%;
    background-color: var(--shop-primary);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

/* Shop landing (no specific product selected): use the navy section theme. */
body[data-shop-landing] .btn-checkout {
    background-color: #002141;
}

body[data-shop-landing] .btn-checkout:hover:not(:disabled) {
    background-color: #001a35;
}

.btn-checkout:hover:not(:disabled) {
    background-color: var(--shop-primary);
}

.btn-checkout:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}

/* Loading Spinner */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--shop-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Customer Form */
.customer-details-form {
    max-width: 600px;
    margin: 0 auto;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
}

/* Shop Form Actions - Separate buttons properly */
.shop-form-login-register {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.shop-form-login-register .btn {
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 0 0 auto;
    min-width: 140px;
    text-align: center;
}

.form-actions .btn {
    padding: 12px 24px;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--shop-primary);
    color: white;
    border: none;
}

.btn-primary:hover {
    background-color: var(--shop-primary);
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
    border: none;
}

.btn-secondary:hover {
    background-color: #545b62;
}

/* Enhanced Modal Styles */
.modal-enhanced {
    max-width: 500px;
    margin: 1.75rem auto;
}

.modal-content.modal-rtl {
    border-radius: 16px;
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    direction: rtl;
    overflow: hidden;
}

.modal-header-enhanced {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 24px 24px 20px 24px;
    border-bottom: none;
    position: relative;
    text-align: center;
}

.modal-close-btn {
    position: absolute;
    top: 16px;
    left: 16px;
    background: none;
    border: none;
    font-size: 18px;
    color: #6c757d;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-close-btn:hover {
    background-color: rgba(108, 117, 125, 0.1);
    color: #495057;
}

.modal-title-section {
    text-align: center;
}

.modal-main-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
    line-height: 1.3;
}

.modal-subtitle {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 16px;
    font-weight: 400;
}

.modal-price-section {
    margin-bottom: 0;
}

.modal-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: #28a745;
    display: inline-block;
}

.modal-body-enhanced {
    padding: 24px;
    background: white;
    max-height: 400px;
    overflow-y: auto;
}

.modal-footer-enhanced {
    padding: 20px 24px 24px 24px;
    background: white;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

.btn-modal-action {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(108, 41, 122, 0.3);
    min-width: 140px;
}

.btn-modal-action:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(108, 41, 122, 0.4);
}

/* Enhanced Modal Content Styles */
.enhanced-addons-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
}

.enhanced-addons-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.enhanced-addons-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
    line-height: 1.4;
}

.enhanced-addons-subtitle {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 16px;
    line-height: 1.5;
}

.enhanced-addons-description {
    font-size: 0.9rem;
    color: #495057;
    line-height: 1.6;
    margin: 0;
}

.enhanced-addons-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.enhanced-addon-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px;
    transition: all 0.2s ease;
}

.enhanced-addon-item:hover {
    background: #e9ecef;
    border-color: #dee2e6;
}

.addon-content .addon-title {
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    line-height: 1.3;
}

.addon-content .addon-description {
    font-size: 0.9rem;
    color: #6c757d;
    line-height: 1.5;
    margin: 0;
}

.enhanced-no-addons {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.enhanced-no-addons .no-addons-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.enhanced-no-addons h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
}

.enhanced-no-addons p {
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

/* Legacy Modal Styles for Compatibility */
.modal-compact {
    max-width: 600px;
    margin: 1.75rem auto;
}

.modal-content {
    border-radius: 8px;
}

.modal-header {
    border-bottom: 1px solid #e9ecef;
    padding: 20px;
    background-color: #f8f9fa;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: #495057;
    text-align: right;
}

.modal-body {
    padding: 20px;
    direction: rtl;
}

.modal-footer {
    border-top: 1px solid #e9ecef;
    padding: 20px;
    text-align: left;
}

/* Package Details Modal */
.package-details-modal {
    direction: rtl;
}

.package-info {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.package-title {
    color: #2c3e50;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.package-description {
    color: #6c757d;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.package-price-info {
    font-size: 1.1rem;
}

.package-price-info strong {
    color: #28a745;
}

.package-price-info .original-price {
    color: #6c757d;
    font-size: 0.9rem;
    text-decoration: line-through;
}

/* Addons Information */
.addons-info {
    margin-top: 1.5rem;
}

.addons-title {
    color: #495057;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    border-bottom: 2px solid #3b82f6;
    padding-bottom: 0.5rem;
}

.addons-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.addon-info-item {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 1rem;
    transition: all 0.2s ease;
}

.addon-info-item:hover {
    background-color: #e9ecef;
}

.addon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.addon-name {
    font-weight: 600;
    color: #495057;
    font-size: 1rem;
}

.addon-price {
    display: flex;
    gap: 0.5rem;
}

.badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-required {
    background-color: #dc3545;
    color: white;
}

.badge-included {
    background-color: #28a745;
    color: white;
}

.addon-cost {
    color: #007bff;
    font-weight: 600;
}

.addon-free {
    color: #28a745;
    font-weight: 600;
}

.addon-description {
    color: #6c757d;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

.no-addons {
    text-align: center;
    padding: 2rem;
    color: #6c757d;
    font-style: italic;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {

    /* Modal dialog - 90% width on mobile */
    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-dialog-centered {
        max-width: 90% !important;
        width: 90% !important;
        margin: 1rem auto !important;
    }

    .modal-content {
        width: 100% !important;
    }

    .shop-container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100vw !important;
    }

    /* Remove padding from content area */
    .shop-content {
        padding: 0 !important;
        margin: 0 !important;
        min-height: auto;
    }

    .step-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Hide desktop progress bar on mobile */
    .shop-progress,
    .desktop-progress {
        display: none !important;
    }

    /* Show mobile step indicator */
    .mobile-step-indicator {
        display: block !important;
    }

    /* Mobile progress adjustments */
    .progress-step {
        margin: 0 10px;
    }

    /* Mobile grids */
    .products-grid,
    .packages-grid {
        grid-template-columns: 1fr;
        padding: 0 5px;
        gap: 15px;
    }

    /* Mobile product cards */
    .container-widget {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 180px;
        margin: 0 auto;
    }

    .container-widget .header {
        height: 50px;
        padding: 0 15px;
    }

    .container-widget .header p {
        font-size: 18px;
    }

    .container-widget .card-calc-items {
        height: 130px;
        overflow: hidden;
    }

    .container-widget .link-calc {
        width: 48%;
        font-size: 14px;
    }

    .container-widget .link-calc img {
        width: 14px;
        height: 14px;
    }

    /* Mobile package cards */
    .package-card {
        max-width: 100%;
        margin: 0 auto 15px;
        min-height: 350px;
    }

    .package-header {
        height: 80px;
    }

    .package-header h4 {
        font-size: 1.2rem;
    }

    /* Mobile cart adjustments */
    .cart-sidebar {
        width: 100%;
        left: -100%;
    }



    .cart-sidebar-left {
        width: 100%;
        max-width: 240px;
        left: -100%;
    }



    /* Mobile floating cart */
    .floating-cart-toggle {
        left: 15px;
        bottom: 20px;
        top: auto;
        transform: none;
    }

    .cart-toggle-btn {
        width: 56px;
        height: 56px;
        font-size: 18px;
    }

    /* Mobile form adjustments */
    .form-actions {
        flex-direction: column;
        gap: 10px;
    }

    /* Mobile step header */
    .step-header h2 {
        font-size: 1.5rem;
    }

    .step-header p {
        font-size: 14px;
    }

    /* Mobile modal adjustments */
    .modal-enhanced {
        max-width: 95%;
        margin: 0.5rem auto;
    }
}

/* Tablet responsive design */
@media (max-width: 992px) and (min-width: 769px) {
    .shop-container {
        padding: 15px;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .packages-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .container-widget {
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }
}

/* Large screen adjustments */
@media (min-width: 1200px) {
    .shop-container {
        max-width: 1400px;
    }

    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }
}

/* ====================================
   SUCCESS PAGE STYLES
   ==================================== */

/* Green Notification Bar */
.success-notification-bar {
    background-color: #26A543;
    color: white;
    padding: 15px 20px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 30px;
}

.success-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Heebo', 'Roboto', sans-serif;
}

.success-header {
    text-align: center;
    margin-bottom: 30px;
}

.success-header h1 {
    color: var(--shop-secondary);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.success-subtitle {
    color: #6c757d;
    font-size: 1.1rem;
}

/* Success Checkmark Animation */
.success-checkmark-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px auto;
}

.success-circle {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.success-circle svg {
    position: absolute;
    width: 36px;
    height: 36px;
}

.success-circle .checkmark {
    position: absolute;
    animation: checkmarkAnimation 0.8s ease-in-out forwards;
}

@keyframes checkmarkAnimation {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.success-message {
    text-align: center;
    margin: 30px 0;
}

.success-message h3 {
    color: var(--shop-secondary);
    font-size: 1.4rem;
    font-weight: 600;
}

/* Order Summary Card */

.order-summary-card {
    width: 40%;
    background-color: #F5F5F5;
}

.order-summary-card,
.order-items-card,
.completion-details-card {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 25px;
}

.order-card-title {
    color: var(--shop-secondary);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--shop-primary);
    padding-bottom: 15px;
}

.order-summary-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.order-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #F5F5F5;
}

.order-detail-row:last-child {
    border-bottom: none;
}

.order-detail-label {
    font-weight: 600;
    color: var(--shop-secondary);
}

.order-detail-value {
    color: var(--shop-secondary);
}

/* Order Items Card */
.order-items-header {
    display: grid;
    grid-template-columns: 2fr 0.5fr 1fr;
    padding: 10px 0;
    border-bottom: 2px solid var(--shop-primary);
    margin-bottom: 15px;
    font-weight: 600;
    color: var(--shop-secondary);
}

.order-item-header-name,
.order-item-header-quantity,
.order-item-header-price {
    padding: 8px;
}

.order-item-header-quantity,
.order-item-header-price {
    text-align: center;
}

.order-items-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.order-item {
    display: grid;
    grid-template-columns: 2fr 0.5fr 1fr;
    padding: 12px 8px;
    border-bottom: 1px solid var(--shop-primary);
    align-items: center;
}

.order-item:last-child {
    border-bottom: none;
}

.order-item-name {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.order-item-name strong {
    color: var(--shop-secondary);
    font-weight: 600;
}

.order-item-name span {
    color: #6c757d;
    font-size: 0.9rem;
}

.order-item-quantity {
    font-weight: 600;
    color: var(--shop-secondary);
    text-align: center;
}

.order-item-price {
    font-weight: 600;
    color: #26A543;
    text-align: center;
}

/* Back to Shop Button */
.success-back-to-shop {
    text-align: right;
    margin-bottom: 10px;
}

.btn-back-to-shop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--shop-primary);
    color: white;
    padding: 14px 44px;
    border-radius: 8px;
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease;
    font-family: 'Heebo', 'Roboto', sans-serif;
}

.btn-back-to-shop:hover {
    background-color: #5a2066;
    color: white;
    text-decoration: none;
}

/* Completion Steps */
.completion-details-card {
    background-color: #F0F5FF;
}

.completion-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.completion-check-icon {
    background-color: #26A543;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.completion-check-icon svg {
    width: 15px;
    height: 11px;
}

.completion-check-icon path {
    stroke: white;
}

.completion-header h3 {
    color: var(--shop-secondary);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.completion-steps {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.completion-step {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #c9d8f7;
}

.completion-step:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.step-check {
    background-color: #26A543;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-check svg {
    width: 12px;
    height: 9px;
}

.step-check path {
    stroke: white;
}

.step-text {
    color: var(--shop-secondary);
    font-weight: 500;
}

/* Info Note */
.info-note-box {
    background-color: #F5F5F5;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 30px;
}

.info-icon {
    color: #26A543;
    font-size: 1.5rem;
}

.info-text {
    color: var(--shop-secondary);
    font-size: 0.95rem;
    flex: 1;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.btn-back-to-shop {
    background-color: #26A543;
    color: white;
    padding: 15px 40px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: background-color 0.3s ease;
    display: inline-block;
}

.btn-back-to-shop:hover {
    background-color: #1f8a35;
    text-decoration: none;
    color: white;
}

/* Layout container for order summary and info boxes */
.order-info-layout {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    direction: rtl;
}

/* Mobile responsive: stack layout as column */
@media (max-width: 768px) {
    .order-info-layout {
        flex-direction: column;
    }

    .order-summary-card {
        width: 100%;
    }
}

.order-summary-card {
    width: 40%;
}

/* Info boxes stacked vertically */
.info-boxes-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

.info-box {
    padding: 20px;
    border-radius: 8px;
}

.info-box.green {
    background-color: #E9F7EC;
    color: var(--shop-secondary);
}

.info-box.blue {
    background-color: #F0F5FF;
    color: var(--shop-secondary);
}

.info-box-blue-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-box-blue-ul li {
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-box-blue-ul li::before {
    content: none !important;
    display: none !important;
}

.info-box h4 {
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 1.1rem;
}

.info-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-box li {
    padding: 8px 0;
    position: relative;
    padding-right: 20px;
}

.info-box.green li::before {
    content: "✓";
    position: absolute;
    right: 0;
    color: white;
    font-weight: bold;
}

.info-box.blue li::before {
    content: "•";
    position: absolute;
    right: 0;
    color: var(--shop-secondary);
    font-weight: bold;
}

/* Mobile Responsiveness for Success Page */
@media (max-width: 768px) {
    .success-container {
        padding: 20px 15px;
    }

    .info-boxes-container {
        flex-direction: column;
    }

    .success-header h1 {
        font-size: 1.6rem;
    }

    .success-subtitle {
        font-size: 0.95rem;
    }

    .success-circle {
        width: 100px;
        height: 100px;
    }

    .success-circle svg {
        width: 80px;
        height: 80px;
    }

    .success-message h3 {
        font-size: 1.2rem;
    }

    .order-card-title {
        font-size: 1.1rem;
    }

    .order-summary-card,
    .order-items-card,
    .completion-details-card {
        padding: 20px 15px;
        width: 100%;
    }

    .order-items-header {
        display: none;
    }

    .order-item {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .order-item-name {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-left: 0;
    }

    .order-item-quantity {
        text-align: left;
    }

    .order-item-quantity::before {
        content: "כמות: ";
        font-weight: normal;
        color: #6c757d;
        margin-left: 5px;
    }

    .order-item-price {
        text-align: left;
    }

    .order-item-price::before {
        content: "סכום: ";
        font-weight: normal;
        color: #6c757d;
        margin-left: 5px;
    }

    .info-note-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .btn-back-to-shop {
        width: 100%;
        text-align: center;
    }
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
}

/* RTL Support */
[dir="rtl"] .cart-sidebar {
    left: auto;
    right: -350px;
}

[dir="rtl"] .cart-sidebar.open {
    right: 0;
}

[dir="rtl"] .cart-count {
    right: auto;
    left: -5px;
}

/* Floating Cart Toggle Button */
.floating-cart-toggle {
    position: fixed;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    z-index: 999;
}

.cart-toggle-btn {
    background: var(--shop-primary);
    color: white;
    border: none;
    padding: 15px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    width: 60px;
    height: 60px;
    box-shadow: 0 4px 12px rgba(108, 41, 122, 0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.cart-toggle-btn:hover {
    background: #893999;
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(108, 41, 122, 0.4);
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: 2px solid white;
}

/* Update floating cart count */
#floating-cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #dc3545;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: 2px solid white;
}

/* System Font Support */
.shop-container * {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Authentication Styles */
.auth-choice-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
    direction: rtl;
}

.auth-choice-header {
    margin-bottom: 40px;
}

.auth-choice-header h3 {
    color: #333;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.auth-choice-header p {
    color: #666;
    font-size: 1.1rem;
}

.auth-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.auth-option-card {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 30px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.auth-option-card:hover {
    border-color: #007bff;
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(108, 41, 122, 0.15);
}

.auth-option-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: white;
    font-size: 24px;
}

.auth-option-card h4 {
    color: #333;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.auth-option-card p {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}

.auth-choice-footer {
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.auth-choice-footer p {
    color: #6c757d;
    font-size: 0.9rem;
    margin: 0;
}

.auth-choice-footer i {
    color: #28a745;
    margin-left: 8px;
}

/* Form Styles */
.form-group {
    margin-bottom: 1.5rem;
    text-align: right;
    direction: rtl;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #495057;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    direction: rtl;
    text-align: right;
}

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(108, 41, 122, 0.25);
}

.form-control.is-invalid {
    border-color: #dc3545;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

.form-row .form-group {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

.col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.form-check {
    position: relative;
    display: block;
    padding-right: 1.25rem;
    direction: rtl;
}

.form-check-input {
    position: absolute;
    margin-top: 0.3rem;
    margin-right: -1.25rem;
    margin-left: 0;
}

.form-check-label {
    margin-bottom: 0;
    cursor: pointer;
}

/* Fix for registration form checkboxes in RTL */
.register-payment-form .form-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-right: 0;
    margin-bottom: 15px;
    direction: rtl;
}

.register-payment-form .registration-check-input {
    position: relative;
    margin: 0;
    margin-top: 3px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.register-payment-form .form-check-label {
    /* Bug 27715: with flex:1 the label expanded to fill the row, so clicking
       anywhere on the row toggled the checkbox. Limit the click target to the
       actual text width — clicking blank space no longer toggles. */
    flex: 0 0 auto;
    text-align: right;
    cursor: pointer;
    line-height: 1.5;
}

.invalid-feedback {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--shop-primary);
    display: none;
}

.form-control.is-invalid~.invalid-feedback {
    display: block;
}

/* Alert Styles */
.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    direction: rtl;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

.alert i {
    margin-left: 8px;
}

/* Button Styles */
.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.375rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-decoration: none;
}

.btn:hover {
    text-decoration: none;
}

.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}

.btn-outline-primary {
    color: #007bff;
    border-color: #007bff;
    background-color: transparent;
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
    background-color: transparent;
}

.btn-outline-secondary:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

/* Button Spinner */
.btn-spinner {
    display: none;
}

.btn-spinner i {
    margin-left: 8px;
    animation: spinnerRotate 1s linear infinite;
}

/* Spinner Animation */
@keyframes spinnerRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Font Awesome fa-spin override */
.fa-spin {
    animation: spinnerRotate 1s linear infinite !important;
}

/* Login/Register Specific Styles */
.login-error-message,
.register-error-message {
    margin-bottom: 1rem;
}

.register-info-message {
    margin-bottom: 1rem;
}

.forgot-password-link {
    text-align: center;
    margin-top: 1rem;
}

.forgot-password-link a {
    color: #007bff;
    text-decoration: none;
    font-size: 0.9rem;
}

.forgot-password-link a:hover {
    text-decoration: underline;
}

/* Text Utilities */
.text-muted {
    color: #6c757d !important;
}

/* Account Selection Styles */
.cart-review-section {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    direction: rtl;
}

.cart-review-section h4 {
    color: #495057;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 15px;
    border-bottom: 2px solid #007bff;
    padding-bottom: 8px;
}

.cart-review-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cart-review-item {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-review-item .item-details h6 {
    color: #007bff;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.cart-review-item .item-details .text-muted {
    color: #6c757d;
    font-size: 0.9rem;
}

.cart-review-item .item-quantity {
    display: flex;
    align-items: center;
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quantity-controls button {
    background: #007bff;
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: background-color 0.2s ease;
    font-size: 12px;
}


.quantity-controls button:hover:not(:disabled) {
    background: #0056b3;
}

.quantity-controls button:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

.quantity-display {
    font-weight: 600;
    font-size: 1rem;
    color: #495057;
    min-width: 30px;
    text-align: center;
}

.cart-review-item .item-price {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-review-item .item-price .price {
    font-weight: 700;
    font-size: 1.1rem;
    color: #003366;
}

.cart-totals-review {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid #dee2e6;
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: #495057;
}

.total-row span:last-child {
    color: #28a745;
}

/* Account Selection Grid */
.accounts-container {
    margin-bottom: 20px;
}

.accounts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.account-card {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    direction: rtl;
    position: relative;
}

.account-card:hover {
    border-color: #007bff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(108, 41, 122, 0.15);
}

.account-card.selected {
    border-color: #28a745;
    background-color: #f8fff9;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.account-card.restricted {
    opacity: 0.7;
}

.account-card.restricted:hover {
    border-color: #ffc107;
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.15);
}

.account-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.account-header h5 {
    color: #495057;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.role-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.role-badge.role-admin {
    background-color: #28a745;
    color: white;
}

.role-badge.role-user {
    background-color: #6c757d;
    color: white;
}

.role-badge.personal {
    background-color: #921010;
    color: white;
}

.account-details {
    margin-bottom: 15px;
}

.account-details .tenant-name {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.account-details .business-id {
    color: #6c757d;
    font-size: 0.85rem;
    margin: 0;
}

.account-permissions {
    margin-bottom: 15px;
}

.permission-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.permission-indicator.success {
    color: #28a745;
}

.permission-indicator.warning {
    color: #ffc107;
}

.permission-indicator.danger {
    color: #dc3545;
}

.payment-methods-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #007bff;
}

.account-actions {
    text-align: center;
}

.select-account-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s ease;
    width: 100%;
}

.select-account-btn:hover {
    background-color: #0056b3;
}

.account-card.selected .select-account-btn {
    background-color: #28a745;
}

.account-card.selected .select-account-btn:hover {
    background-color: #218838;
}

.no-accounts {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
    font-size: 1.1rem;
}

.account-selection-error {
    margin-bottom: 20px;
}

/* Success Message */
.success-message {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #28a745;
    color: white;
    padding: 15px 20px;
    border-radius: 4px;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    direction: rtl;
    font-weight: 500;
}

/* Responsive Design for Auth Forms */
@media (max-width: 768px) {
    .auth-options {
        grid-template-columns: 1fr;
    }

    .form-row {
        flex-direction: column;
    }

    .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .auth-choice-container {
        padding: 20px 10px;
    }

    .auth-option-card {
        padding: 20px 15px;
    }

    .accounts-grid {
        grid-template-columns: 1fr;
    }

    .cart-review-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .cart-review-item .item-price {
        width: 100%;
        justify-content: space-between;
    }

    /* Enhanced Modal Responsive Design */
    .modal-enhanced {
        max-width: 95%;
        margin: 1rem auto;
    }

    .modal-header-enhanced {
        padding: 20px 16px 16px 16px;
    }

    .modal-main-title {
        font-size: 1.3rem;
    }

    .modal-subtitle {
        font-size: 0.85rem;
    }

    .modal-price {
        font-size: 1.2rem;
    }

    .modal-body-enhanced {
        padding: 16px;
        max-height: 300px;
    }

    .modal-footer-enhanced {
        padding: 16px;
    }

    .btn-modal-action {
        padding: 10px 24px;
        font-size: 0.9rem;
        min-width: 120px;
    }

    .enhanced-addons-section {
        margin-bottom: 20px;
        padding-bottom: 16px;
    }

    .enhanced-addons-title {
        font-size: 1rem;
    }

    .enhanced-addons-subtitle {
        font-size: 0.85rem;
    }

    .enhanced-addons-description {
        font-size: 0.85rem;
    }

    .enhanced-addon-item {
        padding: 12px;
    }

    .addon-content .addon-title {
        font-size: 0.9rem;
    }

    .addon-content .addon-description {
        font-size: 0.85rem;
    }

    .enhanced-no-addons {
        padding: 30px 16px;
    }

    .enhanced-no-addons .no-addons-icon {
        font-size: 2.5rem;
    }

    .enhanced-no-addons h3 {
        font-size: 1.1rem;
    }

    .enhanced-no-addons p {
        font-size: 0.85rem;
    }
}

/* ====================================
   NEW PACKAGE SELECTION STYLES
   3-Package Grid with Monthly/Yearly Toggle
   ==================================== */

/* Packages Section Container */
.packages-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    direction: rtl;
}

/* Packages Header */
.packages-header {
    text-align: center;
    margin-bottom: 10px;
    padding-left: clamp(120px, 10vw, 180px);
    padding-right: clamp(120px, 10vw, 180px);
    box-sizing: border-box;
}

.packages-header h4 {
    color: #424242;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.2;
}

.packages-header p {
    color: #9E9C95;
    font-size: 0.9rem;
    font-weight: 400;
    margin: 0;
    line-height: 1.4;
}

/* Pricing Tabs (Monthly/Yearly Toggle) - Simple with underline */
.pricing-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-bottom: 20px;
}

.pricing-tab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #9E9C95;
    padding: 12px 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pricing-tab:hover {
    color: var(--shop-primary);
    border-bottom-color: var(--shop-primary);
}

.pricing-tab.active {
    color: var(--shop-primary);
    border-bottom-color: var(--shop-primary);
}

.discount-badge {
    background: var(--shop-primary);
    color: white;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Packages Grid - centered flex, supports any count (1, 2, 3, 4+ wraps to next row) */
.packages-grid-new {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.packages-grid-new > .package-card-new {
    flex: 0 1 clamp(260px, 22vw, 340px);
    max-width: clamp(280px, 22vw, 360px);
    min-width: 260px;
}

/* Package Card - New Design - All same size and color */
.package-card-new {
    background: white;
    border: 1px solid var(--shop-primary);
    border-radius: 20px;
    padding: clamp(16px, 2vh, 32px) clamp(16px, 1.5vw, 28px);
    min-height: clamp(380px, 55vh, 620px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(82, 81, 81, 0.475);
    justify-content: flex-start;
}

.package-card-new:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    border-color: var(--shop-primary);
}

/* Package Header - Badge left, Title right */
.package-header-new {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}

.discount-badge-left {
    background: #E0F2FE;
    color: #377DFF;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Discount Badge for Yearly Mode - Top Left Corner of Price */
/* Discount Badge for Yearly Mode - Top Left Corner of Price */
.discount-badge-yearly {
    position: absolute;
    top: -26px;
    transform: none;
    left: 0;
    background: #EEE6EF;
    color: var(--shop-primary);
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 2px 4px #EEE6EF;
}

/* Reserve vertical space above the price line so the badge has room. */
.package-price-new:has(.discount-badge-yearly:not([style*="display: none"])) {
    margin-top: 26px;
}

.package-title-section {
    flex: 1;
    text-align: right;
    padding-right: 16px;
}

.package-title-section h3 {
    color: #1a202c;
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0 0 4px 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.package-title-section .subtitle {
    color: var(--shop-primary);
    font-size: 0.85rem;
    font-weight: 400;
    margin: 0;
    line-height: 1.4;
}

/* Package Price - Right aligned */
.package-price-new {
    text-align: right;
    padding: 4px 0;
    direction: rtl;
    position: relative;
    /* margin-top: 0; Removed margin */
}

.package-price-new .price {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a202c;
    direction: ltr;
}

.package-price-new .period {
    display: inline-block;
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 400;
    margin-right: 8px;
}

/* VAT Exclusion Text - Below Price */
.vat-exclusion-text {
    text-align: right;
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 18px;
    margin-bottom: 12px;
    font-weight: 400;
    direction: rtl;
}

/* Monthly Comparison Line - Shown in yearly mode */
.monthly-comparison {
    text-align: right;
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 4px;
    margin-bottom: 0;
    font-weight: 400;
    direction: rtl;
    line-height: 1.4;
    min-height: 0;
}

/* Original Price Crossed Out - for yearly mode */
.original-price-crossed {
    text-decoration: line-through;
    color: #6c757d;
    font-size: 1.2rem;
    font-weight: 500;
    margin-left: 12px;
    opacity: 0.7;
    direction: ltr;
    display: inline-block;
}

/* Package Features - Fixed height so buttons align */
.package-card-new .package-features {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 8px;
    text-align: right;
    overflow: visible;
}

/* Remove ALL list styling */
.package-card-new .package-features ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.package-card-new .package-features li {
    list-style: none !important;
    list-style-type: none !important;
    padding: 3px 0;
    font-size: 0.82rem;
    color: #495057;
    line-height: 1.4;
}

.package-card-new .package-features li::before {
    content: none !important;
    display: none !important;
}

.package-card-new .package-features li::marker {
    display: none !important;
    content: none !important;
}

.package-card-new .package-features>div {
    padding: 8px 0;
    font-size: 0.95rem;
    color: #495057;
    line-height: 1.6;
}

/* תוספות heading - much smaller text */
.package-card-new .package-features h6,
.package-card-new .package-features .features-title {
    font-size: 0.65rem !important;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* Purchase Button - Darker and more subtle */
.btn-purchase {
    width: 100%;
    background: var(--shop-primary);
    color: white;
    border: none;
    padding: 9px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(108, 41, 122, 0.2);
    text-transform: none;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-purchase i {
    font-size: 0.95rem;
}

.btn-purchase:hover {
    background: var(--shop-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 41, 122, 0.3);
}

.btn-purchase:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(108, 41, 122, 0.2);
}

/* No Packages Message */
.packages-grid-new .no-packages {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
    font-size: 1.1rem;
}

.packages-grid-new .no-packages::before {
    content: "📦";
    display: block;
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* Responsive Design for New Package Layout */
@media (max-width: 992px) {
    .packages-grid-new {
        gap: 24px;
    }

    .package-card-new.recommended {
        transform: scale(1);
    }

    .package-card-new.recommended:hover {
        transform: translateY(-8px);
    }
}

@media (max-width: 768px) {
    .packages-section {
        padding: 15px;
    }

    /* Let the product description span the full mobile width — the desktop
       clamp() padding (120-180px each side) eats most of a narrow screen. */
    .packages-header {
        padding-left: 0;
        padding-right: 0;
    }

    /* On mobile the header row flows above the page content instead of being
       pinned to the top-right (which would overlap the tabs behind it).
       !important is needed because the base .shop-header-actions rule lives
       later in the file (same-specificity tie-break would otherwise win). */
    .shop-header-actions {
        position: static !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 12px;
        padding: 12px 16px;
        z-index: auto !important;
    }

    /* Shrink the brand logo so it doesn't dominate the narrow viewport. */
    .shop-brand-logo {
        height: 22px;
    }

    .packages-header h2 {
        font-size: 2rem;
    }

    .packages-header p {
        font-size: 1rem;
        font-weight: 300;
    }

    .pricing-tabs {
        flex-direction: row;
        gap: 12px;
        margin-bottom: 10px;
    }

    .pricing-tab {
        width: 100%;
        justify-content: center;
        padding: 5px 10px;
    }

    .packages-header h4 {
        font-size: 1.5rem;
    }

    .packages-grid-new {
        gap: 20px;
    }

    .packages-grid-new > .package-card-new {
        flex: 0 1 100%;
        max-width: 100%;
    }

    .package-card-new {
        min-height: auto;
        padding: 24px 20px;
    }

    .package-card-new.recommended {
        transform: scale(1);
    }

    .package-card-new .package-header h3 {
        font-size: 1.5rem;
    }

    .package-card-new .package-price .price {
        font-size: 2rem;
    }

    .recommended-ribbon {
        font-size: 0.75rem;
        padding: 6px 20px 6px 28px;
    }

    .btn-purchase {
        padding: 14px 24px;
        font-size: 1rem;
    }
}

/* ====================================
   REGISTRATION + PAYMENT FORM - CARD DESIGN
   ==================================== */

.register-payment-form {
    max-width: 1300px;
    margin: 40px auto;
    padding: 0 20px;
    direction: rtl;
}

/* Payment Only Mode - Narrower when user is logged in */
.register-payment-form.payment-only-mode {
    max-width: 700px;
}

.register-payment-form.payment-only-mode form {
    display: block;
}

/* Form Container - No border, just wrapper */
.register-payment-form form {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    justify-content: center;
}

/* Form Header */
.register-payment-form .form-header {
    text-align: center;
    margin-bottom: 30px;
}

.register-payment-form .form-header h4 {
    color: #424242;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.register-payment-form .form-header .text-muted {
    color: #6c757d;
    font-size: 1rem;
}

/* Card Layout for Each Section */
.register-payment-form .form-section {
    flex: 1;
    background: white;
    border: 0.5px solid #d5d6d6;
    border-radius: 6px;
    padding: 24px 20px;
    box-shadow: 0 4px 12px rgba(109, 109, 109, 0.475);
    transition: all 0.3s ease;
}

.register-payment-form .form-section:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Section Titles - Show them now */
.register-payment-form .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--shop-primary);
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--shop-primary);
}

.register-payment-form .section-title i {
    font-size: 1.2rem;
}

/* Form Groups */
.register-payment-form .form-group {
    margin-bottom: 20px;
}

.register-payment-form .form-group label {
    display: block;
    text-align: right;
    margin-bottom: 6px;
    font-size: 1rem;
    color: #64748B;
    font-family: 'Heebo', 'Roboto', sans-serif;
    font-weight: 600;
}





/* Form Controls */
.register-payment-form .form-control,
.register-payment-form select.form-control {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-family: 'Heebo', 'Roboto', sans-serif;
    font-weight: 400;
    border: 1px solid var(--shop-primary);
    border-radius: 6px;
    direction: rtl;
    text-align: right;
    background-color: #F9FAFB;
    transition: all 0.3s ease;
}

.register-payment-form .form-control:focus,
.register-payment-form select.form-control:focus {
    border-color: var(--shop-primary);
    outline: none;
    background-color: #F9FAFB;
    box-shadow: 0 0 0 3px rgba(108, 41, 122, 0.1);
}

.register-payment-form .form-control::placeholder {
    color: #999;
    font-size: 0.9rem;
}

/* Input with Icon (for dropdown arrow) */
.input-with-icon {
    position: relative;
}

.input-with-icon .form-control {
    padding-left: 35px;
}

.input-with-icon .dropdown-arrow {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Card Input with Logos */
.card-input-wrapper {
    position: relative;
}

.card-number-input {
    padding-left: 110px;
    direction: ltr !important;
    text-align: left !important;
}

.card-type-logos {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 5px;
    pointer-events: none;
}

.card-logo {
    width: 30px;
    height: 20px;
    opacity: 0.4;
}

.card-logo.active {
    opacity: 1;
}

/* Form Row */
.register-payment-form .form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 18px;
}

.register-payment-form .form-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

/* Checkboxes */
.register-payment-form .form-check {
    text-align: right;
    padding-right: 0;
    margin-bottom: 10px;
}

.register-payment-form .registration-check-input {
    margin-right: 0;
    margin-left: 8px;
}

.register-payment-form .form-check-label {
    font-size: 0.85rem;
    color: #666;
}

/* Registration/Payment section wrappers - center when shown alone */
#registrationSection,
#paymentSection {
    flex: 1;
    max-width: 700px;
    margin: 0 auto;
}

/* Submit Button */
.form-submit-section {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.btn-pay-modern {
    background: var(--shop-primary);
    color: white;
    border: none;
    padding: 12px 60px;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: normal;
    cursor: pointer;
}

.btn-pay-modern:hover {
    background: var(--shop-primary-dark);
}

/* Error Messages */
.register-payment-form .invalid-feedback {
    display: none;
    font-size: 0.8rem;
    color: #dc3545;
    margin-top: 3px;
}

.register-payment-form .form-control.is-invalid {
    border-color: #dc3545;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .register-payment-form {
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .register-payment-form form {
        padding: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 8px;
    }

    .register-payment-form .form-section {
        display: block;
        width: 100%;
        max-width: 100%;
        border-left: none;
        border-radius: 0;
        padding: 15px 12px;
        margin: 0;
    }

    .register-payment-form .form-group {
        margin-bottom: 8px;
    }

    .register-payment-form .form-row {
        flex-direction: column;
        gap: 0;
        margin-bottom: 8px;
    }

    .register-payment-form .form-header {
        margin-bottom: 12px;
        padding: 0 12px;
    }

    .register-payment-form .form-header h4 {
        font-size: 1.4rem;
    }

    #registrationSection,
    #paymentSection {
        max-width: 100%;
        margin: 0;
        width: 100%;
    }
}

/* ====================================
   REUSABLE MESSAGE MODAL
   ==================================== */

.message-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    direction: rtl;
}

.message-modal {
    background: white;
    padding: 30px;
    max-width: 650px;
    width: 90%;
    direction: rtl;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-close-x {
    position: absolute;
    top: 15px;
    left: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-close-x:hover {
    background-color: rgba(108, 117, 125, 0.1);
    border-radius: 50%;
    color: #495057;
}

.message-modal .modal-title {
    font-family: 'Heebo', 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 1.5em;
    /* 24px */
    color: #64748B;
    margin-bottom: 15px;
    line-height: 1.3;
}

.message-modal .modal-description {
    font-family: 'Heebo', 'Roboto', sans-serif;
    font-size: 1.2em;
    /* 16px */
    color: #64748B;
    line-height: 1.6;
    text-align: start;
    margin-top: 10px;
    margin-bottom: 40px;
}

.message-modal .modal-actions {
    display: flex;
    gap: 15px;
    justify-content: end;
}

.message-modal .btn-approve {
    font-family: 'Heebo', 'Roboto', sans-serif;
    background: var(--shop-primary);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.message-modal .btn-approve:hover {
    background: var(--shop-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(108, 41, 122, 0.3);
}

.message-modal .btn-dismiss {
    font-family: 'Heebo', 'Roboto', sans-serif;
    background: white;
    color: var(--shop-primary);
    border: 2px solid var(--shop-primary);
    padding: 12px 30px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.message-modal .btn-dismiss:hover {
    background: #EFF6FF;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(108, 41, 122, 0.2);
}

/* Mobile responsive for message modal */
@media (max-width: 768px) {
    .message-modal {
        max-width: 95%;
        padding: 24px 20px;
    }

    .message-modal .modal-title {
        font-size: 1.3em;
    }

    .message-modal .modal-description {
        font-size: 0.95em;
    }

    .message-modal .modal-actions {
        flex-direction: column;
        gap: 10px;
    }

    .message-modal .btn-approve,
    .message-modal .btn-dismiss {
        width: 100%;
        min-width: auto;
    }
}

/* ====================================
   ACCOUNT SELECTION MODAL
   ==================================== */

/* Account Selection Modal */
#accountSelectionModal .modal-dialog {
    max-width: 900px;
}

#accountSelectionModal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
    padding: 20px 30px;
}

#accountSelectionModal .modal-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 2px solid #dee2e6;
}

#accountSelectionModal .modal-title {
    color: var(--shop-primary);
    font-weight: 600;
}

#accountSelectionModal .modal-title i {
    margin-left: 8px;
    color: var(--shop-primary);
}

#accountSelectionModal .accounts-grid {
    margin-top: 20px;
}

/* Make account cards clickable in modal */
#accountSelectionModal .account-card {
    cursor: pointer;
    transition: all 0.3s ease;
}

#accountSelectionModal .account-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(108, 41, 122, 0.15);
    border-color: var(--shop-primary);
}

#accountSelectionModal .account-card.selected {
    border-color: #28a745 !important;
    background-color: #f8fff9;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2) !important;
}

#accountSelectionModal .account-card.selected::after {
    content: "✓";
    position: absolute;
    top: 10px;
    right: 10px;
    background: #28a745;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
}

#accountSelectionModal .loading-spinner {
    padding: 40px;
}

#accountSelectionModal .account-selection-error {
    margin-top: 15px;
}

/* Modal footer buttons */
#accountSelectionModal .modal-footer {
    border-top: 2px solid #dee2e6;
    padding: 15px 20px;
}

#accountSelectionModal .modal-footer .btn {
    min-width: 120px;
}

/* Responsive for modal */
@media (max-width: 768px) {
    #accountSelectionModal .modal-dialog {
        max-width: 95%;
        margin: 10px auto;
    }

    #accountSelectionModal .modal-body {
        padding: 15px;
        max-height: 60vh;
    }

    #accountSelectionModal .accounts-grid {
        grid-template-columns: 1fr;
    }
}

/* ====================================
   CART ITEM LOADING STATE
   ==================================== */

/* Loading state for cart items during quantity updates */
.cart-item.updating {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.cart-item.updating::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 10;
}

/* Disable buttons during update */
.cart-item.updating .cart-item-controls button {
    cursor: not-allowed;
    opacity: 0.5;
}

.cart-item.updating .remove-item-top {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Spin animation for loading indicator */
@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Flying card ghost animation */
.flying-card-ghost {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.9;
    background: white;
    border: 2px solid var(--shop-primary);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(108, 41, 122, 0.3);
    overflow: hidden;
}

/* Cart icon bump animation */
@keyframes cartBump {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

.cart-bump {
    animation: cartBump 0.4s ease-out;
}
/* ============================================================
   Grouped product listing (Step 1) — task #7
   ============================================================ */

.product-groups {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 16px 32px;
    direction: rtl;
}

.product-group {
    margin-bottom: 32px;
}

.product-group-title {
    text-align: right;
    font-size: 1rem;
    font-weight: 500;
    margin: 0 8px 16px;
}

.product-group.group-takdin .product-group-title {
    color: #6B2C70;
}

.product-group.group-hashavim .product-group-title {
    color: #002141;
}

.product-group-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.product-card-new {
    flex: 0 1 340px;
    max-width: 380px;
    min-width: 280px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    padding: 24px 22px 20px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.product-card-new:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.product-card-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 12px;
}

.product-card-header h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0;
    letter-spacing: -0.01em;
}

.product-card-features {
    flex: 1 1 auto;
    min-height: 160px;
    margin-bottom: 16px;
}

.product-card-features .link-calc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    color: #4a5568;
    font-size: 0.95rem;
    font-weight: 400;
}

.product-card-features .link-calc div {
    flex: 0 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card-features .link-calc img {
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

.product-card-features .link-calc p {
    margin: 0;
}

.product-card-cta {
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.product-card-cta:hover {
    filter: brightness(1.1);
}

.group-takdin .product-card-cta {
    background: #6B2C70;
}

.group-hashavim .product-card-cta,
.group-other .product-card-cta {
    background: #002141;
}

@media (max-width: 768px) {
    .product-group-grid > .product-card-new {
        flex: 0 1 100%;
        max-width: 100%;
    }
}

/* ============================================================
   Techdin two-tier seat pricing — task #8
   ============================================================ */

/* Card additions: seat-tier sub-line + disclaimers */
.additional-seat-line {
    font-size: 0.85rem;
    color: #6c757d;
    text-align: right;
    margin-top: 6px;
    margin-bottom: 8px;
    font-weight: 400;
    direction: rtl;
    /* Reserve one line-height even when empty (single-tier packages) so the
       תוספות: heading lines up at the same Y across all cards in the row. */
    min-height: 1.5em;
}

.additional-seat-line:empty::before {
    content: "";
    display: inline-block;
}

.package-disclaimers {
    font-size: 0.72rem;
    color: #7a8290;
    line-height: 1.5;
    margin-top: 10px;
    margin-bottom: 12px;
    text-align: right;
}

.package-disclaimers div + div {
    margin-top: 2px;
}

/* Techdin-themed CTA — uses --shop-primary so the admin product theme
   color override (set via ProductEditor) propagates to the button. */
.package-card-new.group-takdin .btn-purchase {
    background: var(--shop-primary);
}

.package-card-new.group-takdin .btn-purchase:hover {
    background: var(--shop-primary-dark);
}

/* Tiered cart rendering: visual breakdown of base + additional seats derived
   from a single cart item. Pricing math stays server-side via PricingRuleEngine.
   3 columns per row: label-block | stepper | price. Label-block flex-grows
   and truncates so the stepper and price always stay inside the sidebar. */
.cart-item.cart-item-tiered {
    padding: 14px 12px;
    overflow: hidden;
}

/* Single divider below the header. No divider between tier rows. */
.cart-item.cart-item-tiered .cart-item-details {
    border-bottom: 1px solid #eef0f3;
    padding-bottom: 10px;
    margin-bottom: 0;
}

.cart-item.cart-item-tiered .cart-tier-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.72rem;
    color: #1a202c;
    gap: 6px;
    min-width: 0;
}

.cart-item.cart-item-tiered .cart-tier-row-additional {
    padding-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}

.cart-item.cart-item-tiered .cart-tier-row-additional .cart-tier-label-block {
    flex: 0 1 auto;
    min-width: 0;
}

.cart-item.cart-item-tiered .cart-tier-row-additional .cart-item-controls {
    flex: 0 0 auto;
    margin: 0 auto;
}

/* Custom number spinner (replaces native ::webkit-inner-spin-button so we control
   the background color on all browsers). Up/down buttons stacked vertically on the
   left of the input — they always show and have a white background. */
.cart-tier-spinner {
    flex: 0 0 auto;
    margin: 0 auto;
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    background: #ffffff;
    overflow: hidden;
    height: 28px;
}

.cart-tier-spinner-input {
    width: 36px;
    padding: 0 4px;
    border: none;
    background: #ffffff;
    font-size: 0.85rem;
    font-weight: 500;
    color: #1a202c;
    text-align: center;
    direction: ltr;
    font-family: inherit;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Hide the browser-native spin buttons since we render our own */
.cart-tier-spinner-input::-webkit-inner-spin-button,
.cart-tier-spinner-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cart-tier-spinner-input:focus {
    outline: none;
}

.cart-tier-spinner-arrows {
    display: flex;
    flex-direction: column;
    /* Arrows on the visual right side of the spinner (input on the left). */
    order: -1;
    border-left: 1px solid #cbd5e0;
}

.cart-tier-spinner-up,
.cart-tier-spinner-down {
    width: 16px;
    flex: 1 1 50%;
    border: none;
    background: #ffffff;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

.cart-tier-spinner-up:hover:not(:disabled),
.cart-tier-spinner-down:hover:not(:disabled) {
    background: #f8fafc;
    color: #1a202c;
}

.cart-tier-spinner-up {
    border-bottom: 1px solid #e2e8f0;
}

.cart-tier-spinner-up::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid currentColor;
}

.cart-tier-spinner-down::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
}

.cart-tier-spinner-up:disabled,
.cart-tier-spinner-down:disabled,
.cart-tier-spinner-input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.cart-tier-spinner:focus-within {
    border-color: var(--shop-primary);
}

.cart-item.cart-item-tiered .cart-tier-row-additional .cart-tier-price {
    flex: 0 0 auto;
}

.cart-tier-label-block {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: right;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.cart-tier-label {
    color: #1a202c;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: nowrap;
}

.cart-tier-unit {
    color: #94a3b8;
    font-size: 0.62rem;
    font-weight: 400;
    white-space: nowrap;
}

.cart-tier-price {
    font-weight: 600;
    font-size: 0.78rem;
    color: #1a202c;
    direction: ltr;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Compact stepper inside cart tier rows so labels and price fit alongside */
.cart-item.cart-item-tiered .cart-tier-row .cart-item-controls {
    flex: 0 0 auto;
    padding: 1px 2px;
    gap: 2px;
    border-radius: 6px;
}

.cart-item.cart-item-tiered .cart-tier-row .cart-item-controls button {
    width: 16px;
    height: 16px;
    font-size: 0.8rem;
}

.cart-item.cart-item-tiered .cart-tier-row .cart-item-controls .quantity {
    min-width: 12px;
    font-size: 0.72rem;
}

/* Total row — bold, no divider above (the additional row already has bottom) */
.cart-item.cart-item-tiered .cart-tier-row-total {
    padding-top: 8px;
}

.cart-tier-row-total .cart-tier-label {
    font-weight: 700;
    font-size: 0.78rem;
}

.cart-tier-row-total .cart-tier-price {
    font-weight: 700;
    font-size: 0.85rem;
}

/* ============================================================
   14-day trial banner (group 1 / Takdin only) — task #8 design
   ============================================================ */
.trial-banner {
    display: inline-block;
    margin: 6px auto 0;
    padding: 4px 14px;
    color: var(--shop-primary);
    font-weight: 600;
    font-size: var(--shop-trial-font-size, 0.85rem);
    text-align: center;
    direction: rtl;
}

.packages-header {
    text-align: center;
}

/* ============================================================
   Cart quantity stepper — match design (rounded pill, larger buttons)
   ============================================================ */
.cart-item-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--shop-primary);
    border-radius: 8px;
    padding: 2px 4px;
    background: #fff;
}

.cart-item-controls button {
    background: transparent;
    border: none;
    color: var(--shop-primary);
    width: 26px;
    height: 26px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.cart-item-controls button:hover:not([disabled]) {
    background: rgba(108, 41, 122, 0.08);
}

.cart-item-controls button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.cart-item-controls .quantity {
    min-width: 18px;
    text-align: center;
    font-weight: 600;
    color: #1a202c;
    font-size: 0.95rem;
}

/* ============================================================
   Product / group logo header (top-right of shop pages)
   ============================================================ */
/* Top-right header row: brand logo (right) + user widget (its left). */
.shop-header-actions {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 1001;
    direction: rtl;
}

.shop-brand-logo {
    height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.shop-brand-logo img {
    height: 100%;
    width: auto;
}

/* Brand logo text fallback when the SVG file is missing */
.shop-brand-logo-label {
    display: none;
    font-family: 'Heebo', 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--shop-secondary);
    letter-spacing: -0.01em;
    direction: ltr;
}

/* Footer disclaimer — pinned to the bottom of the viewport. Spans from just
   past the cart sidebar (left edge) to the page right edge, so the long copy
   fills the available horizontal space instead of stacking into a narrow
   column. Text right-aligned in RTL. */
/* Per-product description text color (--shop-description-color overrides default). */
#product-description {
    color: var(--shop-description-color, inherit);
    font-size: var(--shop-description-font-size, inherit);
}

.packages-footer-note {
    margin: 0 0 20px;
    padding: 24px 0 16px 16px;
    text-align: right;
    color: var(--shop-disclaimer-color, #64748b);
    font-size: var(--shop-disclaimer-font-size, 0.8rem);
    line-height: 1.5;
    direction: rtl;
}

/* Secondary disclaimer flows under the packages, aligned with the cards area
   (centered horizontally like the grid, text right-aligned in RTL). */
.packages-footer-note-secondary {
    max-width: calc(clamp(260px, 22vw, 340px) * 2 + 24px);
    margin: 16px auto 0;
    text-align: right;
    color: var(--shop-disclaimer-color, #64748b);
    font-size: var(--shop-disclaimer-font-size, 0.8rem);
    line-height: 1.5;
    direction: rtl;
}

/* Product title image (replaces text in the package-selection header) */
.product-title-logo {
    display: inline-block;
    max-height: 96px;
    max-width: 420px;
    height: auto;
    width: auto;
}

/* Cart footer total — single row with "כולל מע"מ" subtitle under סה"כ */
.cart-grand-total-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
}

.cart-grand-total-sub {
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 400;
}

/* ============================================================
   Mobile overrides for elements defined later in the file
   (the brand logo + packages footer-note). Same-specificity
   later-wins means these must come AFTER the desktop rules.
   ============================================================ */
@media (max-width: 768px) {
    /* Brand logo lives inside .shop-header-actions (fixed top-right); cap its
       height so it doesn't dominate the narrow viewport. */
    .shop-brand-logo img {
        max-height: 22px;
        height: 22px;
        width: auto;
    }

    /* Disclaimer flows in normal block-order at the bottom of the page,
       not fixed over the content. */
    .packages-footer-note {
        position: static !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        margin: 24px 0 16px !important;
        padding: 0 16px !important;
        max-width: none !important;
    }
    /* Closed-cart override of left:24px does the same — neutralize on mobile */
    body:has(.cart-sidebar-left.closed) .packages-footer-note {
        left: auto !important;
    }
}

/* ---- Pre-checkout product popup (configured per product in admin) ---- */
.checkout-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.checkout-popup-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 56px 32px 40px;
    gap: 28px;
    width: 100%;
    max-width: 930px;
    min-height: 540px;
    background: var(--shop-bg, #EFEDE8);
    border-radius: 15px;
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
}

.checkout-popup-close {
    position: absolute;
    top: 16px;
    left: 20px;
    background: none;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: #1f2937;
}

.checkout-popup-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f2937;
}

.checkout-popup-icon svg {
    width: 100%;
    height: 100%;
}

.checkout-popup-bold {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.7;
    color: #1f2937;
    text-align: center;
    white-space: pre-line;
    margin: 0;
}

.checkout-popup-disclaimer {
    font-size: 0.95rem;
    color: #4b5563;
    text-align: center;
    white-space: pre-line;
    margin: 0;
}

.checkout-popup-cta {
    background: var(--shop-primary, #6b21a8);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 10px 44px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
}

.checkout-popup-cta:hover {
    background: var(--shop-primary-dark, #581c87);
}

.checkout-popup-divider {
    width: 100%;
    border-top: 1px solid var(--shop-border, #c9c6bf);
    margin: 0;
}

.checkout-popup-support {
    width: 100%;
    text-align: center;
    padding: 18px 0 22px;
    font-size: 0.95rem;
    color: #1f2937;
}

.checkout-popup-support a {
    color: #1f2937;
    text-decoration: underline;
    font-weight: 500;
}

@media (max-width: 768px) {
    .checkout-popup-card {
        padding: 28px 20px 0;
        gap: 16px;
    }
    .checkout-popup-bold { font-size: 1rem; }
    .checkout-popup-disclaimer { font-size: 0.88rem; }
}

/* Cart coupon input + applied state */
.cart-coupon {
    padding: 8px 0 4px;
    direction: rtl;
}
.cart-coupon-input-row {
    display: flex;
    gap: 8px;
}
.cart-coupon-input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #ccd5e0;
    border-radius: 6px;
    font-size: 14px;
    text-align: left;
}
.cart-coupon-input:focus {
    outline: none;
    border-color: var(--shop-primary, #26a543);
}
.cart-coupon-apply {
    background: var(--shop-primary, #26a543);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.cart-coupon-apply:hover { filter: brightness(0.93); }
.cart-coupon-applied-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f2fbf4;
    border: 1px solid #9fd8ac;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 14px;
}
.cart-coupon-label { font-weight: 600; color: #14742c; }
.cart-coupon-remove {
    background: none;
    border: none;
    color: #92610a;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
}
.cart-coupon-error {
    color: #c02b2b;
    font-size: 13px;
    margin-top: 6px;
}
.cart-coupon-discount-row {
    color: #14742c;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Suppress the green ✓ icon on every valid input / select — the form should
   only show the invalid state, never a "you got it right" affordance. */
.was-validated .form-control:valid,
.was-validated .form-control:valid:focus,
.was-validated .form-select:valid,
.was-validated .form-select:valid:focus,
.form-control.is-valid,
.form-control.is-valid:focus,
.form-select.is-valid,
.form-select.is-valid:focus {
    background-image: none !important;
    padding-right: 0.75rem !important;
    padding-left: 0.75rem !important;
}