/**
 * Checkout Redesign Styles
 * New checkout design - 2025
 *
 * Theme Variables:
 * - primary: #111111
 * - background-light: #F9FAFB
 * - card-light: #FFFFFF
 * - border-light: #E5E7EB
 * - text-secondary-light: #6B7280
 * - border-radius: 0.5rem (8px)
 * - font-family: IBM Plex Sans Arabic
 */

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(-5px); }
    100% { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.2s ease-out forwards;
}

/* ========================================
   SCROLLBAR STYLING
   ======================================== */
/* Vertical scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 4px; /* Thinner horizontal scrollbar */
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #D1D5DB; /* gray-300 - lighter */
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF; /* gray-400 */
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #D1D5DB transparent;
}

/* ========================================
   MATERIAL SYMBOLS SETTINGS
   ======================================== */
.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

/* ========================================
   PAGE BACKGROUND
   ======================================== */
#content,
#content.col-sm-12,
.checkout-content,
#checkout,
.xtensions-checkout, 
body:has(#navbar2) {
    background-color: #F9FAFB !important;
}

/* ========================================
   FONTS - Global Override
   ======================================== */
html,
body,
body *:not(.fa):not(.fas):not(.far):not(.fab):not(.material-symbols-outlined):not([class*="icon"]) {
    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Ensure inputs and buttons also use the font */
input,
button,
select,
textarea,
.btn,
label,
a,
p,
h1, h2, h3, h4, h5, h6,
span:not(.material-symbols-outlined):not(.fa):not(.fas):not(.far):not(.fab),
div {
    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ========================================
   CHECKOUT HEADER
   ======================================== */
.checkout-header {
    background-color: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
    padding: 16px 0;
    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.checkout-header *:not(.material-symbols-outlined) {
    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Material Symbols must keep its own font */
.checkout-header .material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
}

.checkout-header .store-name,
.checkout-header .secure-text,
.checkout-header .back-to-cart-text {
    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.checkout-header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Store Link (Start in RTL) */
.checkout-header-start {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.store-link {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #111111;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-weight: 500;
    font-size: 14px;
}

.store-link:hover {
    text-decoration: none;
    color: #111111;
}

.store-icon {
    font-size: 24px !important;
    color: #111111;
}

.store-name {
    color: #111111;
    font-weight: 800;
    font-size: 16px;
}

/* Secure Badge (Center) */
.checkout-header-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.secure-icon {
    font-size: 18px !important;
    color: #6B7280; /* gray-500 - darker */
}

.secure-text {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #6B7280;
}

/* Back to Cart (End in RTL) */
.checkout-header-end {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.back-to-cart-link {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #111111;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-weight: 500;
    font-size: 14px;
    transition: color 0.2s ease;
}

.back-to-cart-link:hover {
    text-decoration: none;
    color: #555;
}

.back-to-cart-text {
    color: inherit;
}

.back-arrow {
    font-size: 18px;
    color: inherit;
}

/* LTR Support for Header */
html[dir="ltr"] .back-to-cart-link {
    flex-direction: row-reverse;
}

/* ========================================
   CHECKOUT FOOTER
   ======================================== */
.checkout-footer {
    background-color: #fff;
    border-top: 1px solid #E5E7EB;
    padding: 16px 0;
}

.checkout-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.secure-payment-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #28a745;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.secure-payment-icon {
    font-size: 18px;
    color: #28a745;
}

.secure-payment-text {
    color: #28a745;
}

.payment-methods-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.payment-icon {
    height: 24px;
    width: auto;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.payment-icon:hover {
    opacity: 1;
}

/* ========================================
   WHATSAPP FLOATING BUTTON
   ======================================== */
.whatsapp-floating-container {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 99999;
    direction: ltr;
    animation: fadeInUp 0.6s ease-out;
}

.whatsapp-float {
    position: relative;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    animation: bounceIn 0.6s ease-out 0.5s both;
}

.whatsapp-float:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6);
    text-decoration: none;
}

.whatsapp-float:active {
    transform: translateY(-1px) scale(1.05);
}

.whatsapp-float:focus {
    outline: 2px solid #25D366;
    outline-offset: 2px;
}

.whatsapp-icon-wrapper {
    position: relative;
    z-index: 2;
}

.whatsapp-float .fab {
    font-size: 28px;
    color: white;
    transition: all 0.3s ease;
}

.whatsapp-float:hover .fab {
    transform: scale(1.1);
    color: #ffffff;
}

/* Pulse animation */
.whatsapp-pulse,
.whatsapp-pulse-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.3);
    animation: pulse 2s infinite;
}

.whatsapp-pulse-2 {
    animation-delay: 1s;
    background: rgba(37, 211, 102, 0.2);
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    70% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}

/* Tooltip */
.whatsapp-tooltip {
    position: absolute;
    bottom: 70px;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.whatsapp-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.8);
}

.whatsapp-floating-container:hover .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-5px);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    /* Header Mobile */
    .checkout-header-container {
        padding: 0 16px;
    }

    .store-link,
    .back-to-cart-link {
        font-size: 13px;
    }

    .store-icon,
    .back-arrow {
        font-size: 18px;
    }

    .secure-icon {
        font-size: 16px;
    }

    .secure-text {
        font-size: 12px;
    }

    /* Footer Mobile */
    .checkout-footer-container {
        padding: 0 16px;
    }

    .secure-payment-badge {
        font-size: 13px;
    }

    .secure-payment-icon {
        font-size: 16px;
    }

    .payment-icon {
        height: 20px;
    }

    /* WhatsApp Mobile */
    .whatsapp-floating-container {
        bottom: 20px;
        right: 20px;
    }

    .whatsapp-float {
        width: 55px;
        height: 55px;
    }

    .whatsapp-float .fab {
        font-size: 24px;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    /* Keep secure badge visible but make it smaller */
    .checkout-header-center {
        display: flex;
        flex: 0 0 auto;
        padding: 0 4px;
    }

    .checkout-header-center .secure-icon {
        font-size: 14px !important;
    }

    .checkout-header-center .secure-text {
        font-size: 10px;
    }

    .checkout-header-start,
    .checkout-header-end {
        flex: 1;
    }

    .store-name {
        font-size: 13px;
    }

    .back-to-cart-text {
        display: none;
    }
}

/* ========================================
   XCART - Override Bootstrap hidden-xs
   Force cart to show on all screen sizes
   ======================================== */
#xcart.hidden-xs {
    display: block !important;
}

/* ========================================
   ORDER SUMMARY SECTION
   ======================================== */

/* Title outside the card - Icon on left side in RTL */
.order-summary-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 0 12px 0;
    font-size: 18px !important; /* text-lg */
    font-weight: 600 !important;
    color: #111827 !important; /* gray-900 */
    /* Default: In RTL text on right, icon on left (natural flow) */
}

.order-summary-title .material-symbols-outlined {
    font-size: 20px;
    color: #111827 !important; /* gray-900 */
}

/* The card itself - top part of unified card */
.order-summary-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Legacy header - hide it */
.order-summary-header {
    display: none !important;
}

/* ========================================
   COUPON SECTION - Collapsible
   ======================================== */
.coupon-section {
    padding: 0;
    position: relative;
    margin-bottom: 0 !important;
}

/* Divider with padding on sides */
.coupon-section::before {
    content: '';
    display: block;
    height: 1px;
    background: #E5E7EB;
    margin: 0 20px;
}

/* Coupon Toggle Header - Collapsible */
.coupon-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.2s ease;
    /* Default: In RTL arrow naturally goes to left, label to right */
}

.coupon-toggle:hover {
    background: #fafafa;
}

.coupon-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px !important; /* text-sm */
    font-weight: 500 !important;
    color: #111827 !important; /* gray-600 */
    margin: 0;
}

.coupon-label .material-symbols-outlined {
    font-size: 18px !important;
    color: #111827 !important; /* gray-600 - same as text */
}

.coupon-toggle-arrow {
    font-size: 20px;
    color: #111827 !important; /* gray-600 - same as text */
    transition: transform 0.3s ease;
}

.coupon-toggle.active .coupon-toggle-arrow {
    transform: rotate(180deg);
}

/* Applied Coupon Display */
.coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #E8F5E9;
    border-radius: 8px;
    margin: 12px 20px;
    border: 1px solid #81C784;
}

.coupon-applied-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #2E7D32;
    font-size: 14px;
}

.coupon-applied-label .material-symbols-outlined {
    font-size: 18px;
    color: #2E7D32;
}

.coupon-code {
    font-weight: 600;
    color: #1B5E20;
    font-family: monospace;
    font-size: 14px;
}

.coupon-remove-btn {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.coupon-remove-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #D32F2F;
}

.coupon-remove-btn .material-symbols-outlined {
    font-size: 18px;
}

/* Coupon Form - Hidden by default */
.coupon-form {
    display: none;
    padding: 0 20px 0;
}

.coupon-form.show {
    display: block;
}

.coupon-input-row {
    display: flex;
    gap: 10px;
    padding-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
}

.coupon-input-row .coupon-input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 13px;
    color: #111111;
    background: #fff;
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    height: 40px;
}

.coupon-input-row .coupon-input:focus {
    border-color: #111111;
}

.coupon-input-row .coupon-input::placeholder {
    color: #aaa;
}

html[dir="rtl"] .coupon-input-row .coupon-input {
    text-align: right;
}

.coupon-input-row .coupon-apply-btn {
    padding: 0 16px;
    background: #111111;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    height: 40px;
}

.coupon-input-row .coupon-apply-btn:hover {
    background: #333;
}

.coupon-input-row .coupon-apply-btn:disabled {
    background: #999;
    cursor: not-allowed;
}

/* Coupon Messages */
.coupon-message {
    margin-top: 8px;
    margin-bottom: 8px;
}

.coupon-message:empty {
    display: none;
}

.coupon-error {
    padding: 10px 14px;
    background: #fef2f2;
    color: #dc2626;
    border-radius: 6px;
    font-size: 13px;
}

.coupon-success {
    padding: 10px 14px;
    background: #ecfdf5;
    color: #059669;
    border-radius: 6px;
    font-size: 13px;
}

/* ========================================
   REWARD POINTS SECTION
   ======================================== */
.reward-points-section {
    /* No padding, divider handled by pseudo-element */
}

/* Divider with padding on sides */
.reward-points-section::before {
    content: '';
    display: block;
    height: 1px;
    background: #E5E7EB;
    margin: 0 20px;
}

/* Reward Toggle Header - Collapsible */
.reward-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.reward-toggle:hover {
    background: #fafafa;
}

.reward-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #4B5563 !important; /* gray-600 */
    margin: 0;
}

.reward-label .material-symbols-outlined {
    font-size: 18px !important;
    color: #4B5563 !important; /* gray-600 - same as text */
}

.reward-available {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #9CA3AF !important; /* gray-400 - lighter */
}

.reward-toggle-arrow {
    font-size: 20px;
    color: #4B5563 !important; /* gray-600 - same as text */
    transition: transform 0.3s ease;
}

.reward-toggle.active .reward-toggle-arrow {
    transform: rotate(180deg);
}

/* Reward Form - Hidden by default */
.reward-form {
    display: none;
    padding: 0 20px 0;
}

.reward-form.show {
    display: block;
}

.reward-input-row {
    display: flex;
    gap: 10px;
    padding-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
}

.reward-input-row .reward-input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 13px;
    color: #111111;
    background: #fff;
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    height: 40px;
}

.reward-input-row .reward-input:focus {
    border-color: #111111;
}

.reward-input-row .reward-input::placeholder {
    color: #aaa;
}

html[dir="rtl"] .reward-input-row .reward-input {
    text-align: right;
}

.reward-input-row .reward-apply-btn {
    padding: 0 16px;
    background: #111111;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    height: 40px;
}

.reward-input-row .reward-apply-btn:hover {
    background: #333;
}

.reward-input-row .reward-apply-btn:disabled {
    background: #999;
    cursor: not-allowed;
}

/* Reward Messages */
.reward-message {
    margin-top: 8px;
    margin-bottom: 8px;
}

.reward-message:empty {
    display: none;
}

.reward-error {
    padding: 10px 14px;
    background: #fef2f2;
    color: #dc2626;
    border-radius: 6px;
    font-size: 13px;
}

.reward-success {
    padding: 10px 14px;
    background: #ecfdf5;
    color: #059669;
    border-radius: 6px;
    font-size: 13px;
}

/* ========================================
   ORDER TOTALS - Wrapper & Sections
   ======================================== */
/* Wrapper for totals and notes - continues the card */
.order-summary-totals-wrapper {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-top: none;
    border-radius: 0 0 8px 8px;
    margin-top: -1px;
}

.order-totals-section {
    padding: 16px 20px;
    position: relative;
}

/* Divider with padding on sides */
.order-totals-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: #E5E7EB;
}

.order-notes-toggle {
    position: relative;
}

/* Divider with padding on sides */
.order-notes-toggle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: #E5E7EB;
}

.order-notes-container {
    /* Inside wrapper, inherits background */
}

/* When notes are expanded */
.order-notes-toggle.active {
    /* No changes needed */
}

/* ========================================
   HIDE LEGACY/DUPLICATE ELEMENTS
   ======================================== */
/* Hide entire xoptions panel (coupon/voucher/reward/comments) - we have our own */
.couponpanel,
.panel.couponpanel,
.panel-green1.couponpanel,
#xoptions-content {
    display: none !important;
}

/* Hide any old coupon panels that might show */
.panel.coupon-panel,
.xcoupon,
#coupon-content,
.coupon-form-old,
.order-summary-section.collapsible-section,
#coupon-panel,
.cvc-panel,
.voucher-panel,
.reward-panel,
#voucher-panel,
#reward-panel {
    display: none !important;
}

/* Hide old order notes/comments from xpayment_address.tpl */
.is_comment_panel,
#comment,
#order-comment,
#comment-panel,
.xcomment,
#comment-content,
#comment_text,
.comment-panel,
.notes-form-old {
    display: none !important;
}

/* Hide legacy options panels containers */
#options .container_panel:has(#coupon-panel),
#options .container_panel:has(#comment) {
    display: none !important;
}

/* Alert Messages */
.order-summary-alert {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.order-summary-alert.success {
    background: #d4edda;
    color: #155724;
    border-bottom: 1px solid #c3e6cb;
}

.order-summary-alert .alert-close {
    background: none;
    border: none;
    font-size: 20px;
    color: inherit;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

/* Products List - Scrollable when more than 3 products */
.order-summary-products {
    padding: 0;
    max-height: 280px; /* ~3 products (88px each + borders) */
    overflow-y: auto;
    overflow-x: hidden;
}

/* Product Item */
.order-product-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    position: relative;
}

/* Divider with padding on sides - not full width */
.order-product-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: #f0f0f0;
}

.order-product-item:last-child::after {
    display: none;
}

.product-image {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
}

.product-qty-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #111111;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

html[dir="rtl"] .product-qty-badge {
    right: auto;
    left: -6px;
}

.product-details {
    flex: 1;
    min-width: 0;
}

.product-name {
    font-size: 14px !important; /* text-sm */
    font-weight: 500 !important;
    color: #111827 !important; /* gray-900 */
    line-height: 1.4;
    margin-bottom: 2px;
}

.product-options-text {
    font-size: 12px !important; /* text-xs */
    color: #6B7280 !important; /* gray-500 */
    line-height: 1.3;
}

.out-of-stock-text {
    font-size: 11px;
    color: #dc3545;
    display: block;
    margin-top: 2px;
}

.product-error {
    font-size: 11px;
    color: #dc3545;
    margin-top: 2px;
}

.product-total {
    font-size: 14px !important; /* text-sm */
    font-weight: 600 !important;
    color: #111827 !important; /* gray-900 */
    white-space: nowrap;
}

/* ========================================
   COLLAPSIBLE SECTIONS
   ======================================== */
.order-summary-section {
    border-top: 1px solid #E5E7EB;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.section-header:hover {
    background: #fafafa;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px !important; /* text-base */
    font-weight: 600 !important;
    color: #111827 !important; /* gray-900 */
}

.section-icon {
    font-size: 20px !important;
    color: #111827 !important; /* gray-900 */
}

.section-toggle {
    font-size: 20px;
    color: #6B7280;
    transition: transform 0.3s ease;
}

.section-header:not(.collapsed) .section-toggle {
    transform: rotate(180deg);
}

.section-content {
    padding: 0 20px 20px;
}

/* Coupon Input */
.coupon-input-wrapper {
    display: flex;
    gap: 10px;
}

.coupon-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 14px;
    color: #111111;
    background: #fff;
    outline: none;
    transition: border-color 0.2s ease;
}

.coupon-input:focus {
    border-color: #111111;
}

.coupon-input::placeholder {
    color: #aaa;
}

.coupon-apply-btn {
    padding: 12px 24px;
    background: #111111;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.coupon-apply-btn:hover {
    background: #333;
}

/* ========================================
   ORDER TOTALS SECTION (Additional styles)
   ======================================== */
.order-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.order-total-row:first-child {
    padding-top: 0;
}

.order-total-row .total-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #6B7280 !important; /* gray-500 - lighter */
    flex: 1;
    min-width: 0; /* Allow flex item to shrink below content size */
    max-width: 65%; /* Leave space for value */
}

.order-total-row .total-label span:not(.total-icon) {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #6B7280 !important; /* gray-500 - lighter */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-total-row .total-label span {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #6B7280 !important; /* gray-500 - lighter */
}

.order-total-row .total-icon {
    font-size: 18px !important;
    color: #D1D5DB !important; /* gray-300 - lighter */
}

.order-total-row .total-value {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #111827 !important; /* gray-900 */
}

/* Grand Total - More prominent styling */
.order-total-row.grand-total {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #D1D5DB; /* gray-300 */
}

.order-total-row.grand-total .total-label {
    font-size: 18px !important; /* text-lg */
    font-weight: 700 !important;
    color: #111827 !important; /* gray-900 */
}

.order-total-row.grand-total .total-label span {
    font-size: 18px !important; /* text-lg */
    font-weight: 700 !important;
    color: #111827 !important; /* gray-900 */
}

.order-total-row.grand-total .total-value {
    font-size: 30px !important; /* text-3xl */
    font-weight: 700 !important;
    color: #111111 !important; /* primary */
}

/* Order Notes Toggle - Display properties */
.order-notes-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    cursor: pointer;
    transition: background 0.2s ease;
    /* Items flow naturally: in RTL circle appears on right of text */
}


.notes-icon {
    font-size: 18px !important;
    color: #4B5563 !important; /* gray-600 - same as text */
}

.notes-toggle-text {
    font-size: 14px !important; /* text-sm */
    font-weight: 500 !important;
    color: #4B5563 !important; /* gray-600 - same as coupon */
}

.notes-toggle-circle {
    width: 14px;
    height: 14px;
    border: 1.5px solid #D1D5DB; /* gray-300 */
    border-radius: 50%;
    background: #fff;
    transition: all 0.2s ease;
    position: relative;
    flex-shrink: 0;
}

.notes-toggle-circle.active {
    border-color: #111111;
    background: #111111;
}

.notes-toggle-circle.active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
}

/* Order Notes Container - Display properties */
.order-notes-container {
    padding: 0 20px 20px;
}

.order-notes-input {
    width: 100%;
    min-height: 80px;
    padding: 12px 16px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 14px;
    color: #111111;
    background: #fff;
    outline: none;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.order-notes-input:focus {
    border-color: #111111;
}

.order-notes-input::placeholder {
    color: #aaa;
}

html[dir="rtl"] .order-notes-input {
    text-align: right;
}

/* Secure Payment Info */
.secure-payment-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 20px;
    font-size: 13px;
    color: #28a745;
    border-top: 1px solid #E5E7EB;
}

.secure-payment-info .material-symbols-outlined {
    font-size: 16px;
}

/* ========================================
   ORDER SUMMARY - MOBILE RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .order-summary-card {
        border-radius: 8px 8px 0 0;
    }

    .order-summary-totals-wrapper {
        border-radius: 0 0 8px 8px;
    }

    .order-summary-header {
        padding: 16px;
    }

    .order-summary-icon {
        font-size: 20px;
    }

    .order-summary-text {
        font-size: 15px;
    }

    .order-summary-products {
        max-height: 240px; /* ~3 products on tablet */
    }

    .order-product-item {
        padding: 12px 16px;
        gap: 10px;
    }

    .product-image {
        width: 48px;
        height: 48px;
    }

    .product-qty-badge {
        min-width: 16px;
        height: 16px;
        font-size: 9px;
        top: -4px;
        right: -4px;
    }

    html[dir="rtl"] .product-qty-badge {
        right: auto;
        left: -4px;
    }

    .product-name {
        font-size: 13px;
    }

    .product-options-text {
        font-size: 11px;
    }

    .product-total {
        font-size: 13px;
    }

    .section-header {
        padding: 14px 16px;
    }

    .section-title {
        font-size: 13px;
    }

    .section-content {
        padding: 0 16px 16px;
    }

    /* Order totals mobile */
    .order-totals-section {
        padding: 14px 16px;
    }

    .order-notes-toggle::before {
        left: 0;
        right: 0;
        bottom: 35px;
        top: unset;
    }

    .order-notes-toggle {
        padding: 14px 16px;
    }

    .order-notes-container {
        padding: 0 16px 16px;
    }

    .coupon-toggle {
        padding: 12px 16px;
    }

    .coupon-section::before {
        margin: 0 16px;
    }

    .coupon-form {
        padding: 0 16px 14px;
    }

    .coupon-input-wrapper {
        flex-direction: column;
    }

    .coupon-apply-btn {
        width: 100%;
    }

    .order-total-row {
        padding: 8px 0;
    }

    .order-total-row .total-label,
    .order-total-row .total-label span {
        font-size: 13px !important;
    }

    .order-total-row .total-value {
        font-size: 13px !important;
    }

    .order-total-row.grand-total .total-label,
    .order-total-row.grand-total .total-label span {
        font-size: 14px !important;
    }

    .order-total-row.grand-total .total-value {
        font-size: 18px !important;
    }

    .secure-payment-info {
        padding: 14px 16px;
        font-size: 12px;
    }

    .order-notes-toggle {
        padding: 14px 16px;
    }

    .notes-toggle-text {
        font-size: 13px;
    }

    .order-notes-container {
        padding: 0 16px 16px;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .order-summary-header {
        padding: 14px 12px;
    }

    .order-summary-products {
        max-height: 210px; /* ~3 products on mobile */
    }

    .order-product-item {
        padding: 10px 12px;
    }

    .product-image {
        width: 44px;
        height: 44px;
    }

    .product-name {
        font-size: 12px;
    }

    .product-total {
        font-size: 12px;
    }

    .section-header,
    .section-content,
    .order-totals-section,
    .secure-payment-info,
    .order-notes-toggle,
    .order-notes-container {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ========================================
   ADDRESS SECTION
   ======================================== */
.checkout-address-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

/* Address Section Header - Collapsible */
.address-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid #E5E7EB;
}

.address-section-header:hover {
    background: #fafafa;
}

.address-section-header.collapsed .section-toggle {
    transform: rotate(0deg);
}

.address-section-header .section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px !important; /* text-base */
    font-weight: 600 !important;
    color: #111827 !important; /* gray-900 */
}

.address-section-header .section-icon {
    font-size: 20px !important;
    color: #111827 !important; /* gray-900 */
}

.address-section-header .section-toggle {
    font-size: 20px;
    color: #6B7280;
    transition: transform 0.3s ease;
    transform: rotate(180deg);
}

.address-section-header .add-address-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #111111;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.address-section-header .add-address-btn:hover {
    background: #f5f5f5;
    border-color: #ccc;
    text-decoration: none;
}

.address-section-header .add-address-btn .material-symbols-outlined {
    font-size: 18px;
}

/* Address List */
.address-list-new {
    padding: 0;
    margin: 0;
    list-style: none;
}

.address-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s ease;
}

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

.address-item:hover {
    background: #fafafa;
}

.address-item.selected {
    background: #f8fdf8;
}

/* Custom Radio Button */
.address-radio {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

.address-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
    margin: 0;
}

.address-radio .radio-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #d0d0d0;
    border-radius: 50%;
    background: #fff;
    transition: all 0.2s ease;
}

.address-radio input[type="radio"]:checked + .radio-circle {
    border-color: #111111;
}

.address-radio input[type="radio"]:checked + .radio-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #111111;
    border-radius: 50%;
}

/* Address Content */
.address-content {
    flex: 1;
    min-width: 0;
}

.address-text {
    font-size: 14px !important; /* text-sm */
    font-weight: 500 !important;
    color: #111827 !important; /* gray-900 */
    line-height: 1.5;
    margin-bottom: 4px;
}

.address-details {
    font-size: 12px !important; /* text-xs */
    color: #6B7280 !important; /* gray-500 */
    line-height: 1.4;
}

.address-national {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6B7280;
    margin-top: 6px;
}

.address-national .material-symbols-outlined {
    font-size: 14px;
    color: #6B7280;
}

.address-default-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    margin-top: 6px;
}

.address-default-badge .material-symbols-outlined {
    font-size: 12px;
}

/* Address Actions */
.address-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.address-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6B7280;
}

.address-action-btn:hover {
    background: #f0f0f0;
    color: #111111;
}

.address-action-btn.delete:hover {
    background: #ffeef0;
    color: #dc3545;
}

.address-action-btn .material-symbols-outlined {
    font-size: 18px;
}

/* Empty Address State */
.address-empty-state {
    text-align: center;
    padding: 40px 20px;
}

.address-empty-icon {
    font-size: 48px;
    color: #ccc;
    margin-bottom: 16px;
}

.address-empty-text {
    font-size: 14px;
    color: #6B7280;
    margin-bottom: 20px;
}

.address-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #111111;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
    text-decoration: none;
}

.address-empty-btn:hover {
    background: #333;
    color: #fff;
    text-decoration: none;
}

.address-empty-btn .material-symbols-outlined {
    font-size: 18px;
}

/* Shipping Address Toggle */
.shipping-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #E5E7EB;
    background: #fafafa;
}

.shipping-toggle-checkbox {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.shipping-toggle-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
    margin: 0;
}

.shipping-toggle-checkbox .checkbox-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #d0d0d0;
    border-radius: 4px;
    background: #fff;
    transition: all 0.2s ease;
}

.shipping-toggle-checkbox input[type="checkbox"]:checked + .checkbox-box {
    background: #111111;
    border-color: #111111;
}

.shipping-toggle-checkbox input[type="checkbox"]:checked + .checkbox-box::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 6px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.shipping-toggle-text {
    font-size: 14px;
    color: #111111;
}

/* ========================================
   CHECKOUT PAGE TITLE
   ======================================== */
.checkout-page-title {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 28px 0;
    padding: 0;
    text-align: right;
    width: 100%;
    line-height: 1.35;
}

html[dir="ltr"] .checkout-page-title {
    text-align: left;
}

/* Checkout page container */
#addressPage.container {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 1200px;
}

/* Checkout page layout - ensure columns align at top */
#addressPage > .row.equal {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-left: -15px;
    margin-right: -15px;
}

#addressPage > .row.equal > [class*="col-"] {
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    padding-right: 15px;
}

/* Main content column (left in RTL, right in LTR) */
#addressPage #existingAddress {
    margin-bottom: 20px;
}

/* Order summary column */
#addressPage .col-md-4 {
    margin-bottom: 20px;
}

/* ========================================
   ADDRESS SECTION - NEW DESIGN
   ======================================== */
/* Section Title (Outside card) */
.address-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 12px 0;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

.address-section-title .material-symbols-outlined {
    font-size: 20px;
    color: #111827 !important;
}

/* Filled icon variant */
.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Selected Address Card */
.address-selected-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

.address-selected-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 16px 20px;
    gap: 16px;
}

/* Circular icon container for address */
.address-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #F3F4F6;
    border-radius: 50%;
    flex-shrink: 0;
}

.address-icon-circle .material-symbols-outlined {
    font-size: 22px !important;
    color: #111827 !important;
}

.address-selected-info {
    flex: 1;
    min-width: 0;
}

.address-selected-main {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #111827 !important;
    line-height: 1.5;
    margin-bottom: 4px;
}

.address-selected-secondary {
    font-size: 13px !important;
    color: #6B7280 !important;
    line-height: 1.4;
}

.address-change-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #111111;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    flex-shrink: 0;
}

.address-change-btn:hover {
    background: #f5f5f5;
    border-color: #ccc;
    text-decoration: none;
    color: #111111;
}

/* Address List Modal/Expanded View */
.address-list-container {
    display: none;
    border-top: 1px solid #E5E7EB;
}

.address-list-container.show {
    display: block;
}

.address-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    padding: 12px 20px;
    background: #fff;
    border-bottom: 1px solid #E5E7EB;
}

html[dir="rtl"] .address-list-header {
    flex-direction: row-reverse;
}

.address-list-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #111827 !important;
}

.address-add-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #111111;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.address-add-new-btn:hover {
    background: #f5f5f5;
    border-color: #ccc;
    text-decoration: none;
    color: #111111;
}

.address-add-new-btn .material-symbols-outlined {
    font-size: 16px;
}

/* Address List Items */
.address-list-items {
    padding: 0;
    margin: 0;
    list-style: none;
    max-height: 300px;
    overflow-y: auto;
}

.address-list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s ease;
}

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

.address-list-item:hover {
    background: #fafafa;
}

.address-list-item.selected {
    background: #f0fdf4;
}

.address-list-item .address-radio {
    margin-top: 2px;
}

.address-list-item .address-info {
    flex: 1;
    min-width: 0;
}

.address-list-item .address-main-text {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #111827 !important;
    line-height: 1.4;
    margin-bottom: 2px;
}

.address-list-item .address-secondary-text {
    font-size: 12px !important;
    color: #6B7280 !important;
    line-height: 1.3;
}

.address-list-item .address-national-code {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #6B7280;
    margin-top: 4px;
}

.address-list-item .address-national-code .material-symbols-outlined {
    font-size: 14px;
}

.address-list-item .address-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 10px;
    font-weight: 500;
    border-radius: 4px;
    margin-top: 4px;
}

.address-list-item .address-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.address-list-item .address-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6B7280;
}

.address-list-item .address-edit-btn:hover {
    background: #f0f0f0;
    color: #111111;
}

.address-list-item .address-edit-btn .material-symbols-outlined {
    font-size: 16px;
}

/* Delete Button */
.address-list-item .address-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6B7280;
}

.address-list-item .address-delete-btn:hover {
    background: #FEE2E2;
    color: #DC2626;
}

.address-list-item .address-delete-btn .material-symbols-outlined {
    font-size: 16px;
}

/* No Address State */
.address-no-address {
    text-align: center;
    padding: 32px 20px;
}

.address-no-address-icon {
    font-size: 40px;
    color: #D1D5DB;
    margin-bottom: 12px;
}

.address-no-address-text {
    font-size: 14px;
    color: #6B7280;
    margin-bottom: 16px;
}

.address-no-address-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #111111;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
    text-decoration: none;
}

.address-no-address-btn:hover {
    background: #333;
    color: #fff;
    text-decoration: none;
}

.address-no-address-btn .material-symbols-outlined {
    font-size: 18px;
}

/* Alert Messages */
.address-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 20px;
    margin: 0;
    font-size: 13px;
    border-radius: 0;
}

.address-alert.danger {
    background: #fef2f2;
    color: #dc2626;
    border-bottom: 1px solid #fecaca;
}

.address-alert .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
}

/* ========================================
   SHIPPING METHODS SECTION
   ======================================== */
.shipping-methods-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

.shipping-method-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #E5E7EB;
    cursor: pointer;
    transition: background 0.2s ease;
}

.shipping-method-header:hover {
    background: #fafafa;
}

.shipping-method-header .section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px !important; /* text-base */
    font-weight: 600 !important;
    color: #111827 !important; /* gray-900 */
}

.shipping-method-header .section-icon {
    font-size: 20px !important;
    color: #111827 !important; /* gray-900 */
}

.shipping-method-header .section-toggle {
    font-size: 20px;
    color: #6B7280;
    transition: transform 0.3s ease;
    transform: rotate(180deg);
}

.shipping-method-header.collapsed .section-toggle {
    transform: rotate(0deg);
}

/* Shipping Methods List */
.shipping-methods-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.shipping-method-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s ease;
}

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

.shipping-method-item:hover {
    background: #fafafa;
}

.shipping-method-item.selected {
    background: #f8fdf8;
}

.shipping-method-info {
    flex: 1;
    min-width: 0;
}

.shipping-method-name {
    font-size: 14px !important; /* text-sm */
    font-weight: 500 !important;
    color: #111827 !important; /* gray-900 */
    margin-bottom: 2px;
}

.shipping-method-desc {
    font-size: 12px !important; /* text-xs */
    color: #6B7280 !important; /* gray-500 */
}

.shipping-method-price {
    font-size: 14px !important; /* text-sm */
    font-weight: 600 !important;
    color: #111827 !important; /* gray-900 */
    white-space: nowrap;
}

.shipping-method-free {
    color: #28a745;
}

/* Shipping Error */
.shipping-error-message {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 13px;
}

.shipping-error-message .material-symbols-outlined {
    font-size: 20px;
}

/* ========================================
   EXISTING ADDRESS ELEMENTS RESTYLE
   ======================================== */
/* Override existing panel-address styles */
.panel-address {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

.panel-address-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #E5E7EB;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: #111111;
}

.panel-address-heading .padd {
    display: flex;
    align-items: center;
    gap: 10px;
}

.panel-address-heading .padd::before {
    content: 'location_on';
    font-family: 'Material Symbols Outlined' !important;
    font-size: 22px;
    font-variation-settings: 'FILL' 1;
}

.panel-address-heading small {
    float: none !important;
}

.panel-address-heading small a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #111111;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.panel-address-heading small a:hover {
    background: #f5f5f5;
    border-color: #ccc;
    text-decoration: none;
}

.panel-address-heading small a i {
    font-size: 14px;
}

.panel-address-body {
    padding: 0 !important;
}

/* Address List Override */
.address-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.address-list .address-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s ease;
    margin: 0;
    background: transparent;
    border-radius: 0;
}

.address-list .address-label:last-child {
    border-bottom: none;
}

.address-list .address-label:hover {
    background: #fafafa;
}

.address-list .address-label.selected {
    background: #f8fdf8;
}

/* Radio Button Styling */
.address-list .address-label .input-radio {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #d0d0d0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    position: relative;
    margin: 2px 0 0 0;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.address-list .address-label .input-radio:checked {
    border-color: #111111;
}

.address-list .address-label .input-radio:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #111111;
    border-radius: 50%;
}

/* Address String */
.address-list .address-label .address-string {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #111111;
    line-height: 1.5;
}

/* Address Actions */
.address-list .address-label .add_delete {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.address-list .address-label .add_delete span {
    float: none !important;
}

.address-list .address-label .add_delete a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6B7280;
    text-decoration: none;
}

.address-list .address-label .add_delete a:hover {
    background: #f0f0f0;
    color: #111111;
}

.address-list .address-label .add_delete a.deleteAddress:hover {
    background: #ffeef0;
    color: #dc3545;
}

.address-list .address-label .add_delete a i {
    font-size: 16px;
}

.address-list .address-label .add_delete .label-default {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
}

/* Shipping Address Panel */
.shipping-address-panel {
    margin-top: 16px;
}

.shipping-address-panel .panel-address {
    margin-bottom: 0;
}

.shipping-address-panel .panel-address-heading {
    background: #fafafa;
}

.shipping-address-panel .panel-address-heading::before {
    content: 'local_shipping';
    font-family: 'Material Symbols Outlined' !important;
    font-size: 20px;
    font-variation-settings: 'FILL' 1;
    margin-right: 10px;
}

html[dir="rtl"] .shipping-address-panel .panel-address-heading::before {
    margin-right: 0;
    margin-left: 10px;
}

/* Shipping Method Panel Override */
.container_panel {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

.container_panel .heading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid #E5E7EB;
    font-size: 15px;
    font-weight: 600;
    color: #111111;
    background: transparent;
}

.container_panel .heading::before {
    content: 'local_shipping';
    font-family: 'Material Symbols Outlined' !important;
    font-size: 22px;
    font-variation-settings: 'FILL' 1;
}

.shipping-table {
    padding: 0;
}

.shipping-table table {
    width: 100%;
    margin: 0;
    border: none;
}

.shipping-table table tr {
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s ease;
}

.shipping-table table tr:last-child {
    border-bottom: none;
}

.shipping-table table tr:hover {
    background: #fafafa;
}

.shipping-table table tr.selected,
.shipping-table table tr:has(input:checked) {
    background: #f8fdf8;
}

.shipping-table table td {
    padding: 16px 20px;
    vertical-align: middle;
    border: none;
}

.shipping-table table td:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shipping-table table td:last-child {
    text-align: end;
    font-weight: 600;
    color: #111111;
}

.shipping-table table input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #d0d0d0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    position: relative;
    margin: 0;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.shipping-table table input[type="radio"]:checked {
    border-color: #111111;
}

.shipping-table table input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #111111;
    border-radius: 50%;
}

/* Shipping Error */
.shipping-table .xerror {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 13px;
    margin: 0;
}

/* Continue Button Override */
.agree-panel {
    margin-top: 20px;
}

.progress.progress-continue {
    background: transparent;
    box-shadow: none;
    border-radius: 8px;
    overflow: hidden;
    height: auto;
    margin: 0;
}

.progress.progress-continue .progress-bar {
    background: #111111;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    height: auto;
    width: 100% !important;
}

.progress.progress-continue .progress-bar:hover {
    background: #333;
}

.progress.progress-continue .progress-bar span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress.progress-continue .progress-bar i {
    font-size: 16px;
}

.progress.progress-continue-disabled .progress-bar {
    background: #E5E7EB;
    color: #999;
    cursor: not-allowed;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 8px;
    height: auto;
    width: 100% !important;
}

/* Agree Checkbox */
.agreeText {
    margin-bottom: 16px;
}

.agreeText label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 13px;
    color: #6B7280;
    line-height: 1.5;
}

.agreeText .input-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #d0d0d0;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    position: relative;
    margin: 0;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.agreeText .input-checkbox:checked {
    background: #111111;
    border-color: #111111;
}

.agreeText .input-checkbox:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 6px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Alert Messages */
#national-address-error-payment,
#national-address-error-shipping {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 20px;
    margin: 0 !important;
    font-size: 13px;
    border-radius: 0 !important;
    background: #fef2f2 !important;
    color: #dc2626;
    border-bottom: 1px solid #fecaca;
}

/* Hide old progress bar container styling */
.progress.progress-continue,
.progress.progress-continue-disabled {
    background: transparent !important;
    box-shadow: none !important;
}

/* ========================================
   ADDRESS SECTION - MOBILE RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .checkout-address-card,
    .shipping-methods-card {
        border-radius: 8px;
        margin-bottom: 12px;
    }

    .address-section-header,
    .shipping-method-header {
        padding: 14px 16px;
    }

    .address-section-header .section-title,
    .shipping-method-header .section-title {
        font-size: 14px;
    }

    .address-section-header .section-icon,
    .shipping-method-header .section-icon {
        font-size: 20px;
    }

    .address-section-header .add-address-btn {
        padding: 6px 12px;
        font-size: 12px;
    }

    .address-item,
    .shipping-method-item {
        padding: 14px 16px;
        gap: 10px;
    }

    .address-text {
        font-size: 13px;
    }

    .address-details {
        font-size: 12px;
    }

    .address-actions {
        flex-direction: column;
        gap: 4px;
    }

    .address-action-btn {
        width: 28px;
        height: 28px;
    }

    .shipping-toggle-row {
        padding: 14px 16px;
    }

    .shipping-method-name {
        font-size: 13px;
    }

    .shipping-method-price {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .address-section-header,
    .shipping-method-header {
        padding: 12px;
    }

    .address-item,
    .shipping-method-item {
        padding: 12px;
    }

    .address-section-header .add-address-btn span:not(.material-symbols-outlined) {
        display: none;
    }

    .address-section-header .add-address-btn {
        padding: 8px;
    }
}

/* ========================================
   PAYMENT METHODS SECTION
   ======================================== */
.payment-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}

.payment-card .nav-wizard {
    display: none !important;
}

.youpaytext {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #E5E7EB;
    font-size: 15px;
    font-weight: 600;
    color: #111111;
    margin: 0 !important;
}

.youpaytext::before {
    content: 'credit_card';
    font-family: 'Material Symbols Outlined' !important;
    font-size: 22px;
    font-variation-settings: 'FILL' 1;
    margin-right: 10px;
}

html[dir="rtl"] .youpaytext::before {
    margin-right: 0;
    margin-left: 10px;
}

.youpaytext .col-md-6 {
    width: auto;
    padding: 0;
    float: none;
}

.youpaytext .col-md-6:first-child {
    flex: 1;
}

.youpaytext .total {
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
}

.youpaytext .youpay {
    font-size: 16px;
    font-weight: 700;
    color: #111111;
    margin-left: 8px;
}

html[dir="rtl"] .youpaytext .youpay {
    margin-left: 0;
    margin-right: 8px;
}

/* Payment Accordion */
#payment-accordion {
    margin: 0;
}

#payment-accordion .panel {
    border: none;
    border-bottom: 1px solid #f0f0f0;
    box-shadow: none;
    margin: 0;
    border-radius: 0;
}

#payment-accordion .panel:last-child {
    border-bottom: none;
}

#payment-accordion .panel-heading {
    padding: 16px 20px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.2s ease;
}

#payment-accordion .panel-heading:hover {
    background: #fafafa;
}

#payment-accordion .panel-heading[aria-expanded="true"],
#payment-accordion .panel-heading:has(.heading-panel:not(.collapsed)) {
    background: #f8fdf8;
}

#payment-accordion .panel-title {
    flex: 1;
    margin: 0;
}

#payment-accordion .panel-title a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #111111;
}

#payment-accordion .panel-title a::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid #d0d0d0;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s ease;
}

#payment-accordion .panel-title a:not(.collapsed)::before {
    border-color: #111111;
}

#payment-accordion .panel-title a:not(.collapsed)::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #111111;
    border-radius: 50%;
    left: 26px;
    top: 22px;
}

#payment-accordion .panel-title label {
    font-size: 14px;
    font-weight: 500;
    color: #111111;
    cursor: pointer;
    margin: 0;
}

#payment-accordion .payment_images {
    flex-shrink: 0;
}

#payment-accordion .payment_method_img {
    height: 24px;
    width: auto;
}

#payment-accordion .panel-collapse {
    border: none;
}

#payment-accordion .panel-body {
    padding: 0 20px 20px;
    background: #fafafa;
}

/* Payment Tabs View */
.pside-bar {
    border-bottom: 1px solid #E5E7EB;
}

.nav-sidebar .nav-tabs {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 20px;
}

.nav-sidebar .nav-tabs li {
    float: none;
    margin: 0;
}

.nav-sidebar .nav-tabs li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
    color: #111111;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.nav-sidebar .nav-tabs li a:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.nav-sidebar .nav-tabs li.active a {
    background: #111111;
    border-color: #111111;
    color: #fff;
}

.nav-sidebar .nav-tabs li .payment_images {
    display: flex;
    align-items: center;
}

.nav-sidebar .nav-tabs li .payment_method_img {
    height: 20px;
    width: auto;
}

#paymentMethodTabContent {
    padding: 0;
}

#paymentMethodTabContent .panel {
    border: none;
    box-shadow: none;
    margin: 0;
}

#paymentMethodTabContent .panel-body {
    padding: 20px;
}

/* Side Panel (Address Summary) */
.sidepanel.panel {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}

.sidepanel.panel-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid #E5E7EB;
    font-size: 14px;
    font-weight: 600;
    color: #111111;
    background: transparent;
}

.sidepanel.panel-heading .fa-home::before {
    content: 'location_on';
    font-family: 'Material Symbols Outlined' !important;
    font-size: 20px;
    font-variation-settings: 'FILL' 1;
}

.sidepanel.panel-body {
    padding: 16px 20px;
    font-size: 13px;
    color: #6B7280;
    line-height: 1.5;
}

.sidepanel.panel-footer {
    padding: 12px 20px;
    border-top: 1px solid #E5E7EB;
    background: transparent;
}

.sidepanel.panel-footer .pchange a {
    font-size: 13px;
    color: #111111;
    text-decoration: underline;
}

.sidepanel.panel-footer .pchange a:hover {
    color: #333;
}

/* ========================================
   EXISTING ELEMENTS - MOBILE RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .panel-address {
        border-radius: 8px;
        margin-bottom: 12px;
    }

    .panel-address-heading {
        padding: 14px 16px;
        font-size: 14px;
    }

    .panel-address-heading .padd::before {
        font-size: 20px;
    }

    .panel-address-heading small a {
        padding: 6px 12px;
        font-size: 12px;
    }

    .address-list .address-label {
        padding: 14px 16px;
        gap: 10px;
    }

    .address-list .address-label .address-string {
        font-size: 13px;
    }

    .address-list .address-label .input-radio {
        width: 18px;
        height: 18px;
    }

    .address-list .address-label .input-radio:checked::after {
        width: 6px;
        height: 6px;
    }

    .address-list .address-label .add_delete a {
        width: 28px;
        height: 28px;
    }

    .container_panel {
        border-radius: 8px;
        margin-bottom: 12px;
    }

    .container_panel .heading {
        padding: 14px 16px;
        font-size: 14px;
    }

    .container_panel .heading::before {
        font-size: 20px;
    }

    .shipping-table table td {
        padding: 14px 16px;
    }

    .progress.progress-continue .progress-bar,
    .progress.progress-continue-disabled .progress-bar {
        padding: 14px 24px;
        font-size: 15px;
        border-radius: 8px;
    }

    .agreeText label {
        font-size: 12px;
    }

    .agreeText .input-checkbox {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    .panel-address-heading {
        padding: 12px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .panel-address-heading small a span:not(.fa):not(.fas) {
        display: none;
    }

    .panel-address-heading small a {
        padding: 8px;
    }

    .address-list .address-label {
        padding: 12px;
        flex-wrap: wrap;
    }

    .address-list .address-label .add_delete {
        flex-direction: row;
        width: 100%;
        justify-content: flex-end;
        margin-top: 8px;
    }

    .container_panel .heading {
        padding: 12px;
    }

    .shipping-table table td {
        padding: 12px;
    }

    .progress.progress-continue .progress-bar,
    .progress.progress-continue-disabled .progress-bar {
        padding: 12px 20px;
        font-size: 14px;
    }
}

/* ========================================
   PAYMENT METHODS - MOBILE RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .payment-card {
        border-radius: 8px;
    }

    .youpaytext {
        padding: 14px 16px;
        font-size: 14px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .youpaytext::before {
        font-size: 20px;
    }

    .youpaytext .youpay {
        font-size: 15px;
    }

    #payment-accordion .panel-heading {
        padding: 14px 16px;
    }

    #payment-accordion .panel-title label {
        font-size: 13px;
    }

    #payment-accordion .panel-body {
        padding: 0 16px 16px;
    }

    .nav-sidebar .nav-tabs {
        padding: 14px 16px;
        gap: 6px;
    }

    .nav-sidebar .nav-tabs li a {
        padding: 8px 12px;
        font-size: 13px;
    }

    #paymentMethodTabContent .panel-body {
        padding: 16px;
    }

    .sidepanel.panel {
        border-radius: 8px;
    }

    .sidepanel.panel-heading {
        padding: 14px 16px;
        font-size: 13px;
    }

    .sidepanel.panel-body {
        padding: 14px 16px;
        font-size: 12px;
    }

    .sidepanel.panel-footer {
        padding: 10px 16px;
    }
}

@media (max-width: 480px) {
    .youpaytext {
        padding: 12px;
    }

    #payment-accordion .panel-heading {
        padding: 12px;
    }

    #payment-accordion .panel-body {
        padding: 0 12px 12px;
    }

    .nav-sidebar .nav-tabs {
        padding: 12px;
    }

    .sidepanel.panel-heading,
    .sidepanel.panel-body,
    .sidepanel.panel-footer {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */
@media (prefers-color-scheme: dark) {
    .whatsapp-tooltip {
        background: rgba(255, 255, 255, 0.9);
        color: #333;
    }

    .whatsapp-tooltip::after {
        border-top-color: rgba(255, 255, 255, 0.9);
    }
}

/* ========================================
   HIDE LEGACY ADDRESS UI
   (Keep shipping/payment visible)
   ======================================== */
/* Hide legacy address panels and old UI */
#existingAddressPanel > .checkbox.is_checkbox.info-back-checkout,
#existingAddressPanel > .row:has(.panel-address),
#existingAddressPanel > .row:has(.payment-address-panel),
#existingAddressPanel > .clearfix:first-of-type,
#existingAddressPanel .panel.panel-default:has(.panel-heading .radio),
#existingAddressPanel .payment-address-panel,
#existingAddressPanel > h4,
#existingAddressPanel > .row > .col-md-12 > h4 {
    display: none !important;
}

/* Hide old address panels with cards */
#existingAddressPanel > .row > .col-sm-6.col-md-4,
#existingAddressPanel .panel-address,
#existingAddressPanel .panel-address-heading,
#existingAddressPanel .panel-address-body,
#existingAddressPanel .address-list,
#existingAddressPanel .address-label {
    display: none !important;
}

/* Ensure shipping method is visible */
#existingAddressPanel .is_shipping_method_panel,
#existingAddressPanel #shipping_method,
#existingAddressPanel .shipping-table {
    display: block !important;
}

/* Row containing shipping should be visible */
#existingAddressPanel > .row:has(.is_shipping_method_panel) {
    display: flex !important;
}

/* ========================================
   ADDRESS SECTION - RTL/LTR SUPPORT
   ======================================== */

/* RTL Layout Adjustments */
html[dir="rtl"] .address-section-title {
    flex-direction: row;
}

html[dir="ltr"] .address-section-title {
    flex-direction: row;
}

/* Selected Address Content */
html[dir="rtl"] .address-selected-content {
    flex-direction: row;
    text-align: right;
}

html[dir="ltr"] .address-selected-content {
    flex-direction: row;
    text-align: left;
}

/* Address Info Text Alignment */
html[dir="rtl"] .address-selected-info {
    text-align: right;
}

html[dir="ltr"] .address-selected-info {
    text-align: left;
}

/* Address List Items */
html[dir="rtl"] .address-list-item {
    flex-direction: row;
    text-align: right;
}

html[dir="ltr"] .address-list-item {
    flex-direction: row;
    text-align: left;
}

html[dir="rtl"] .address-list-item .address-info {
    text-align: right;
}

html[dir="ltr"] .address-list-item .address-info {
    text-align: left;
}

/* No Address State */
html[dir="rtl"] .address-no-address {
    text-align: center;
}

html[dir="ltr"] .address-no-address {
    text-align: center;
}

/* Address Actions Buttons */
html[dir="rtl"] .address-list-item .address-actions {
    flex-direction: row;
}

html[dir="ltr"] .address-list-item .address-actions {
    flex-direction: row;
}

/* Radio Button Alignment */
html[dir="rtl"] .address-list-item .address-radio {
    order: 0;
}

html[dir="ltr"] .address-list-item .address-radio {
    order: 0;
}

/* ========================================
   ADDRESS SECTION - TABLET RESPONSIVE
   (768px - 1024px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Address Section Title */
    .address-section-title {
        font-size: 16px !important;
        padding-bottom: 10px;
    }

    .address-section-title .material-symbols-outlined {
        font-size: 18px;
    }

    /* Selected Address Card */
    .address-selected-card {
        margin-bottom: 14px;
    }

    .address-selected-content {
        padding: 14px 16px;
        gap: 14px;
    }

    .address-icon-circle {
        width: 40px;
        height: 40px;
    }

    .address-icon-circle .material-symbols-outlined {
        font-size: 20px !important;
    }

    .address-selected-main {
        font-size: 13px !important;
    }

    .address-selected-secondary {
        font-size: 12px !important;
    }

    .address-change-btn,
    .shipping-change-btn {
        padding: 6px 14px;
        font-size: 12px;
    }

    /* Address List */
    .address-list-header {
        padding: 10px 16px;
    }

    .address-list-title {
        font-size: 13px !important;
    }

    .address-add-new-btn {
        padding: 5px 10px;
        font-size: 11px;
    }

    .address-add-new-btn .material-symbols-outlined {
        font-size: 14px;
    }

    .address-list-items {
        max-height: 250px;
    }

    .address-list-item {
        padding: 12px 16px;
        gap: 10px;
    }

    .address-list-item .address-main-text {
        font-size: 13px !important;
    }

    .address-list-item .address-secondary-text {
        font-size: 11px !important;
    }

    .address-list-item .address-badge {
        font-size: 9px;
        padding: 2px 5px;
    }

    .address-list-item .address-edit-btn,
    .address-list-item .address-delete-btn {
        width: 26px;
        height: 26px;
    }

    .address-list-item .address-edit-btn .material-symbols-outlined,
    .address-list-item .address-delete-btn .material-symbols-outlined {
        font-size: 15px;
    }

    /* No Address State */
    .address-no-address {
        padding: 28px 16px;
    }

    .address-no-address-icon {
        font-size: 36px;
        margin-bottom: 10px;
    }

    .address-no-address-text {
        font-size: 13px;
        margin-bottom: 14px;
    }

    .address-no-address-btn {
        padding: 8px 18px;
        font-size: 13px;
    }

    .address-no-address-btn .material-symbols-outlined {
        font-size: 16px;
    }
}

/* ========================================
   ADDRESS SECTION - MOBILE RESPONSIVE
   (< 768px)
   ======================================== */
@media (max-width: 767px) {
    /* Address Section Title */
    .address-section-title {
        font-size: 15px !important;
        padding-bottom: 10px;
        gap: 6px;
    }

    .address-section-title .material-symbols-outlined {
        font-size: 18px;
    }

    /* Selected Address Card */
    .address-selected-card {
        margin-bottom: 12px;
        border-radius: 8px;
    }

    .address-selected-content {
        padding: 14px 16px;
        gap: 12px;
        flex-wrap: wrap;
    }

    .address-icon-circle {
        width: 38px;
        height: 38px;
    }

    .address-icon-circle .material-symbols-outlined {
        font-size: 18px !important;
    }

    .address-selected-info {
        flex: 1;
        min-width: calc(100% - 130px);
    }

    .address-selected-main {
        font-size: 13px !important;
        line-height: 1.4;
    }

    .address-selected-secondary {
        font-size: 12px !important;
        line-height: 1.3;
    }

    .address-change-btn,
    .shipping-change-btn {
        padding: 6px 12px;
        font-size: 12px;
        border-radius: 6px;
    }

    /* Address List Container */
    .address-list-container {
        border-radius: 0 0 8px 8px;
    }

    /* Address List Header */
    .address-list-header {
        padding: 10px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .address-list-title {
        font-size: 13px !important;
    }

    .address-add-new-btn {
        padding: 5px 10px;
        font-size: 11px;
        gap: 4px;
    }

    .address-add-new-btn .material-symbols-outlined {
        font-size: 14px;
    }

    /* Address List Items */
    .address-list-items {
        max-height: 220px;
    }

    .address-list-item {
        padding: 12px 16px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .address-list-item .address-radio {
        flex-shrink: 0;
    }

    .address-list-item .address-info {
        flex: 1;
        min-width: 0;
    }

    .address-list-item .address-main-text {
        font-size: 13px !important;
        line-height: 1.3;
    }

    .address-list-item .address-secondary-text {
        font-size: 11px !important;
    }

    .address-list-item .address-national-code {
        font-size: 10px;
        gap: 3px;
    }

    .address-list-item .address-national-code .material-symbols-outlined {
        font-size: 12px;
    }

    .address-list-item .address-badge {
        font-size: 9px;
        padding: 2px 5px;
        margin-top: 3px;
    }

    .address-list-item .address-actions {
        gap: 2px;
        flex-shrink: 0;
    }

    .address-list-item .address-edit-btn,
    .address-list-item .address-delete-btn {
        width: 32px;
        height: 32px;
    }

    .address-list-item .address-edit-btn .material-symbols-outlined,
    .address-list-item .address-delete-btn .material-symbols-outlined {
        font-size: 16px;
    }

    /* No Address State */
    .address-no-address {
        padding: 24px 16px;
    }

    .address-no-address-icon {
        font-size: 32px;
        margin-bottom: 10px;
    }

    .address-no-address-text {
        font-size: 13px;
        margin-bottom: 12px;
    }

    .address-no-address-btn {
        padding: 10px 16px;
        font-size: 13px;
        gap: 6px;
        width: 100%;
        justify-content: center;
    }

    .address-no-address-btn .material-symbols-outlined {
        font-size: 16px;
    }

    /* Alert Messages */
    .address-alert {
        padding: 12px 16px;
        font-size: 12px;
    }
}

/* ========================================
   ADDRESS SECTION - SMALL MOBILE
   (< 480px)
   ======================================== */
@media (max-width: 479px) {
    /* Address Section Title */
    .address-section-title {
        font-size: 14px !important;
        padding-bottom: 8px;
    }

    .address-section-title .material-symbols-outlined {
        font-size: 16px;
    }

    /* Selected Address Content - Stack on very small screens */
    .address-selected-content {
        padding: 12px;
        gap: 10px;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .address-icon-circle {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .address-icon-circle .material-symbols-outlined {
        font-size: 16px !important;
    }

    .address-selected-info {
        flex: 1;
        min-width: 0;
    }

    .address-selected-main {
        font-size: 12px !important;
        line-height: 1.4;
        word-break: break-word;
    }

    .address-selected-secondary {
        font-size: 11px !important;
    }

    .address-change-btn,
    .shipping-change-btn {
        padding: 6px 10px;
        font-size: 11px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Address List Header */
    .address-list-header {
        padding: 10px 12px;
    }

    html[dir="rtl"] .address-list-header {
        flex-direction: row-reverse;
    }

    .address-list-title {
        font-size: 12px !important;
    }

    .address-add-new-btn {
        padding: 4px 8px;
        font-size: 10px;
    }

    .address-add-new-btn span:not(.material-symbols-outlined) {
        display: none;
    }

    .address-add-new-btn .material-symbols-outlined {
        font-size: 16px;
    }

    /* Address List Items */
    .address-list-items {
        max-height: 200px;
    }

    .address-list-item {
        padding: 10px 12px;
        gap: 8px;
    }

    .address-list-item .address-main-text {
        font-size: 12px !important;
        word-break: break-word;
    }

    .address-list-item .address-secondary-text {
        font-size: 10px !important;
    }

    .address-list-item .address-badge {
        font-size: 8px;
        padding: 1px 4px;
    }

    .address-list-item .address-actions {
        gap: 0;
    }

    .address-list-item .address-edit-btn,
    .address-list-item .address-delete-btn {
        width: 28px;
        height: 28px;
    }

    .address-list-item .address-edit-btn .material-symbols-outlined,
    .address-list-item .address-delete-btn .material-symbols-outlined {
        font-size: 14px;
    }

    /* No Address State */
    .address-no-address {
        padding: 20px 12px;
    }

    .address-no-address-icon {
        font-size: 28px;
    }

    .address-no-address-text {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .address-no-address-btn {
        padding: 8px 14px;
        font-size: 12px;
    }
}

/* ========================================
   CHECKOUT PAGE LAYOUT - RESPONSIVE
   ======================================== */

/* Large screens (> 1200px) */
@media (min-width: 1200px) {
    #addressPage.container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Tablet landscape and small desktop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .checkout-page-title {
        font-size: 26px !important;
        margin-bottom: 28px;
    }

    #addressPage.container {
        padding-left: 15px;
        padding-right: 15px;
    }

    #addressPage #existingAddress.col-md-8 {
        width: 60%;
    }

    #addressPage .col-md-4 {
        width: 40%;
    }
}

/* Tablet portrait (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .checkout-page-title {
        font-size: 26px !important;
        margin-bottom: 30px;
        margin-top: 15px;
        text-align: center !important;
    }

    #addressPage.container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Stack columns on tablet portrait */
    #addressPage > .row.equal {
        flex-direction: column;
    }

    #addressPage #existingAddress.col-md-8,
    #addressPage .col-md-4 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* Order Summary first on tablet */
    #addressPage .col-md-4 {
        order: 1;
        margin-bottom: 28px;
    }

    #addressPage #existingAddress.col-md-8 {
        order: 2;
    }

    #addressPage #existingAddress {
        margin-bottom: 24px;
    }

    /* Section titles - larger on tablet */
    .order-summary-title,
    .address-section-title,
    .shipping-section-title {
        font-size: 18px !important;
        padding-bottom: 14px;
        gap: 10px;
    }

    .order-summary-title .material-symbols-outlined,
    .address-section-title .material-symbols-outlined,
    .shipping-section-title .material-symbols-outlined {
        font-size: 22px !important;
    }

    /* Section spacing on tablet */
    .address-section-new,
    .shipping-method-section,
    .payment-section {
        margin-bottom: 14px;
    }

    .order-notes-toggle::before {
        left: 0;
        right: 0;
        bottom: 35px;
        top: unset;
    }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
    .checkout-page-title {
        font-size: 24px !important;
        margin-top: 8px;
        margin-bottom: 16px;
        line-height: 1.35;
        text-align: center !important;
    }

    /* Remove Bootstrap row negative margins on mobile checkout */
    #content > .row,
    #content .container > .row,
    #addressPage .row,
    #is-not-Safari.row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .apple-pay-notification {
        margin: 10px 0 !important;
        padding: 8px !important;
    }

    .apple-pay-notification p {
        margin: 10px 0 !important;
        font-size: 14px !important;
    }

    #addressPage.container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Stack columns on mobile */
    #addressPage > .row.equal {
        flex-direction: column;
        margin-left: -12px;
        margin-right: -12px;
    }

    #addressPage > .row.equal > [class*="col-"] {
        padding-left: 12px;
        padding-right: 12px;
    }

    #addressPage #existingAddress.col-md-8,
    #addressPage .col-md-4 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* Order Summary first on mobile */
    #addressPage .col-md-4 {
        order: 1;
        margin-bottom: 24px;
    }

    #addressPage #existingAddress.col-md-8 {
        order: 2;
    }

    #addressPage #existingAddress {
        margin-bottom: 20px;
    }

    /* Section titles - larger on mobile */
    .order-summary-title,
    .address-section-title,
    .shipping-section-title {
        font-size: 17px !important;
        padding-bottom: 12px;
        gap: 8px;
    }

    .order-summary-title .material-symbols-outlined,
    .address-section-title .material-symbols-outlined,
    .shipping-section-title .material-symbols-outlined {
        font-size: 20px !important;
    }

    /* Section spacing on mobile */
    .address-section-new,
    .shipping-method-section,
    .payment-section {
        margin-bottom: 12px;
    }

    /* Hide nav wizard on mobile */
    .nav-pills.nav-wizard {
        display: none !important;
    }
}

/* Small mobile (< 480px) */
@media (max-width: 479px) {
    .checkout-page-title {
        font-size: 20px !important;
        margin-top: 6px;
        margin-bottom: 12px;
        line-height: 1.35;
        text-align: center !important;
    }

    /* Remove Bootstrap row negative margins on small mobile checkout */
    #content > .row,
    #content .container > .row,
    #addressPage .row,
    #is-not-Safari.row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .apple-pay-notification {
        margin: 8px 0 !important;
        padding: 6px !important;
    }

    .apple-pay-notification p {
        margin: 8px 0 !important;
        font-size: 12px !important;
    }

    #addressPage.container {
        padding-left: 10px;
        padding-right: 10px;
    }

    #addressPage > .row.equal {
        margin-left: -10px;
        margin-right: -10px;
    }

    #addressPage > .row.equal > [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }

    #addressPage #existingAddress {
        margin-bottom: 16px;
    }

    #addressPage .col-md-4 {
        margin-bottom: 20px;
    }

    /* Section titles - on small mobile */
    .order-summary-title,
    .address-section-title,
    .shipping-section-title {
        font-size: 14px !important;
        padding-bottom: 10px;
        gap: 6px;
    }

    .order-summary-title .material-symbols-outlined,
    .address-section-title .material-symbols-outlined,
    .shipping-section-title .material-symbols-outlined {
        font-size: 18px !important;
    }

    /* Section spacing on small mobile */
    .address-section-new,
    .shipping-method-section,
    .payment-section {
        margin-bottom: 8px;
    }
}

/* ========================================
   ORDER SUMMARY - RESPONSIVE
   ======================================== */
@media (max-width: 991px) {
    /* Make order summary sticky on mobile/tablet */
    #addressPage .col-md-4 {
        position: relative;
    }

    .order-summary-card,
    .order-summary-totals-card {
        border-radius: 8px 8px 0 0;
    }
}

@media (max-width: 767px) {
    /* Coupon/Reward padding on mobile */
    .coupon-toggle,
    .reward-toggle {
        padding: 10px 16px;
    }

    .coupon-form,
    .reward-form {
        padding: 0 16px;
    }

    .coupon-input-row,
    .reward-input-row {
        gap: 8px;
        flex-direction: column;
    }

    .coupon-input-row .coupon-input,
    .reward-input-row .reward-input {
        padding: 8px 12px;
        font-size: 13px;
        height: 38px;
    }

    .coupon-input-row .coupon-apply-btn,
    .reward-input-row .reward-apply-btn {
        padding: 0 14px;
        font-size: 12px;
        height: 38px;
    }
}

@media (max-width: 479px) {
    .coupon-toggle,
    .reward-toggle {
        padding: 10px 12px;
    }

    .coupon-label,
    .reward-label {
        font-size: 13px !important;
        gap: 6px;
    }

    .coupon-label .material-symbols-outlined,
    .reward-label .material-symbols-outlined {
        font-size: 16px !important;
    }

    .coupon-form,
    .reward-form {
        padding: 0 12px;
    }

    /* Stack coupon/reward input and button vertically on small mobile */
    .coupon-input-row,
    .reward-input-row {
        flex-direction: column;
        gap: 8px;
    }

    .coupon-input-row .coupon-input,
    .reward-input-row .reward-input {
        width: 100%;
        padding: 10px 12px;
        font-size: 14px;
        height: 42px;
    }

    .coupon-input-row .coupon-apply-btn,
    .reward-input-row .reward-apply-btn {
        width: 100%;
        padding: 0 16px;
        font-size: 14px;
        height: 42px;
    }
}

/* ========================================
   SHIPPING METHOD - RESPONSIVE
   ======================================== */
@media (max-width: 767px) {

    .shipping-table table td {
        padding: 12px 14px;
    }

    .shipping-table table td label {
        font-size: 13px;
    }
}

@media (max-width: 479px) {
    .shipping-table table td {
        padding: 10px 12px;
    }

    .shipping-table table td label {
        font-size: 12px;
    }
}

/* ========================================
   PAYMENT SECTION - RESPONSIVE
   ======================================== */
@media (max-width: 767px) {
    .payment-card {
        margin-bottom: 12px;
    }

    .youpaytext {
        padding: 12px 14px;
        font-size: 13px;
    }

    .youpaytext .youpay {
        font-size: 14px;
    }

    #payment-accordion .panel-heading {
        padding: 12px 14px;
    }

    #payment-accordion .panel-title label {
        font-size: 13px;
    }

    #payment-accordion .panel-body {
        padding: 0 14px 14px;
    }
}

@media (max-width: 479px) {
    .youpaytext {
        padding: 10px 12px;
        font-size: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .youpaytext .youpay {
        font-size: 13px;
    }

    #payment-accordion .panel-heading {
        padding: 10px 12px;
    }

    #payment-accordion .panel-title label {
        font-size: 12px;
    }

    #payment-accordion .panel-body {
        padding: 0 12px 12px;
    }
}

/* ========================================
   CONTINUE BUTTON - RESPONSIVE
   ======================================== */
@media (max-width: 767px) {
    .progress.progress-continue .progress-bar,
    .progress.progress-continue-disabled .progress-bar {
        padding: 14px 20px;
        font-size: 15px;
        border-radius: 8px;
    }

    .agreeText {
        margin-bottom: 12px;
    }

    .agreeText label {
        font-size: 12px;
        line-height: 1.4;
    }
}

@media (max-width: 479px) {
    .progress.progress-continue .progress-bar,
    .progress.progress-continue-disabled .progress-bar {
        padding: 12px 16px;
        font-size: 14px;
    }

    .agreeText label {
        font-size: 11px;
    }

    .agreeText .input-checkbox {
        width: 16px;
        height: 16px;
        min-width: 16px;
    }
}

/* ========================================
   ADDRESS FORM MODAL (Map Disabled Mode)
   ======================================== */
/* When map is disabled, style the Bootstrap modal properly */
#addressModal:not(.map-modal-mode),
#addressModal_edit:not(.map-modal-mode) {
    background: rgba(0, 0, 0, 0.5);
    z-index: 10500;
}

#addressModal:not(.map-modal-mode) .modal-dialog,
#addressModal_edit:not(.map-modal-mode) .modal-dialog {
    max-width: 600px;
    margin: 30px auto;
    display: block !important;
}

#addressModal:not(.map-modal-mode) .modal-content,
#addressModal_edit:not(.map-modal-mode) .modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* Modal Header */
#addressModal:not(.map-modal-mode) .modal-header,
#addressModal_edit:not(.map-modal-mode) .modal-header {
    background: #fff;
    border-bottom: 1px solid #E5E7EB;
    padding: 16px 20px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

#addressModal:not(.map-modal-mode) .modal-header .modal-title,
#addressModal_edit:not(.map-modal-mode) .modal-header .modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

#addressModal:not(.map-modal-mode) .modal-header .close,
#addressModal_edit:not(.map-modal-mode) .modal-header .close {
    background: #f3f4f6;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #6B7280;
    opacity: 1;
    margin: 0;
    padding: 0;
    float: none;
    order: -1;
}

html[dir="rtl"] #addressModal:not(.map-modal-mode) .modal-header .close,
html[dir="rtl"] #addressModal_edit:not(.map-modal-mode) .modal-header .close {
    order: 1;
}

#addressModal:not(.map-modal-mode) .modal-header .close:hover,
#addressModal_edit:not(.map-modal-mode) .modal-header .close:hover {
    background: #e5e7eb;
    color: #374151;
}

/* Modal Body */
#addressModal:not(.map-modal-mode) .modal-body,
#addressModal_edit:not(.map-modal-mode) .modal-body {
    padding: 20px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    display: block !important;
}

/* Form Styling inside modal */
#addressModal:not(.map-modal-mode) fieldset,
#addressModal_edit:not(.map-modal-mode) fieldset {
    display: block !important;
}

#addressModal:not(.map-modal-mode) .form-group,
#addressModal_edit:not(.map-modal-mode) .form-group {
    margin-bottom: 16px;
}

#addressModal:not(.map-modal-mode) .form-group label,
#addressModal_edit:not(.map-modal-mode) .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

#addressModal:not(.map-modal-mode) .form-group .form-control,
#addressModal_edit:not(.map-modal-mode) .form-group .form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 14px;
    color: #111827;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#addressModal:not(.map-modal-mode) .form-group .form-control:focus,
#addressModal_edit:not(.map-modal-mode) .form-group .form-control:focus {
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.1);
    outline: none;
}

#addressModal:not(.map-modal-mode) .form-group select.form-control,
#addressModal_edit:not(.map-modal-mode) .form-group select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236B7280' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

html[dir="rtl"] #addressModal:not(.map-modal-mode) .form-group select.form-control,
html[dir="rtl"] #addressModal_edit:not(.map-modal-mode) .form-group select.form-control {
    background-position: left 12px center;
    padding-right: 14px;
    padding-left: 36px;
}

/* Required field indicator */
#addressModal:not(.map-modal-mode) .form-group label .required,
#addressModal_edit:not(.map-modal-mode) .form-group label .required {
    color: #dc2626;
    margin-left: 2px;
}

html[dir="rtl"] #addressModal:not(.map-modal-mode) .form-group label .required,
html[dir="rtl"] #addressModal_edit:not(.map-modal-mode) .form-group label .required {
    margin-left: 0;
    margin-right: 2px;
}

/* Error states */
#addressModal:not(.map-modal-mode) .form-group.has-error .form-control,
#addressModal_edit:not(.map-modal-mode) .form-group.has-error .form-control {
    border-color: #dc2626;
}

#addressModal:not(.map-modal-mode) .form-group .text-danger,
#addressModal_edit:not(.map-modal-mode) .form-group .text-danger {
    font-size: 12px;
    color: #dc2626;
    margin-top: 4px;
}

/* Help text */
#addressModal:not(.map-modal-mode) .form-group .help-block,
#addressModal_edit:not(.map-modal-mode) .form-group .help-block {
    font-size: 12px;
    color: #6B7280;
    margin-top: 4px;
}

/* Submit Button */
#addressModal:not(.map-modal-mode) .buttons,
#addressModal_edit:not(.map-modal-mode) .buttons {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #E5E7EB;
}

#addressModal:not(.map-modal-mode) .buttons .btn-success,
#addressModal_edit:not(.map-modal-mode) .buttons .btn-success,
#addressModal:not(.map-modal-mode) #addAdress,
#addressModal_edit:not(.map-modal-mode) #editAdress {
    width: 100%;
    padding: 12px 24px;
    background: #111827;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

/* When cancel button exists (group-half layout), adjust submit button */
#addressModal:not(.map-modal-mode) .group-half .buttons .btn-success,
#addressModal_edit:not(.map-modal-mode) .group-half .buttons .btn-success,
#addressModal:not(.map-modal-mode) .group-half #addAdress,
#addressModal_edit:not(.map-modal-mode) .group-half #editAdress {
    width: 100%;
}

#addressModal:not(.map-modal-mode) .buttons .btn-success:hover,
#addressModal_edit:not(.map-modal-mode) .buttons .btn-success:hover,
#addressModal:not(.map-modal-mode) #addAdress:hover,
#addressModal_edit:not(.map-modal-mode) #editAdress:hover {
    background: #374151;
}

/* Cancel/Close link */
#addressModal:not(.map-modal-mode) .buttons .btn-link,
#addressModal_edit:not(.map-modal-mode) .buttons .btn-link {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 12px;
    color: #6B7280;
    font-size: 14px;
    text-decoration: none;
}

#addressModal:not(.map-modal-mode) .buttons .btn-link:hover,
#addressModal_edit:not(.map-modal-mode) .buttons .btn-link:hover {
    color: #111827;
}

/* Two column layout for form fields on larger screens */
@media (min-width: 576px) {
    #addressModal:not(.map-modal-mode) .modal-body .row,
    #addressModal_edit:not(.map-modal-mode) .modal-body .row {
        display: flex;
        flex-wrap: wrap;
        margin-left: -8px;
        margin-right: -8px;
    }

    #addressModal:not(.map-modal-mode) .modal-body .row > [class*="col-"],
    #addressModal_edit:not(.map-modal-mode) .modal-body .row > [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Mobile responsive modal */
@media (max-width: 767px) {
    #addressModal:not(.map-modal-mode) .modal-dialog,
    #addressModal_edit:not(.map-modal-mode) .modal-dialog {
        margin: 8px;
        max-width: calc(100% - 16px);
    }

    #addressModal:not(.map-modal-mode) .modal-body,
    #addressModal_edit:not(.map-modal-mode) .modal-body {
        padding: 10px;
        max-height: calc(100vh - 120px);
    }

    #addressModal:not(.map-modal-mode) .modal-header,
    #addressModal_edit:not(.map-modal-mode) .modal-header {
        padding: 10px 12px;
    }

    #addressModal:not(.map-modal-mode) .modal-header .modal-title,
    #addressModal_edit:not(.map-modal-mode) .modal-header .modal-title {
        font-size: 15px;
    }

    #addressModal:not(.map-modal-mode) .form-group,
    #addressModal_edit:not(.map-modal-mode) .form-group {
        margin-bottom: 8px;
    }

    #addressModal:not(.map-modal-mode) .form-group .form-control,
    #addressModal_edit:not(.map-modal-mode) .form-group .form-control {
        padding: 8px 10px;
        font-size: 14px;
        height: 38px;
        border-radius: 6px;
    }

    /* Compact form group label */
    #addressModal:not(.map-modal-mode) .form-group label,
    #addressModal_edit:not(.map-modal-mode) .form-group label {
        font-size: 12px;
        margin-bottom: 3px;
    }

    /* Select dropdowns */
    #addressModal:not(.map-modal-mode) .form-group select.form-control,
    #addressModal_edit:not(.map-modal-mode) .form-group select.form-control {
        height: 38px;
        padding: 8px 10px;
        font-size: 14px;
    }

    /* Compact two-column layout on mobile */
    #addressModal:not(.map-modal-mode) .modal-body .row > .col-sm-6,
    #addressModal_edit:not(.map-modal-mode) .modal-body .row > .col-sm-6 {
        width: 50%;
        float: right;
        padding-left: 4px;
        padding-right: 4px;
    }

    /* RTL fix for two-column */
    html[dir="rtl"] #addressModal:not(.map-modal-mode) .modal-body .row > .col-sm-6,
    html[dir="rtl"] #addressModal_edit:not(.map-modal-mode) .modal-body .row > .col-sm-6 {
        float: right;
    }

    /* Row margins */
    #addressModal:not(.map-modal-mode) .modal-body .row,
    #addressModal_edit:not(.map-modal-mode) .modal-body .row {
        margin-left: -4px;
        margin-right: -4px;
    }

    /* Buttons container */
    #addressModal:not(.map-modal-mode) .buttons,
    #addressModal_edit:not(.map-modal-mode) .buttons,
    #addressModal:not(.map-modal-mode) fieldset,
    #addressModal_edit:not(.map-modal-mode) fieldset {
        margin-top: 10px;
    }

    /* Compact buttons */
    #addressModal:not(.map-modal-mode) .buttons .btn-success,
    #addressModal_edit:not(.map-modal-mode) .buttons .btn-success,
    #addressModal:not(.map-modal-mode) #addAdress,
    #addressModal_edit:not(.map-modal-mode) #editAdress {
        padding: 8px 12px !important;
        height: 38px !important;
        font-size: 13px !important;
    }

    #addressModal:not(.map-modal-mode) #cancelAddress,
    #addressModal_edit:not(.map-modal-mode) #cancelAddress {
        padding: 8px 12px !important;
        height: 38px !important;
        font-size: 13px !important;
    }

    /* Compact group-half buttons */
    #addressModal:not(.map-modal-mode) fieldset > .group-half,
    #addressModal_edit:not(.map-modal-mode) fieldset > .group-half {
        width: 48%;
    }
}

/* Extra compact mobile address form - 480px */
@media (max-width: 480px) {
    #addressModal:not(.map-modal-mode) .modal-dialog,
    #addressModal_edit:not(.map-modal-mode) .modal-dialog {
        margin: 5px;
        max-width: calc(100% - 10px);
    }

    #addressModal:not(.map-modal-mode) .modal-body,
    #addressModal_edit:not(.map-modal-mode) .modal-body {
        padding: 8px;
        max-height: calc(100vh - 100px);
    }

    #addressModal:not(.map-modal-mode) .modal-header,
    #addressModal_edit:not(.map-modal-mode) .modal-header {
        padding: 8px 10px;
    }

    #addressModal:not(.map-modal-mode) .modal-header .modal-title,
    #addressModal_edit:not(.map-modal-mode) .modal-header .modal-title {
        font-size: 14px;
    }

    #addressModal:not(.map-modal-mode) .form-group,
    #addressModal_edit:not(.map-modal-mode) .form-group {
        margin-bottom: 6px;
    }

    #addressModal:not(.map-modal-mode) .form-group label,
    #addressModal_edit:not(.map-modal-mode) .form-group label {
        font-size: 11px;
        margin-bottom: 2px;
    }

    #addressModal:not(.map-modal-mode) .form-group .form-control,
    #addressModal_edit:not(.map-modal-mode) .form-group .form-control {
        padding: 6px 8px;
        font-size: 13px;
        height: 34px;
        border-radius: 5px;
    }

    /* Select dropdowns */
    #addressModal:not(.map-modal-mode) .form-group select.form-control,
    #addressModal_edit:not(.map-modal-mode) .form-group select.form-control {
        height: 34px;
        padding: 6px 8px;
        font-size: 13px;
    }

    /* Two-column stays for name fields */
    #addressModal:not(.map-modal-mode) .modal-body .row > .col-sm-6,
    #addressModal_edit:not(.map-modal-mode) .modal-body .row > .col-sm-6 {
        padding-left: 3px;
        padding-right: 3px;
    }

    /* Row margins */
    #addressModal:not(.map-modal-mode) .modal-body .row,
    #addressModal_edit:not(.map-modal-mode) .modal-body .row {
        margin-left: -3px;
        margin-right: -3px;
    }

    /* Buttons container */
    #addressModal:not(.map-modal-mode) .buttons,
    #addressModal_edit:not(.map-modal-mode) .buttons,
    #addressModal:not(.map-modal-mode) fieldset,
    #addressModal_edit:not(.map-modal-mode) fieldset {
        margin-top: 8px;
    }

    /* Smaller buttons */
    #addressModal:not(.map-modal-mode) .buttons .btn-success,
    #addressModal_edit:not(.map-modal-mode) .buttons .btn-success,
    #addressModal:not(.map-modal-mode) #addAdress,
    #addressModal_edit:not(.map-modal-mode) #editAdress {
        padding: 6px 10px !important;
        height: 34px !important;
        font-size: 12px !important;
    }

    #addressModal:not(.map-modal-mode) #cancelAddress,
    #addressModal_edit:not(.map-modal-mode) #cancelAddress {
        padding: 6px 10px !important;
        height: 34px !important;
        font-size: 12px !important;
    }

    /* Checkbox options */
    #addressModal:not(.map-modal-mode) .checkbox_options label,
    #addressModal_edit:not(.map-modal-mode) .checkbox_options label {
        font-size: 11px;
        gap: 5px;
    }

    #addressModal:not(.map-modal-mode) .checkbox_options .input-checkbox,
    #addressModal_edit:not(.map-modal-mode) .checkbox_options .input-checkbox {
        width: 14px;
        height: 14px;
    }

    /* Alert styling */
    #addressModal:not(.map-modal-mode) .alert,
    #addressModal_edit:not(.map-modal-mode) .alert {
        padding: 8px 10px;
        margin-bottom: 8px;
        font-size: 11px;
    }
}

/* Cancel Button in Modal - ensure visibility */
#addressModal:not(.map-modal-mode) fieldset > .group-half,
#addressModal_edit:not(.map-modal-mode) fieldset > .group-half {
    display: inline-block;
    width: 48%;
    vertical-align: top;
    box-sizing: border-box;
}

/* Clearfix for button row */
#addressModal:not(.map-modal-mode) fieldset::after,
#addressModal_edit:not(.map-modal-mode) fieldset::after {
    content: "";
    display: table;
    clear: both;
}

#addressModal:not(.map-modal-mode) .group-half.group-left,
#addressModal_edit:not(.map-modal-mode) .group-half.group-left {
    float: right;
    padding-left: 6px;
}

#addressModal:not(.map-modal-mode) .group-half.group-right,
#addressModal_edit:not(.map-modal-mode) .group-half.group-right {
    float: left;
    padding-right: 6px;
}

html[dir="rtl"] #addressModal:not(.map-modal-mode) .group-half.group-left,
html[dir="rtl"] #addressModal_edit:not(.map-modal-mode) .group-half.group-left {
    float: left;
    padding-left: 0;
    padding-right: 6px;
}

html[dir="rtl"] #addressModal:not(.map-modal-mode) .group-half.group-right,
html[dir="rtl"] #addressModal_edit:not(.map-modal-mode) .group-half.group-right {
    float: right;
    padding-right: 0;
    padding-left: 6px;
}

#addressModal:not(.map-modal-mode) .progress.progress-continue-disabled,
#addressModal_edit:not(.map-modal-mode) .progress.progress-continue-disabled {
    background: transparent !important;
    box-shadow: none !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
}

#addressModal:not(.map-modal-mode) #cancelAddress,
#addressModal_edit:not(.map-modal-mode) #cancelAddress {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
    cursor: pointer !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 8px !important;
    height: 48px !important;
    width: 100% !important;
    border: 1px solid #d1d5db !important;
    transition: all 0.2s ease !important;
    float: none !important;
    line-height: 1 !important;
}

#addressModal:not(.map-modal-mode) #cancelAddress:hover,
#addressModal_edit:not(.map-modal-mode) #cancelAddress:hover {
    background: #e5e7eb !important;
}

/* Loader inside modal */
#addressModal:not(.map-modal-mode) .loader,
#addressModal_edit:not(.map-modal-mode) .loader {
    display: none;
}

/* Hide default checkbox styling, use custom */
#addressModal:not(.map-modal-mode) .checkbox_options,
#addressModal_edit:not(.map-modal-mode) .checkbox_options {
    margin-top: 8px;
}

#addressModal:not(.map-modal-mode) .checkbox_options label,
#addressModal_edit:not(.map-modal-mode) .checkbox_options label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
}

#addressModal:not(.map-modal-mode) .checkbox_options .input-checkbox,
#addressModal_edit:not(.map-modal-mode) .checkbox_options .input-checkbox {
    width: 18px;
    height: 18px;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    cursor: pointer;
}

/* Alert styling inside modal */
#addressModal:not(.map-modal-mode) .alert,
#addressModal_edit:not(.map-modal-mode) .alert {
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

#addressModal:not(.map-modal-mode) .alert-danger,
#addressModal_edit:not(.map-modal-mode) .alert-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* Modal open state - ensure proper display */
#addressModal:not(.map-modal-mode).in,
#addressModal_edit:not(.map-modal-mode).in {
    display: block !important;
}

/* Ensure modal is hidden when not open */
#addressModal:not(.map-modal-mode):not(.in),
#addressModal_edit:not(.map-modal-mode):not(.in) {
    display: none;
}

/* Modal backdrop */
.modal-backdrop + #addressModal:not(.map-modal-mode),
.modal-backdrop + #addressModal_edit:not(.map-modal-mode) {
    display: block !important;
}

/* Ensure body has proper class when modal is open */
body.modal-open {
    overflow: hidden;
}

/* Fix for modal appearing at bottom - ensure fixed positioning */
#addressModal:not(.map-modal-mode),
#addressModal_edit:not(.map-modal-mode) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Vertically center the modal dialog */
#addressModal:not(.map-modal-mode) .modal-dialog,
#addressModal_edit:not(.map-modal-mode) .modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 60px);
}

#addressModal:not(.map-modal-mode) .modal-content,
#addressModal_edit:not(.map-modal-mode) .modal-content {
    width: 100%;
    margin: auto;
}

/* ========================================
   INLINE ADDRESS FORM - CANCEL BUTTON
   ======================================== */
.inlineaddress .progress.progress-continue-disabled,
#editAddressFields .progress.progress-continue-disabled,
#addressfields .progress.progress-continue-disabled {
    background: transparent !important;
    box-shadow: none !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
}

#cancelAddress,
.inlineaddress #cancelAddress,
#editAddressFields #cancelAddress,
#addressfields #cancelAddress,
.inlineaddress .progress.progress-continue-disabled .progress-bar,
#editAddressFields .progress.progress-continue-disabled .progress-bar,
#addressfields .progress.progress-continue-disabled .progress-bar {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
    cursor: pointer !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 8px !important;
    height: 48px !important;
    width: 100% !important;
    border: 1px solid #d1d5db !important;
    transition: all 0.2s ease !important;
    float: none !important;
    line-height: 1 !important;
}

#cancelAddress span,
.inlineaddress #cancelAddress span,
#editAddressFields #cancelAddress span,
#addressfields #cancelAddress span,
.progress.progress-continue-disabled .progress-bar span {
    color: #1f2937 !important;
    font-weight: 600 !important;
}

#cancelAddress:hover,
.inlineaddress #cancelAddress:hover,
#editAddressFields #cancelAddress:hover,
#addressfields #cancelAddress:hover,
.inlineaddress .progress.progress-continue-disabled .progress-bar:hover,
#editAddressFields .progress.progress-continue-disabled .progress-bar:hover,
#addressfields .progress.progress-continue-disabled .progress-bar:hover {
    background: #e5e7eb !important;
    color: #1f2937 !important;
    border-color: #d1d5db !important;
}

#cancelAddress:hover span,
.progress.progress-continue-disabled .progress-bar:hover span {
    color: #1f2937 !important;
}

/* RTL Support for Cancel Button */
[dir="rtl"] .inlineaddress .group-half.group-right,
[dir="rtl"] #editAddressFields .group-half.group-right,
[dir="rtl"] #addressfields .group-half.group-right {
    text-align: left;
}

[dir="ltr"] .inlineaddress .group-half.group-right,
[dir="ltr"] #editAddressFields .group-half.group-right,
[dir="ltr"] #addressfields .group-half.group-right {
    text-align: right;
}

/* Specific fields - increase margin for label spacing */
#regular-field-country_id,
#regular-field-zone_id,
#regular-field-building_number,
#regular-field-city {
    margin-bottom: 34px !important;
}

/* ========================================
   INLINE ADDRESS FORM - MOBILE RESPONSIVE
   ======================================== */
@media (max-width: 767px) {
    .inlineaddress,
    #editAddressFields,
    #addressfields {
        padding: 8px !important;
    }

    /* Address title - compact */
    .address_title,
    #editAddressFields .address_title,
    #addressfields .address_title,
    .inlineaddress .address_title,
    #form_add_address .address_title {
        font-size: 16px !important;
        margin: 0 0 30px 0 !important;
        padding: 0 !important;
    }

    .inlineaddress .form-group,
    #editAddressFields .form-group,
    #addressfields .form-group {
        margin-bottom: 8px;
    }

    .inlineaddress .form-group label,
    #editAddressFields .form-group label,
    #addressfields .form-group label {
        font-size: 12px;
        margin-bottom: 3px;
        display: block;
    }

    .inlineaddress .form-group .form-control,
    #editAddressFields .form-group .form-control,
    #addressfields .form-group .form-control {
        padding: 8px 10px;
        font-size: 14px;
        height: 38px;
        border-radius: 6px;
    }

    .inlineaddress .form-group select.form-control,
    #editAddressFields .form-group select.form-control,
    #addressfields .form-group select.form-control {
        height: 38px;
        padding: 8px 10px;
        font-size: 14px;
    }

    /* Material input fields */
    .inlineaddress .group .inputMaterial,
    #editAddressFields .group .inputMaterial,
    #addressfields .group .inputMaterial {
        font-size: 14px !important;
        height: 38px !important;
        padding: 8px 10px !important;
    }

    /* Two-column name fields */
    .inlineaddress .row > .col-sm-6,
    #editAddressFields .row > .col-sm-6,
    #addressfields .row > .col-sm-6 {
        width: 50%;
        float: right;
        padding-left: 4px;
        padding-right: 4px;
    }

    html[dir="rtl"] .inlineaddress .row > .col-sm-6,
    html[dir="rtl"] #editAddressFields .row > .col-sm-6,
    html[dir="rtl"] #addressfields .row > .col-sm-6 {
        float: right;
    }

    /* Row margins */
    .inlineaddress .row,
    #editAddressFields .row,
    #addressfields .row {
        margin-left: -4px;
        margin-right: -4px;
        margin-bottom: 0;
    }

    /* Buttons container - fieldset with group-half */
    .inlineaddress .buttons,
    #editAddressFields .buttons,
    #addressfields .buttons,
    .inlineaddress fieldset,
    #editAddressFields fieldset,
    #addressfields fieldset,
    #address_fields_edit {
        margin-top: 8px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    /* Group-half button containers */
    .inlineaddress .group-half,
    #editAddressFields .group-half,
    #addressfields .group-half,
    #address_fields_edit .group-half {
        margin-bottom: 0 !important;
        padding: 2px !important;
    }

    /* Cancel button container - align with submit */
    .inlineaddress .progress.progress-continue-disabled,
    #editAddressFields .progress.progress-continue-disabled,
    #addressfields .progress.progress-continue-disabled {
        margin-top: 6px !important;
    }

    /* Compact buttons */
    .inlineaddress #cancelAddress,
    #editAddressFields #cancelAddress,
    #addressfields #cancelAddress,
    #address_fields_edit #cancelAddress {
        padding: 8px 12px !important;
        height: 36px !important;
        font-size: 14px !important;
        margin: 0 !important;
    }

    /* Cancel button span text */
    .inlineaddress #cancelAddress span,
    #editAddressFields #cancelAddress span,
    #addressfields #cancelAddress span,
    .progress.progress-continue-disabled .progress-bar span {
        font-size: 12px !important;
    }

    .inlineaddress .buttons .btn-success,
    #editAddressFields .buttons .btn-success,
    #addressfields .buttons .btn-success,
    .inlineaddress #addAdress,
    #editAddressFields #editAdress,
    #addressfields #addAdress,
    #address_fields_edit .btn-success,
    #address_fields_edit #editAdress {
        padding: 8px 12px !important;
        height: 36px !important;
        font-size: 13px !important;
        margin: 0 !important;
    }

    /* National address group - remove extra margin */
    #regular-field-national_short_address {
        margin-bottom: 8px !important;
    }

    /* National address field compact */
    .inlineaddress .national-address-field,
    #editAddressFields .national-address-field,
    #addressfields .national-address-field {
        padding: 10px !important;
        margin-top: 8px;
    }

    .inlineaddress .national-address-field label,
    #editAddressFields .national-address-field label,
    #addressfields .national-address-field label {
        font-size: 12px !important;
    }

    .inlineaddress .national-address-field .help-text,
    #editAddressFields .national-address-field .help-text,
    #addressfields .national-address-field .help-text {
        font-size: 11px !important;
        margin-top: 4px;
    }
}

/* Extra compact inline address - 480px */
@media (max-width: 480px) {
    .inlineaddress,
    #editAddressFields,
    #addressfields {
        padding: 6px !important;
    }

    /* Address title - extra compact */
    .address_title,
    #editAddressFields .address_title,
    #addressfields .address_title,
    .inlineaddress .address_title,
    #form_add_address .address_title {
        font-size: 14px !important;
        margin: 0 0 30px 0 !important;
    }

    .inlineaddress .form-group,
    #editAddressFields .form-group,
    #addressfields .form-group {
        margin-bottom: 6px;
    }

    .inlineaddress .form-group label,
    #editAddressFields .form-group label,
    #addressfields .form-group label {
        font-size: 11px;
        margin-bottom: 2px;
    }

    .inlineaddress .form-group .form-control,
    #editAddressFields .form-group .form-control,
    #addressfields .form-group .form-control {
        padding: 6px 8px;
        font-size: 13px;
        height: 34px;
        border-radius: 5px;
    }

    .inlineaddress .form-group select.form-control,
    #editAddressFields .form-group select.form-control,
    #addressfields .form-group select.form-control {
        height: 34px;
        padding: 6px 8px;
        font-size: 13px;
    }

    /* Material input fields - extra compact */
    .inlineaddress .group .inputMaterial,
    #editAddressFields .group .inputMaterial,
    #addressfields .group .inputMaterial {
        font-size: 13px !important;
        height: 34px !important;
        padding: 6px 8px !important;
    }

    /* Two-column name fields - tighter */
    .inlineaddress .row > .col-sm-6,
    #editAddressFields .row > .col-sm-6,
    #addressfields .row > .col-sm-6 {
        padding-left: 3px;
        padding-right: 3px;
    }

    /* Row margins */
    .inlineaddress .row,
    #editAddressFields .row,
    #addressfields .row {
        margin-left: -3px;
        margin-right: -3px;
    }

    /* Buttons container - extra compact */
    .inlineaddress .buttons,
    #editAddressFields .buttons,
    #addressfields .buttons,
    .inlineaddress fieldset,
    #editAddressFields fieldset,
    #addressfields fieldset,
    #address_fields_edit {
        margin-top: 6px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    /* Group-half button containers */
    .inlineaddress .group-half,
    #editAddressFields .group-half,
    #addressfields .group-half,
    #address_fields_edit .group-half {
        margin-bottom: 0 !important;
        padding: 2px !important;
    }

    /* Cancel button container - align with submit */
    .inlineaddress .progress.progress-continue-disabled,
    #editAddressFields .progress.progress-continue-disabled,
    #addressfields .progress.progress-continue-disabled {
        margin-top: 6px !important;
    }

    /* Smaller buttons */
    .inlineaddress #cancelAddress,
    #editAddressFields #cancelAddress,
    #addressfields #cancelAddress,
    #address_fields_edit #cancelAddress {
        padding: 6px 10px !important;
        height: 32px !important;
        font-size: 12px !important;
        margin: 0 !important;
    }

    .inlineaddress .buttons .btn-success,
    #editAddressFields .buttons .btn-success,
    #addressfields .buttons .btn-success,
    .inlineaddress #addAdress,
    #editAddressFields #editAdress,
    #addressfields #addAdress,
    #address_fields_edit .btn-success,
    #address_fields_edit #editAdress {
        padding: 6px 10px !important;
        height: 32px !important;
        font-size: 12px !important;
        margin: 0 !important;
    }

    /* Group half buttons */
    .inlineaddress fieldset > .group-half,
    #editAddressFields fieldset > .group-half,
    #addressfields fieldset > .group-half,
    #address_fields_edit > .group-half {
        width: 50%;
    }

    /* National address group - remove extra margin */
    #regular-field-national_short_address {
        margin-bottom: 6px !important;
    }

    /* National address field extra compact */
    .inlineaddress .national-address-field,
    #editAddressFields .national-address-field,
    #addressfields .national-address-field {
        padding: 8px !important;
        margin-top: 6px;
    }

    .inlineaddress .national-address-field label,
    #editAddressFields .national-address-field label,
    #addressfields .national-address-field label {
        font-size: 11px !important;
    }

    .inlineaddress .national-address-field .help-text,
    #editAddressFields .national-address-field .help-text,
    #addressfields .national-address-field .help-text {
        font-size: 10px !important;
        margin-top: 3px;
    }
}

/* ========================================
   SHIPPING METHODS - SELECTED DISPLAY
   ======================================== */
/* Wrapper for selected shipping card */
.shipping-selected-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
}

/* Selected card - remove cursor pointer since it's display only */
/* Override .shipping-method-card.selected border to use light border like addresses */
.shipping-method-card.shipping-selected-card,
.shipping-method-card.shipping-selected-card.selected {
    cursor: default;
    border: 1px solid #E5E7EB !important;
}

.shipping-method-card.shipping-selected-card:hover,
.shipping-method-card.shipping-selected-card.selected:hover {
    border-color: #E5E7EB !important;
}

/* When list is open, adjust border-radius and remove bottom border for seamless connection */
.shipping-method-card.shipping-selected-card.list-open {
    border-radius: 12px 12px 0 0;
    border-bottom: none !important;
}

/* Change button - inside the card where price would be */
.shipping-change-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #111111;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    flex-shrink: 0;
}

.shipping-change-btn:hover {
    background: #f5f5f5;
    border-color: #ccc;
    text-decoration: none;
    color: #111111;
}

/* Shipping Change Button - Responsive (must come after base styles) */
@media (max-width: 991px) {
    .shipping-change-btn {
        padding: 6px 14px;
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .shipping-change-btn {
        padding: 6px 12px;
        font-size: 12px;
        border-radius: 6px;
    }
}

/* Shipping List Container - Hidden by default when there's a selection */
.shipping-list-container {
    display: none;
    margin-top: -2px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-top: none;
    border-radius: 0 0 12px 12px;
    padding: 0;
}

.shipping-list-container.show {
    display: block;
}

/* Custom scrollbar for shipping list */
.shipping-list-container::-webkit-scrollbar {
    width: 6px;
}

.shipping-list-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.shipping-list-container::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.shipping-list-container::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

.shipping-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    padding: 16px 25px;
    background: #fff;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 10px;
    margin-top: 2px;
}


.shipping-list-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #111827 !important;
}

/* Inline badge for selected card - beside the name */
.shipping-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.shipping-inline-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: #ECFDF5;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    color: #059669;
}

.shipping-inline-badge .material-symbols-outlined {
    font-size: 14px !important;
    color: #059669 !important;
}

/* Shipping Method Error Display */
.shipping-method-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    margin-top: 12px;
}

.shipping-method-error .material-symbols-outlined {
    font-size: 20px !important;
    color: #DC2626 !important;
    flex-shrink: 0;
}

.shipping-method-error span:not(.material-symbols-outlined) {
    font-size: 13px;
    color: #991B1B;
    line-height: 1.4;
}

/* ========================================
   SHIPPING METHODS - REDESIGN
   ======================================== */
.shipping-methods-redesign {
    display: block;
    gap: 12px;
    padding: 5px 16px;
    overflow-y: auto;
    max-height: 250px;
}

.shipping-method-card {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 12px;
    border: 2px solid #E5E7EB;
    background-color: #fff;
    padding: 12px 15px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
    overflow: hidden;
}

.shipping-method-card.shipping-selected-card.list-open {
    margin-bottom: 0;
}

.shipping-method-card:hover {
    border-color: #D1D5DB;
}

.shipping-method-card.selected {
    border-color: #111111;
    background-color: #fff;
}

.shipping-method-radio {
    width: 20px;
    height: 20px;
    border: 2px solid #D1D5DB;
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s ease;
}

.shipping-method-radio:checked {
    border-color: #111111;
    background-color: #111111;
}

.shipping-method-radio:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
}

.shipping-method-content {
    display: flex;
    align-items: center;
    flex: 1;
    margin-right: 10px;
    gap: 16px;
}

[dir="ltr"] .shipping-method-content {
    margin-right: 0;
    margin-left: 10px;
}

.shipping-method-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #ffffff;
    flex-shrink: 0;
    border: #D1D5DB solid 1px;
}

.shipping-method-icon:has(img) {
    border: none !important;
    width: unset;
    height: unset;
}


.shipping-method-icon img {
    width: 70px;
    height: 45px;
    object-fit: contain;
}

.shipping-method-icon .material-symbols-outlined {
    font-size: 24px;
    color: #6B7280;
}

.shipping-method-card.selected .shipping-method-icon .material-symbols-outlined {
    color: #111111;
}

.shipping-method-details {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.shipping-method-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shipping-method-name {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
}

.shipping-method-price {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    flex-shrink: 0;
}

.shipping-method-info {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #6B7280;
}

.shipping-method-info .material-symbols-outlined {
    font-size: 16px;
}

.shipping-method-badge {
    position: absolute;
    top: -2px;
    left: -2px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    z-index: 1;
}

[dir="ltr"] .shipping-method-badge {
    left: auto;
    right: -2px;
    border-top-left-radius: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 10px;
}

.shipping-method-badge .material-symbols-outlined {
    font-size: 14px;
}

.shipping-badge-savings {
    background-color: #DCFCE7;
    color: #166534;
}

.shipping-badge-fastest {
    background-color: #DBEAFE;
    color: #1E40AF;
}

.shipping-method-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-radius: 12px;
    background-color: #FEF2F2;
    color: #991B1B;
    font-size: 14px;
}

.shipping-method-error .material-symbols-outlined {
    font-size: 20px;
    color: #DC2626;
}

/* Change button icon - hidden by default on desktop */
.shipping-change-btn .btn-icon,
.address-change-btn .btn-icon {
    display: none;
}

/* Mobile: Convert change buttons to icon-only circular buttons */
@media (max-width: 480px) {
    .shipping-change-btn,
    .address-change-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        padding: 0;
        border-radius: 50%;
    }

    .shipping-change-btn .btn-text,
    .address-change-btn .btn-text {
        display: none;
    }

    .shipping-change-btn .btn-icon,
    .address-change-btn .btn-icon {
        display: flex;
        font-size: 16px;
    }

    /* Shipping Selected Card - Mobile */
    .shipping-method-card.shipping-selected-card {
        padding: 10px 12px;
    }

    .shipping-method-card.shipping-selected-card .shipping-method-content {
        gap: 10px;
    }

    .shipping-method-card.shipping-selected-card .shipping-method-icon {
        width: 36px;
        height: 36px;
    }

    .shipping-method-card.shipping-selected-card .shipping-method-icon .material-symbols-outlined {
        font-size: 18px;
    }

    .shipping-method-card.shipping-selected-card .shipping-method-icon img {
        width: 50px;
        height: 32px;
    }

    .shipping-method-card.shipping-selected-card .shipping-method-details {
        align-items: center;
        gap: 8px;
    }

    .shipping-method-card.shipping-selected-card .shipping-method-text {
        gap: 2px;
    }

    .shipping-method-card.shipping-selected-card .shipping-name-row {
        flex-wrap: nowrap;
    }

    .shipping-method-card.shipping-selected-card .shipping-method-name {
        font-size: 13px;
        line-height: 1.3;
    }

    .shipping-method-card.shipping-selected-card .shipping-method-info {
        font-size: 11px;
        align-items: flex-start;
        line-height: 1.4;
    }

    .shipping-method-card.shipping-selected-card .shipping-method-info .material-symbols-outlined {
        flex-shrink: 0;
        font-size: 13px;
        margin-top: 1px;
    }

    /* Shipping Inline Badge - Mobile */
    .shipping-inline-badge {
        padding: 2px 5px;
        font-size: 9px;
        gap: 2px;
        flex-shrink: 0;
    }

    .shipping-inline-badge .material-symbols-outlined {
        font-size: 12px !important;
    }

    /* Shipping List Container - Mobile */
    .shipping-list-container {
        border-radius: 0 0 10px 10px;
    }

    .shipping-list-header {
        padding: 10px 12px;
        margin-bottom: 6px;
    }

    .shipping-list-title {
        font-size: 13px !important;
    }

    /* Shipping Methods List - Mobile */
    .shipping-methods-redesign {
        padding: 4px 10px 10px;
        max-height: 200px;
    }

    .shipping-methods-redesign .shipping-method-card {
        padding: 10px;
        margin-bottom: 8px;
        border-radius: 10px;
    }

    .shipping-methods-redesign .shipping-method-content {
        gap: 10px;
    }

    .shipping-methods-redesign .shipping-method-icon {
        width: 36px;
        height: 36px;
    }

    .shipping-methods-redesign .shipping-method-icon .material-symbols-outlined {
        font-size: 18px;
    }

    .shipping-methods-redesign .shipping-method-icon img {
        width: 50px;
        height: 32px;
    }

    .shipping-methods-redesign .shipping-method-details {
        align-items: center;
        gap: 8px;
    }

    .shipping-methods-redesign .shipping-method-text {
        gap: 2px;
    }

    .shipping-methods-redesign .shipping-method-name {
        font-size: 13px;
        line-height: 1.3;
    }

    .shipping-methods-redesign .shipping-method-price {
        font-size: 13px;
        flex-shrink: 0;
    }

    .shipping-methods-redesign .shipping-method-info {
        font-size: 11px;
        gap: 3px;
        align-items: flex-start;
        line-height: 1.4;
    }

    .shipping-methods-redesign .shipping-method-info .material-symbols-outlined {
        font-size: 13px;
        flex-shrink: 0;
        margin-top: 1px;
    }

    .shipping-methods-redesign .shipping-method-radio {
        width: 16px;
        height: 16px;
    }

    .shipping-methods-redesign .shipping-method-radio:checked::after {
        width: 6px;
        height: 6px;
    }

    .shipping-methods-redesign .shipping-method-badge {
        padding: 2px 6px;
        font-size: 9px;
    }

    .shipping-methods-redesign .shipping-method-badge .material-symbols-outlined {
        font-size: 11px;
    }

    /* Reduce section spacing on mobile */
    .checkout-step {
        margin-bottom: 16px !important;
    }

    .checkout-step.shipping-step {
        margin-top: 12px !important;
        margin-bottom: 16px !important;
    }

    .checkout-step.payment-step {
        margin-bottom: 0 !important;
    }

    .checkout-section-title {
        font-size: 14px;
        margin-bottom: 10px;
        gap: 6px;
    }

    .checkout-section-title .material-symbols-outlined {
        font-size: 18px;
    }
}

/* ========================================
   PAYMENT METHODS - REDESIGN
   ======================================== */
.payment-methods-redesign {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-method-header {
    display: flex;
    align-items: center;
    padding: 16px;
    cursor: pointer;
}

.payment-method-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.payment-method-name {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
}

.payment-method-info {
    font-size: 12px;
    color: #6B7280;
    margin-top: 2px;
}

.payment-method-info.fee {
    color: #EA580C;
    font-weight: 600;
}

/* Payment Method Form */
.payment-method-form {
    display: none;
    padding: 0 16px 16px;
    border-top: 1px solid #F3F4F6;
    margin-top: -1px;
    background-color: #FAFAFA;
}

.payment-method-card.selected .payment-method-form.has-form {
    display: block;
    animation: fadeIn 0.2s ease-out forwards;
}

.payment-method-form-inner {
    padding-top: 16px;
}

/* ========================================
   CHECKOUT BUTTON - REDESIGN
   ======================================== */
.checkout-final-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: #111111;
    color: #fff;
    padding: 16px 24px;
    border-radius: 12px;
    border: none;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 24px;
}

.checkout-final-button:hover {
    background-color: #333333;
    transform: scale(1.01);
}

.checkout-final-button:active {
    transform: scale(0.99);
}

.checkout-final-button .material-symbols-outlined {
    font-size: 22px;
}

.checkout-final-button .divider {
    width: 1px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.2);
}

.checkout-final-button .total-price {
    font-weight: 600;
}

.checkout-final-button .total-price svg,
.checkout-final-button .total-price .riyal-svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* ========================================
   CHECKOUT STEPS - SPACING & LAYOUT
   ======================================== */
.checkout-step {
    margin-bottom: 32px !important;
    padding-bottom: 0;
}

.checkout-step.shipping-step {
    margin-top: 24px !important;
    margin-bottom: 32px !important;
}

.checkout-step.payment-step {
    margin-bottom: 0 !important;
}

.checkout-step-content {
    background: transparent;
}

/* ========================================
   SECTION TITLES - REDESIGN
   ======================================== */
.checkout-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 16px;
}

.checkout-section-title .material-symbols-outlined {
    font-size: 22px;
    color: #111111;
}

/* ========================================
   HIDE CONTINUE BUTTON (Single Page Checkout)
   ======================================== */
.progress-continue,
#progress-continue-disabled,
#agree-panel {
    display: none !important;
}

/* ========================================
   SHIPPING SECTION CONTAINER
   ======================================== */
#shipping_method,
#shipping_method.checkout-step-content,
.checkout-step-content {
    margin-top: 0;
    background: transparent !important;
}

#shipping_method .panel-heading,
#shipping_method .heading {
    display: none;
}

#shipping_method .shipping-table {
    padding: 0;
    margin: 0;
    background: transparent;
}

.shipping-methods-redesign {
    background: transparent;
}

/* Hide old table styles */
#shipping_method .shipping-table .table {
    display: none;
}

/* ========================================
   PAYMENT SECTION CONTAINER
   ======================================== */
#paymentSectionNew,
.payment-section-new {
    margin-top: 0;
}

#paymentMethodsContainer {
    min-height: 50px;
}

/* Hide step_payment_panel as we embed payment in address panel */
#step_payment_panel {
    display: none !important;
}

#paymentPage .payment-card #payment-accordion {
    margin: 0 !important;
    padding: 0 !important;
}
/* ========================================
   PAYMENT METHODS - REDESIGN (Card Layout)
   Matches shipping-method-card exactly
   ======================================== */
/* Hide unnecessary wrapper elements and duplicate titles */
#paymentMethodsContainer .youpaytext,
#paymentMethodsContainer .nav-wizard,
#paymentMethodsContainer .col-md-4,
#paymentMethodsContainer .sidepanel,
#paymentMethodsContainer .panel-default:not(#payment-accordion .panel):not(#paymentMethodTabContent .panel),
#paymentMethodsContainer > .container > .row > .col-md-8 > .payment-card > .row.youpaytext,
#paymentMethodsContainer .row.youpaytext {
    display: none !important;
}

/* Reset container styles - make them transparent wrappers */
#paymentMethodsContainer .container,
#paymentMethodsContainer .row:not(.youpaytext),
#paymentMethodsContainer .col-md-8,
#paymentMethodsContainer #paymentPage {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

/* Hide payment title row (duplicate) */
#paymentMethodsContainer .row.youpaytext {
    display: none !important;
}

#paymentMethodsContainer .payment-card {
    display: block !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Payment methods container - flex column with gap */
.payment-methods-redesign,
#paymentMethodsContainer #payment-accordion {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
}

/* ========================================
   PAYMENT METHOD CARD - Matches Shipping Card
   ======================================== */
.payment-method-card {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    cursor: pointer;
    border-radius: 12px;
    border: 2px solid #E5E7EB;
    background-color: #fff;
    padding: 12px 16px;
    transition: all 0.2s ease;
    overflow: visible;
}

.payment-method-card:hover {
    border-color: #D1D5DB;
}

.payment-method-card.selected {
    border-color: #111111;
    background-color: #fff;
}

/* Payment card content - main clickable area */
.payment-method-content {
    display: flex;
    align-items: center;
    flex: 1;
    margin-right: 12px;
    gap: 12px;
}

[dir="ltr"] .payment-method-content {
    margin-right: 0;
    margin-left: 12px;
}

/* Payment logos container - far from radio (right side in RTL) */
.payment-method-logos {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    order: 1; /* Move to far right in RTL (away from radio) */
    margin-left: auto; /* Push to far edge in RTL */
}

[dir="ltr"] .payment-method-logos {
    margin-left: 0;
    margin-right: auto; /* Push to far edge in LTR */
}

.payment-method-logos img {
    height: 24px;
    max-width: 80px;
    object-fit: contain;
}

/* Payment/Shipping icon - near radio (left side in RTL) */
.payment-method-icon,
.shipping-method-icon {
    order: -1; /* Move icon near radio in RTL */
}

/* Radio input - positioned same side as content (flex flow) */
.payment-method-radio {
    width: 20px;
    height: 20px;
    border: 2px solid #D1D5DB;
    border-radius: 50%;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s ease;
}

.payment-method-radio:checked {
    border-color: #111111;
    background-color: #111111;
}

.payment-method-radio:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
}

/* Payment icon - square background, near radio */
.payment-method-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background-color: #F3F4F6;
    flex-shrink: 0;
}

.payment-method-card.selected .payment-method-icon {
    background-color: rgba(17, 17, 17, 0.08);
}

.payment-method-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.payment-method-icon .material-symbols-outlined {
    font-size: 20px;
    color: #6B7280;
}

.payment-method-card.selected .payment-method-icon .material-symbols-outlined {
    color: #111111;
}

/* Tabby icon - green */
.payment-method-icon.icon-tabby {
    background-color: rgba(58, 181, 133, 0.12);
}

.payment-method-icon.icon-tabby .material-symbols-outlined {
    color: #3AB585;
}

.payment-method-card.selected .payment-method-icon.icon-tabby {
    background-color: rgba(58, 181, 133, 0.18);
}

/* Tamara icon - green/teal */
.payment-method-icon.icon-tamara {
    background-color: rgba(0, 150, 136, 0.12);
}

.payment-method-icon.icon-tamara .material-symbols-outlined {
    color: #009688;
}

.payment-method-card.selected .payment-method-icon.icon-tamara {
    background-color: rgba(0, 150, 136, 0.18);
}

/* Payment details - name only (no price like shipping) */
.payment-method-details {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.payment-method-name {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
}

/* Payment method body - shown when has form */
.payment-method-body {
    width: 100%;
    flex-basis: 100%;
    margin: 5px 0 0 0;
    padding: 0;
    background-color: #fff;
}

.payment-body-content {
    position: relative;
    overflow: visible;
    background-color: #fff;
    text-align: center;
}

.payment-body-content:empty {
    display: none;
}

/* Payment methods container loader (Font Awesome) */
#paymentMethodsContainer > .text-center .fa-spinner,
#paymentMethodsContainer .fa-spinner {
    font-size: 32px;
    color: #111111;
}

#paymentMethodsContainer > .text-center {
    padding: 40px 20px !important;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Fix payment form containers to be full width */
.payment-body-content .buttons {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
}

.payment-body-content .buttons .pull-right,
.payment-body-content .buttons .pull-left,
.payment-body-content .pull-right,
.payment-body-content .pull-left {
    float: none !important;
    width: 100% !important;
}

.payment-body-content .buttons::after {
    display: none !important;
}

/* Style confirm button in payment body */
.payment-body-content #button-confirm,
.payment-body-content .btn-confirm,
.payment-body-content [id*="button-confirm"],
.payment-body-content button[type="submit"],
.payment-body-content input[type="submit"] {
    display: block !important;
    width: 100% !important;
    padding: 14px 24px !important;
    margin-top: 15px !important;
    background: #111111 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    float: none !important;
    text-align: center !important;
}

.payment-body-content #button-confirm:hover,
.payment-body-content .btn-confirm:hover,
.payment-body-content [id*="button-confirm"]:hover,
.payment-body-content button[type="submit"]:hover,
.payment-body-content input[type="submit"]:hover {
    background: #333333 !important;
}

/* Payment card - match shipping card exactly */
#paymentMethodsContainer #payment-accordion .panel {
    border: 2px solid #E5E7EB !important;
    border-radius: 12px !important;
    margin: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden;
    transition: all 0.2s ease;
}

#paymentMethodsContainer #payment-accordion .panel:hover {
    border-color: #D1D5DB !important;
}

#paymentMethodsContainer #payment-accordion .panel:has(.panel-collapse.in),
#paymentMethodsContainer #payment-accordion .panel:has(.in) {
    border-color: #111111 !important;
}

/* Panel heading - same layout as shipping card */
#paymentMethodsContainer #payment-accordion .panel-heading {
    padding: 16px !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer;
    gap: 12px;
    flex-direction: row-reverse;
}

/* Radio button - on far right (matches shipping) */
#paymentMethodsContainer #payment-accordion .panel-heading::after {
    content: '';
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid #D1D5DB;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.2s ease;
    background: #fff;
}

#paymentMethodsContainer #payment-accordion .panel:has(.panel-collapse.in) .panel-heading::after,
#paymentMethodsContainer #payment-accordion .panel:has(.in) .panel-heading::after {
    border-color: #111111;
    background-color: #111111;
    box-shadow: inset 0 0 0 4px #fff;
}

/* Remove ::before */
#paymentMethodsContainer #payment-accordion .panel-heading::before {
    display: none !important;
}

/* Default payment icon - shown when no image */
#paymentMethodsContainer #payment-accordion .panel-heading h4::before {
    content: 'credit_card';
    font-family: 'Material Symbols Outlined';
    font-size: 24px;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: #F3F4F6;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Hide default icon when payment has image */
#paymentMethodsContainer #payment-accordion .panel-heading:has(.payment_images img) h4::before {
    display: none;
}

#paymentMethodsContainer #payment-accordion .panel-heading h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

#paymentMethodsContainer #payment-accordion .panel-heading h4 a,
#paymentMethodsContainer #payment-accordion .panel-heading h4 a.heading-panel {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    flex: 1;
}

#paymentMethodsContainer #payment-accordion .panel-heading h4 label {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
    margin: 0;
    cursor: pointer;
}

/* Payment method image - positioned like shipping icon */
#paymentMethodsContainer #payment-accordion .payment_images {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: #F3F4F6;
    border-radius: 8px;
    flex-shrink: 0;
    order: -1;
}

#paymentMethodsContainer #payment-accordion .payment_images img {
    height: 28px;
    width: auto;
    max-width: 36px;
    object-fit: contain;
}

/* Remove any pseudo elements from anchor */
#paymentMethodsContainer #payment-accordion .panel-heading h4 a::before,
#paymentMethodsContainer #payment-accordion .panel-heading h4 a::after {
    display: none !important;
}

/* Panel body - payment form */
#paymentMethodsContainer #payment-accordion .panel-collapse {
    border-top: 1px solid #F3F4F6;
}

#paymentMethodsContainer #payment-accordion .panel-body {
    padding: 16px !important;
    background-color: #FAFAFA;
}

/* Confirm button in payment form */
#paymentMethodsContainer #payment-accordion .panel-body #button-confirm,
#paymentMethodsContainer #payment-accordion .panel-body .btn-confirm,
#paymentMethodsContainer #payment-accordion .panel-body [id*="button-confirm"] {
    width: 100%;
    background-color: #111111;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 16px;
}

#paymentMethodsContainer #payment-accordion .panel-body #button-confirm:hover,
#paymentMethodsContainer #payment-accordion .panel-body .btn-confirm:hover,
#paymentMethodsContainer #payment-accordion .panel-body [id*="button-confirm"]:hover {
    background-color: #333333;
}

/* Show the confirm button for each payment method */
#paymentMethodsContainer #payment-accordion .panel-body #button-confirm,
#paymentMethodsContainer #payment-accordion .panel-body .btn-confirm {
    display: block !important;
}

/* ========================================
   PAYMENT METHODS GRID LAYOUT - REDESIGN
   Horizontal flex-wrap layout with logos
   ======================================== */

/* Payment Methods Grid - Flex wrap layout */
.payment-methods-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Payment Grid Item - Horizontal card */
.payment-grid-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 14px;
    background-color: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
    min-height: 50px;
    flex: 0 1 auto;
    gap: 10px;
}

.payment-grid-item:hover {
    border-color: #D1D5DB;
    background-color: #FAFAFA;
}

.payment-grid-item.selected {
    border-color: #111111;
    background-color: #fff;
}

/* Hide actual radio button */
.payment-grid-item .payment-method-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Custom Radio Button - At START of card (same style as shipping/address radios) */
.payment-grid-radio {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid #D1D5DB;
    border-radius: 50%;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
    background: #fff;
}

.payment-grid-item.selected .payment-grid-radio {
    border-color: #111111;
    background-color: #111111;
}

.payment-grid-item.selected .payment-grid-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
}

/* Grid Item Content - Logo and text */
.payment-grid-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

/* Payment Grid Image - Logo (single logo) */
.payment-grid-img {
    height: 28px;
    max-width: 80px;
    object-fit: contain;
}

/* Multi-logo payment (tap2, myfatoorah, moyasar - full_payments image) */
.payment-grid-item.multi-logo .payment-grid-img {
    height: auto;
    width: 100%;
    max-width: none;
    max-height: 30px;
}

/* Icon-style payment (bank/COD) - smaller icon with text */
.payment-grid-item.icon-style .payment-grid-img {
    height: 22px;
    max-width: 26px;
}

/* Payment Grid Name - Shown for icon-style */
.payment-grid-name {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.payment-grid-item.selected .payment-grid-name {
    color: #111111;
    font-weight: 600;
}

/* Shared Payment Form Container */
.payment-form-container {
    margin-top: 16px;
    padding: 16px;
    background-color: #FAFAFA;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    min-height: 60px;
    text-align: center;
}

.payment-form-container.loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-form-content {
    position: relative;
}

/* Payment Form Loader */
.payment-form-content .payment-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Payment form content - fix layout and style buttons */
.payment-form-content .buttons {
    clear: both;
    overflow: hidden;
    margin-top: 15px;
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

.payment-form-content .buttons .pull-right,
.payment-form-content .buttons .pull-left,
.payment-form-content .pull-right,
.payment-form-content .pull-left {
    float: none !important;
    width: 100% !important;
}

.payment-form-content .buttons > div {
    width: 100%;
}

.payment-form-content .buttons::after {
    display: none !important;
}

/* Style confirm button in payment form content */
.payment-form-content #button-confirm,
.payment-form-content .btn-confirm,
.payment-form-content [id*="button-confirm"],
.payment-form-content button[type="submit"],
.payment-form-content input[type="submit"] {
    display: block !important;
    width: 100% !important;
    padding: 14px 24px !important;
    background: #111111 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    float: none !important;
    text-align: center !important;
    margin-top: 10px !important;
}

.payment-form-content #button-confirm:hover,
.payment-form-content .btn-confirm:hover,
.payment-form-content [id*="button-confirm"]:hover,
.payment-form-content button[type="submit"]:hover,
.payment-form-content input[type="submit"]:hover {
    background: #333333 !important;
}

/* Ensure form elements display properly */
.payment-form-content form {
    width: 100%;
}

.payment-form-content .table-responsive {
    margin-bottom: 15px;
}

/* Hide unnecessary elements in shared form */
.payment-form-content .panel-heading,
.payment-form-content .panel-title {
    display: none;
}

.payment-form-content .panel {
    border: none;
    box-shadow: none;
    margin: 0;
}

.payment-form-content .panel-body {
    padding: 0;
}

/* Responsive - Tablet */
@media (max-width: 767px) {
    .payment-methods-grid {
        gap: 6px;
    }

    .payment-grid-item {
        padding: 10px 12px;
        min-width: 100px;
        min-height: 46px;
        gap: 8px;
    }

    .payment-grid-img {
        height: 24px;
        max-width: 70px;
    }

    .payment-grid-item.multi-logo .payment-grid-img {
        height: auto;
        width: 100%;
        max-width: none;
        max-height: 25px;
    }

    .payment-grid-item.icon-style .payment-grid-img {
        height: 20px;
        max-width: 22px;
    }

    .payment-grid-name {
        font-size: 13px;
        font-weight: 600;
    }

    .payment-grid-radio {
        width: 18px;
        height: 18px;
        min-width: 18px;
    }

    .payment-grid-item.selected .payment-grid-radio::after {
        width: 7px;
        height: 7px;
    }

    .payment-form-container {
        margin-top: 14px;
        padding: 14px;
    }
}

/* Responsive - Mobile */
@media (max-width: 480px) {
    .payment-methods-grid {
        gap: 5px;
    }

    .payment-grid-item {
        padding: 8px 10px;
        min-width: 90px;
        min-height: 42px;
        border-radius: 8px;
        gap: 6px;
    }

    .payment-grid-img {
        height: 22px;
        max-width: 60px;
    }

    .payment-grid-item.multi-logo .payment-grid-img {
        height: auto;
        width: 100%;
        max-width: none;
        max-height: 25px;
    }

    .payment-grid-item.icon-style .payment-grid-img {
        height: 18px;
        max-width: 20px;
    }

    .payment-grid-name {
        font-size: 13px;
        font-weight: 600;
    }

    .payment-grid-radio {
        width: 16px;
        height: 16px;
        min-width: 16px;
    }

    .payment-grid-item.selected .payment-grid-radio::after {
        width: 6px;
        height: 6px;
    }

    .payment-form-container {
        margin-top: 10px;
        padding: 12px;
        border-radius: 10px;
    }
}

/* ========================================
   PAYMENT METHODS TAB VIEW - REDESIGN
   Transform tab view to card layout
   ======================================== */
#paymentMethodsContainer .pside-bar,
#paymentMethodsContainer .nav-sidebar {
    width: 100%;
}

#paymentMethodsContainer #paymentMethodTab {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: none;
    margin: 0;
    padding: 0;
}

#paymentMethodsContainer #paymentMethodTab li {
    float: none;
    margin: 0;
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

#paymentMethodsContainer #paymentMethodTab li:hover {
    border-color: #D1D5DB;
}

#paymentMethodsContainer #paymentMethodTab li.active {
    border-color: #111111;
}

#paymentMethodsContainer #paymentMethodTab li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #fff;
    color: #111827;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    border: none;
    border-radius: 0;
    flex-direction: row-reverse;
}

/* Radio button on far right (matches shipping) */
#paymentMethodsContainer #paymentMethodTab li a::after {
    content: '';
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid #D1D5DB;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.2s ease;
    background: #fff;
}

#paymentMethodsContainer #paymentMethodTab li.active a::after {
    border-color: #111111;
    background-color: #111111;
    box-shadow: inset 0 0 0 4px #fff;
}

/* Default payment icon for tab view */
#paymentMethodsContainer #paymentMethodTab li a::before {
    content: 'credit_card';
    font-family: 'Material Symbols Outlined';
    font-size: 24px;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: #F3F4F6;
    border-radius: 8px;
    flex-shrink: 0;
    order: 1;
}

/* Hide default icon when has image */
#paymentMethodsContainer #paymentMethodTab li a:has(.payment_images img)::before {
    display: none;
}

#paymentMethodsContainer #paymentMethodTab li a .payment_images {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: #F3F4F6;
    border-radius: 8px;
    flex-shrink: 0;
    order: 1;
}

#paymentMethodsContainer #paymentMethodTab li a .payment_images img {
    height: 28px;
    width: auto;
    max-width: 36px;
    object-fit: contain;
}

/* Tab content panel */
#paymentMethodsContainer #paymentMethodTabContent {
    margin-top: 16px;
}

#paymentMethodsContainer #paymentMethodTabContent .panel {
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    box-shadow: none;
}

#paymentMethodsContainer #paymentMethodTabContent .panel-body {
    padding: 16px;
    background: #FAFAFA;
    border-radius: 12px;
}

/* Hide wrapper elements in tab view */
#paymentMethodsContainer .bordertop,
#paymentMethodsContainer .equal:not(#payment-accordion .equal) {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ========================================
   RTL/LTR SUPPORT - SHIPPING & PAYMENT
   ======================================== */

/* RTL - Default (Arabic) */
html[dir="rtl"] .shipping-method-card,
html[dir="rtl"] .payment-method-card {
    text-align: right;
    flex-direction: row; /* Radio on left (start of card) */
}

html[dir="rtl"] .shipping-method-content,
html[dir="rtl"] .payment-method-content {
    flex-direction: row;
}

html[dir="rtl"] .shipping-method-details,
html[dir="rtl"] .payment-method-details {
    text-align: right;
}

html[dir="rtl"] .shipping-method-info,
html[dir="rtl"] .payment-method-info {
    flex-direction: row;
}

html[dir="rtl"] .checkout-section-title {
    flex-direction: row;
}

/* LTR - English */
html[dir="ltr"] .shipping-method-card,
html[dir="ltr"] .payment-method-card {
    text-align: left;
    flex-direction: row-reverse; /* Radio on right (mirrors RTL) */
}

html[dir="ltr"] .shipping-method-content,
html[dir="ltr"] .payment-method-content {
    flex-direction: row; /* Items flow left to right */
}

/* LTR order - mirror RTL layout */
[dir="ltr"] .payment-method-logos {
    order: -1; /* Logo on left (far from radio) in LTR */
}

[dir="ltr"] .payment-method-icon,
[dir="ltr"] .shipping-method-icon {
    order: 1; /* Icon on right (near radio) in LTR */
}

html[dir="ltr"] .shipping-method-details,
html[dir="ltr"] .payment-method-details {
    text-align: left;
}

html[dir="ltr"] .shipping-method-info,
html[dir="ltr"] .payment-method-info {
    flex-direction: row;
}

html[dir="ltr"] .checkout-section-title {
    flex-direction: row-reverse;
}

/* LTR - Payment accordion flex direction */
html[dir="ltr"] #paymentMethodsContainer #payment-accordion .panel-heading {
    flex-direction: row;
}

/* LTR - Checkout button */
html[dir="ltr"] .checkout-final-button {
    flex-direction: row-reverse;
}

/* ========================================
   RESPONSIVE - TABLET (max-width: 991px)
   ======================================== */
@media (max-width: 991px) {
    /* Existing Address Panel - Full Width */
    #existingAddressPanel {
        width: 100% !important;
    }

    #existingAddressPanel > .row,
    #existingAddressPanel .row {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #existingAddressPanel .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Shipping Method Panel - Full Width */
    #is_shipping_method_panel,
    .is_shipping_method_panel {
        width: 100% !important;
    }

    #is_shipping_method_panel > .row,
    #is_shipping_method_panel .row,
    .is_shipping_method_panel > .row,
    .is_shipping_method_panel .row {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #is_shipping_method_panel .row > [class*="col-"],
    .is_shipping_method_panel .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Shipping Methods Container - Full Width */
    .shipping-methods-redesign {
        width: 100% !important;
    }

    .shipping-method-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Payment Methods - Full Width */
    #paymentMethodsContainer {
        width: 100% !important;
    }

    #paymentMethodsContainer #payment-accordion {
        width: 100% !important;
    }

    #paymentMethodsContainer #payment-accordion .panel {
        width: 100% !important;
    }

    .checkout-step {
        margin-bottom: 20px !important;
    }

    .checkout-step.shipping-step {
        margin-top: 16px !important;
        margin-bottom: 20px !important;
    }

    .checkout-step.payment-step {
        margin-bottom: 0 !important;
    }

    .checkout-section-title {
        font-size: 15px;
        margin-bottom: 12px;
        gap: 8px;
    }

    .checkout-section-title .material-symbols-outlined {
        font-size: 19px;
    }
}

/* ========================================
   RESPONSIVE - MOBILE (max-width: 767px)
   ======================================== */
@media (max-width: 767px) {
    /* Reduce section spacing on tablets */
    .checkout-step {
        margin-bottom: 18px !important;
    }

    .checkout-step.shipping-step {
        margin-top: 14px !important;
        margin-bottom: 18px !important;
    }

    .checkout-step.payment-step {
        margin-bottom: 0 !important;
    }

    .checkout-section-title {
        font-size: 15px;
        margin-bottom: 12px;
        gap: 7px;
    }

    .checkout-section-title .material-symbols-outlined {
        font-size: 18px;
    }

    /* Shipping Method Cards */
    .shipping-method-card {
        padding: 14px;
        border-radius: 10px;
    }

    .shipping-method-content {
        margin-right: 4px;
        margin-left: 0;
        gap: 18px;
    }

    [dir="ltr"] .shipping-method-content {
        margin-right: 0;
        margin-left: 4px;
    }

    .shipping-method-icon {
        width: 60px;
        height: 40px;
    }

    .shipping-method-icon:has(img) {
        border: none !important;
        width: unset;
        height: unset;
    }

    .shipping-method-icon img {
        width: 60px;
        height: 40px;
    }

    .shipping-method-icon .material-symbols-outlined {
        font-size: 22px;
    }

    .shipping-method-name {
        font-size: 14px;
    }

    .shipping-method-price {
        font-size: 14px;
    }

    .shipping-method-info {
        font-size: 12px;
        gap: 3px;
    }

    .shipping-method-info .material-symbols-outlined {
        font-size: 14px;
    }

    .shipping-method-radio {
        width: 18px;
        height: 18px;
    }

    .shipping-method-radio:checked::after {
        width: 7px;
        height: 7px;
    }

    .shipping-method-badge {
        padding: 3px 8px;
        font-size: 10px;
    }

    .shipping-method-badge .material-symbols-outlined {
        font-size: 12px;
    }

    /* Payment Method Cards - New Design */
    .payment-method-card {
        border-radius: 10px;
        padding: 10px 14px;
    }

    .payment-method-content {
        gap: 10px;
    }

    .payment-method-icon {
        width: 36px;
        height: 36px;
        border-radius: 6px;
    }

    .payment-method-icon img {
        width: 28px;
        height: 28px;
    }

    .payment-method-logos img {
        height: 20px;
        max-width: 70px;
    }

    .payment-method-icon .material-symbols-outlined {
        font-size: 20px;
    }

    .payment-method-name {
        font-size: 14px;
    }

    .payment-method-radio {
        width: 18px;
        height: 18px;
    }

    .payment-method-radio:checked::after {
        width: 7px;
        height: 7px;
    }

    /* Payment Method Cards - Old Accordion (Legacy) */
    #paymentMethodsContainer #payment-accordion .panel-heading {
        padding: 14px !important;
        gap: 10px;
    }

    #paymentMethodsContainer #payment-accordion .panel-heading::after {
        width: 18px;
        height: 18px;
        min-width: 18px;
    }

    #paymentMethodsContainer #payment-accordion .panel-heading h4::before {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 20px;
    }

    #paymentMethodsContainer #payment-accordion .panel-heading h4 label {
        font-size: 14px;
    }

    #paymentMethodsContainer #payment-accordion .payment_images {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    #paymentMethodsContainer #payment-accordion .payment_images img {
        height: 24px;
        max-width: 32px;
    }

    .payment-method-content {
        margin-right: 12px;
        gap: 10px;
    }

    [dir="ltr"] .payment-method-content {
        margin-right: 0;
        margin-left: 12px;
    }

    .payment-method-icon {
        width: 36px;
        height: 36px;
    }

    .payment-method-icon img {
        width: 24px;
        height: 24px;
    }

    .payment-method-icon .material-symbols-outlined {
        font-size: 20px;
    }

    .payment-method-name {
        font-size: 14px;
    }

    .payment-method-radio {
        width: 18px;
        height: 18px;
    }

    .payment-method-radio:checked::after {
        width: 7px;
        height: 7px;
    }

    /* Checkout Section Titles */
    .checkout-section-title {
        font-size: 15px;
        gap: 8px;
        margin-bottom: 12px;
    }

    .checkout-section-title .material-symbols-outlined {
        font-size: 18px;
    }

    /* Checkout Button */
    .checkout-final-button {
        padding: 14px 20px;
        font-size: 15px;
        gap: 10px;
        margin-top: 20px;
        border-radius: 10px;
    }

    .checkout-final-button .material-symbols-outlined {
        font-size: 20px;
    }

    .checkout-final-button .divider {
        height: 18px;
    }

    /* Spacing */
    .checkout-step {
        margin-bottom: 20px !important;
    }

    .checkout-step.shipping-step {
        margin-top: 16px !important;
        margin-bottom: 20px !important;
    }

    .checkout-step.payment-step {
        margin-bottom: 0 !important;
    }

    .shipping-methods-redesign,
    #paymentMethodsContainer #payment-accordion {
        gap: 10px;
    }
}

/* ========================================
   RESPONSIVE - SMALL MOBILE (max-width: 479px)
   ======================================== */
@media (max-width: 479px) {

    .apple-pay-notification .copy-link {
        font-size: 11px !important;
    }

    /* Shipping Method Cards */
    .shipping-method-card {
        padding: 12px;
        border-radius: 8px;
    }

    .shipping-method-content {
        margin-right: 10px;
        gap: 10px;
    }

    [dir="ltr"] .shipping-method-content {
        margin-right: 0;
        margin-left: 10px;
    }

    .shipping-method-icon {
        width: 36px;
        height: 36px;
    }

    .shipping-method-icon:has(img) {
        border: none !important;
        width: unset;
        height: unset;
    }

    .shipping-method-icon img {
        width: 60px;
        height: 40px;
    }

    .shipping-method-icon .material-symbols-outlined {
        font-size: 20px;
    }

    .shipping-method-details {
        gap: 8px;
    }

    .shipping-method-name {
         font-size: 12px !important;
    }

    .shipping-method-price {
        font-size: 12px !important;
    }

    .shipping-method-info {
        font-size: 10px;
    }

    .shipping-method-info .material-symbols-outlined {
        font-size: 13px;
    }

    .shipping-method-radio {
        width: 16px;
        height: 16px;
    }

    .shipping-method-radio:checked::after {
        width: 6px;
        height: 6px;
    }

    .shipping-method-badge {
        padding: 2px 6px;
        font-size: 9px;
        border-top-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    .shipping-method-badge .material-symbols-outlined {
        font-size: 11px;
    }

    /* Payment Method Cards - New Design */
    .payment-method-card {
        border-radius: 8px;
        padding: 8px 12px;
    }

    .payment-method-content {
        gap: 8px;
    }

    .payment-method-icon {
        width: 32px;
        height: 32px;
        border-radius: 6px;
    }

    .payment-method-icon img {
        width: 24px;
        height: 24px;
    }

    .payment-method-logos img {
        height: 16px;
        max-width: 60px;
    }

    .payment-method-icon .material-symbols-outlined {
        font-size: 18px;
    }

    .payment-method-name {
        font-size: 13px;
    }

    .payment-method-radio {
        width: 16px;
        height: 16px;
    }

    .payment-method-radio:checked::after {
        width: 6px;
        height: 6px;
    }

    /* Payment Method Cards - Old Accordion (Legacy) */
    #paymentMethodsContainer #payment-accordion .panel {
        border-radius: 8px !important;
    }

    #paymentMethodsContainer #payment-accordion .panel-heading {
        padding: 12px !important;
        gap: 8px;
    }

    #paymentMethodsContainer #payment-accordion .panel-heading::after {
        width: 16px;
        height: 16px;
        min-width: 16px;
    }

    #paymentMethodsContainer #payment-accordion .panel-heading h4::before {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 18px;
        border-radius: 6px;
    }

    #paymentMethodsContainer #payment-accordion .panel-heading h4 label {
        font-size: 13px;
    }

    #paymentMethodsContainer #payment-accordion .panel-heading h4 {
        gap: 10px;
    }

    #paymentMethodsContainer #payment-accordion .payment_images {
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 6px;
    }

    #paymentMethodsContainer #payment-accordion .payment_images img {
        height: 20px;
        max-width: 28px;
    }

    .payment-method-content {
        margin-right: 10px;
        gap: 8px;
    }

    [dir="ltr"] .payment-method-content {
        margin-right: 0;
        margin-left: 10px;
    }

    .payment-method-icon {
        width: 32px;
        height: 32px;
        border-radius: 6px;
    }

    .payment-method-icon img {
        width: 20px;
        height: 20px;
    }

    .payment-method-logos img {
        height: 16px;
        max-width: 60px;
    }

    .payment-method-icon .material-symbols-outlined {
        font-size: 18px;
    }

    .payment-method-name {
        font-size: 13px;
    }

    .payment-method-radio {
        width: 16px;
        height: 16px;
    }

    .payment-method-radio:checked::after {
        width: 6px;
        height: 6px;
    }

    /* Checkout Section Titles */
    .checkout-section-title {
        font-size: 14px;
        gap: 6px;
        margin-bottom: 10px;
    }

    .checkout-section-title .material-symbols-outlined {
        font-size: 16px;
    }

    /* Checkout Button */
    .checkout-final-button {
        padding: 12px 16px;
        font-size: 14px;
        gap: 8px;
        margin-top: 16px;
        border-radius: 8px;
    }

    .checkout-final-button .material-symbols-outlined {
        font-size: 18px;
    }

    .checkout-final-button .divider {
        height: 16px;
    }

    /* Spacing */
    .checkout-step {
        margin-bottom: 16px !important;
    }

    .checkout-step.shipping-step {
        margin-top: 12px !important;
        margin-bottom: 16px !important;
    }

    .checkout-step.payment-step {
        margin-bottom: 0 !important;
    }

    .shipping-methods-redesign,
    #paymentMethodsContainer #payment-accordion {
        gap: 8px;
    }
}

/* ========================================
   RTL/LTR RESPONSIVE FIXES
   ======================================== */

/* Shipping Method Card - Keep radio on left for both RTL/LTR */
.shipping-method-card {
    flex-direction: row;
}

/* Shipping Method Content - Consistent direction */
.shipping-method-content {
    flex-direction: row;
}

/* Shipping Method Details - Price on left in RTL, right in LTR */
html[dir="rtl"] .shipping-method-details {
    flex-direction: row;
}

html[dir="ltr"] .shipping-method-details {
    flex-direction: row-reverse;
}

/* Payment Panel Heading - RTL direction */
html[dir="rtl"] #paymentMethodsContainer #payment-accordion .panel-heading {
    flex-direction: row-reverse;
}

html[dir="ltr"] #paymentMethodsContainer #payment-accordion .panel-heading {
    flex-direction: row;
}

/* Payment Panel Heading h4 - RTL direction */
html[dir="rtl"] #paymentMethodsContainer #payment-accordion .panel-heading h4 {
    flex-direction: row;
}

html[dir="ltr"] #paymentMethodsContainer #payment-accordion .panel-heading h4 {
    flex-direction: row;
}

/* Mobile RTL/LTR Responsive (max-width: 767px) */
@media (max-width: 767px) {
    /* Existing Address Panel - Full Width */
    #existingAddressPanel {
        width: 100% !important;
    }

    #existingAddressPanel > .row,
    #existingAddressPanel .row {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #existingAddressPanel .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Shipping Method Panel - Full Width */
    #is_shipping_method_panel,
    .is_shipping_method_panel {
        width: 100% !important;
    }

    #is_shipping_method_panel > .row,
    #is_shipping_method_panel .row,
    .is_shipping_method_panel > .row,
    .is_shipping_method_panel .row {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #is_shipping_method_panel .row > [class*="col-"],
    .is_shipping_method_panel .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Shipping Methods - Full Width */
    .shipping-methods-redesign {
        width: 100% !important;
        margin: 0 !important;
    }

    .shipping-method-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        gap: 8px;
    }

    /* Payment Methods - Full Width (New Design) */
    .payment-methods-redesign {
        width: 100% !important;
        margin: 0 !important;
    }

    .payment-method-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        gap: 8px;
    }

    /* Payment Methods - Full Width (Legacy Accordion) */
    #paymentMethodsContainer {
        width: 100% !important;
        margin: 0 !important;
    }

    #paymentMethodsContainer #payment-accordion {
        width: 100% !important;
        padding: 0 !important;
    }

    #paymentMethodsContainer #payment-accordion .panel {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Badge RTL positioning */
    html[dir="rtl"] .shipping-method-badge {
        left: -2px;
        right: auto;
        border-top-left-radius: 10px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 0;
    }

    html[dir="ltr"] .shipping-method-badge {
        right: -2px;
        left: auto;
        border-top-right-radius: 10px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 0;
    }

    /* Shipping content margin */
    html[dir="rtl"] .shipping-method-content {
        margin-left: 0;
        margin-right: 4px;
    }

    html[dir="ltr"] .shipping-method-content {
        margin-right: 0;
        margin-left: 4px;
    }

    /* Payment content margin */
    html[dir="rtl"] .payment-method-content {
        margin-left: 0;
        margin-right: 0;
    }

    html[dir="ltr"] .payment-method-content {
        margin-right: 12px;
        margin-left: 0;
    }

    /* Checkout button direction */
    html[dir="rtl"] .checkout-final-button {
        flex-direction: row;
    }

    html[dir="ltr"] .checkout-final-button {
        flex-direction: row-reverse;
    }
}

/* Small Mobile RTL/LTR Responsive (max-width: 479px) */
@media (max-width: 479px) {
    /* Shipping Methods - Full Width */
    .shipping-method-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Payment Methods - Full Width */
    #paymentMethodsContainer #payment-accordion,
    #paymentMethodsContainer #payment-accordion .panel {
        width: 100% !important;
    }

    /* Badge RTL positioning */
    html[dir="rtl"] .shipping-method-badge {
        left: -2px;
        right: auto;
        border-top-left-radius: 8px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 0;
    }

    html[dir="ltr"] .shipping-method-badge {
        right: -2px;
        left: auto;
        border-top-right-radius: 8px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 0;
    }

    /* Shipping content margin */
    html[dir="rtl"] .shipping-method-content {
        margin-left: 0;
        margin-right: 4px;
    }

    html[dir="ltr"] .shipping-method-content {
        margin-right: 0;
        margin-left: 4px;
    }

    /* Payment content margin */
    html[dir="rtl"] .payment-method-content {
        margin-left: 0;
        margin-right: 0;
    }

    html[dir="ltr"] .payment-method-content {
        margin-right: 0;
        margin-left: 0;
    }
}

/* ========================================
   ORDER NOTES - STATIC (Outside AJAX)
   ======================================== */
/* Make order notes static section look like part of the totals card */
#order-notes-static {
    background: #fff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 0 0 8px 8px !important;
    margin-top: -1px !important;
    padding: 0 !important;
}

/* Remove bottom border-radius and border from totals wrapper when order notes follows */
#totals .order-summary-totals-wrapper {
    border-radius: 0 !important;
    border-bottom: none !important;
}

#order-notes-static .order-notes-toggle {
    padding: 16px 20px !important;
    border: none !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
}

#order-notes-static .order-notes-container {
    padding: 0 20px 16px 20px !important;
}

#order-notes-static .order-notes-input {
    width: 100% !important;
}

/* ========================================
   SHIPPING ERROR MESSAGE
   ======================================== */
.shipping-error-message {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    background: #FEF2F2 !important;
    border: 1px solid #FECACA !important;
    border-radius: 8px !important;
    color: #991B1B !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.shipping-error-message .material-symbols-outlined {
    font-size: 24px !important;
    color: #DC2626 !important;
    flex-shrink: 0 !important;
}

.shipping-error-message span:last-child {
    flex: 1 !important;
}

/* Shipping loading spinner - same size and color as payment loader */
#shipping_method .shipping-table .text-center,
.shipping-table .text-center {
    padding: 40px 20px !important;
}

#shipping_method .shipping-table .fa-spinner,
.shipping-table .fa-spinner {
    font-size: 32px !important;
    color: #111111 !important;
}

/* ========================================
   STICKY FOOTER - Keep footer at bottom
   ======================================== */
html, body {
    min-height: 100% !important;
    margin: 0 !important;
    overflow-x: hidden !important;
}

body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

/* Main content wrapper - expand to fill */
#content,
.wrapper,
main,
[role="main"] {
    flex: 1 0 auto !important;
}

footer,
.footer,
#footer {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    width: 100% !important;
}

/* Fix horizontal overflow causing right margin */
.container,
.container-fluid,
.row {
    max-width: 100% !important;
}

/* Checkout page specific - prevent extra spacing */
#step_address_panel,
#existingAddressPanel,
.payment-card {
    box-sizing: border-box !important;
}

/* ========================================
   MOBILE ORDER SUMMARY - COLLAPSIBLE
   ======================================== */

/* Hide mobile wrapper on desktop, show on mobile/tablet */
.mobile-order-summary-wrapper {
    display: none;
}

/* Hide desktop order summary on mobile/tablet */
@media (max-width: 991px) {
    .mobile-order-summary-wrapper {
        display: block;
        background: #fff;
        border: 1px solid #E5E7EB;
        border-radius: 8px;
        margin-bottom: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }

    .desktop-order-summary {
        display: none !important;
    }

    /* Mobile Order Summary Header */
    .mobile-order-summary-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.2s ease;
    }

    .mobile-order-summary-header:active {
        background-color: #f9fafb;
    }

    .mobile-order-summary-title {
        font-size: 14px;
        font-weight: 600;
        color: #111111;
    }

    .mobile-order-summary-right {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mobile-order-summary-total {
        font-size: 14px;
        font-weight: 700;
        color: #111111;
    }

    .mobile-order-summary-chevron {
        font-size: 20px;
        color: #6b7280;
        transition: transform 0.3s ease;
    }

    /* Expanded state - rotate chevron */
    .mobile-order-summary-wrapper:not(.collapsed) .mobile-order-summary-chevron {
        transform: rotate(180deg);
    }

    /* Mobile Order Summary Content */
    .mobile-order-summary-content {
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .mobile-order-summary-wrapper.collapsed .mobile-order-summary-content {
        max-height: 0 !important;
    }

    /* Remove duplicate styling from nested content */
    .mobile-order-summary-content .order-summary-title {
        display: none;
    }

    .mobile-order-summary-content .order-summary-card {
        border: none !important;
        border-top: none !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 0;
        box-shadow: none !important;
        margin: 0;
        outline: none !important;
    }

    .mobile-order-summary-content .order-summary-totals-wrapper {
        border: none !important;
        margin: 0;
        padding: 0;
    }

    .mobile-order-summary-content {
        border: none !important;
    }

    /* Padding adjustments for mobile content */
    .mobile-order-summary-content #xcart-mobile,
    .mobile-order-summary-content #options-mobile,
    .mobile-order-summary-content #totals-mobile {
        padding: 0;
    }

    /* Mobile Order Notes inside collapsible */
    #order-notes-mobile {
        border: none !important;
        padding: 12px;
        margin: 0;
        background: #fff;
    }

    #order-notes-mobile .order-notes-toggle {
        padding: 0;
        border: none !important;
    }

    #order-notes-mobile .order-notes-container {
        margin-top: 10px;
    }

    .mobile-order-summary-content .order-notes-static {
        border: none !important;
    }

    /* Remove all internal borders */
    .mobile-order-summary-content .coupon-section,
    .mobile-order-summary-content .order-summary-products,
    .mobile-order-summary-content .coupon-toggle,
    .mobile-order-summary-content .order-notes-toggle {
        border: none !important;
    }

    /* Compact product items in mobile summary */
    .mobile-order-summary-content .order-product-item {
        padding: 10px 14px;
        gap: 10px;
    }

    .mobile-order-summary-content .product-image {
        width: 44px;
        height: 44px;
    }

    .mobile-order-summary-content .product-name {
        font-size: 13px !important;
    }

    .mobile-order-summary-content .product-options-text {
        font-size: 11px !important;
    }

    .mobile-order-summary-content .product-total {
        font-size: 13px !important;
    }

    .mobile-order-summary-content .product-qty-badge {
        min-width: 16px;
        height: 16px;
        font-size: 9px;
    }

    /* Compact coupon section */
    .mobile-order-summary-content .coupon-toggle {
        padding: 10px 14px;
    }

    .mobile-order-summary-content .coupon-label {
        font-size: 13px !important;
    }

    .mobile-order-summary-content .coupon-form {
        padding: 0 14px 12px;
    }

    .mobile-order-summary-content .coupon-applied {
        margin: 10px 14px;
        padding: 10px 14px;
    }

    /* Compact totals */
    .mobile-order-summary-content .order-totals-section {
        padding: 10px 14px;
    }

    .mobile-order-summary-content .order-total-row {
        padding: 6px 0;
    }

    .mobile-order-summary-content .order-total-row .total-label,
    .mobile-order-summary-content .order-total-row .total-value {
        font-size: 13px !important;
    }

    .mobile-order-summary-content .order-total-row.grand-total .total-label {
        font-size: 14px !important;
    }

    .mobile-order-summary-content .order-total-row.grand-total .total-value {
        font-size: 16px !important;
    }
}

/* RTL Support for Mobile Order Summary */
@media (max-width: 991px) {
    /* In RTL: total on right, chevron on left (end) */
    [dir="rtl"] .mobile-order-summary-right {
        flex-direction: row;
    }
}

/* Extra compact for small phones */
@media (max-width: 480px) {
    .mobile-order-summary-wrapper {
        margin-bottom: 10px;
        border-radius: 6px;
    }

    .mobile-order-summary-header {
        padding: 10px 12px;
    }

    .mobile-order-summary-title {
        font-size: 13px;
    }

    .mobile-order-summary-total {
        font-size: 13px;
    }

    .mobile-order-summary-chevron {
        font-size: 18px;
    }

    .mobile-order-summary-content .order-product-item {
        padding: 8px 12px;
        gap: 8px;
    }

    .mobile-order-summary-content .product-image {
        width: 40px;
        height: 40px;
    }

    .mobile-order-summary-content .product-name {
        font-size: 12px !important;
    }

    .mobile-order-summary-content .product-options-text {
        font-size: 10px !important;
    }

    .mobile-order-summary-content .product-total {
        font-size: 12px !important;
    }

    .mobile-order-summary-content .coupon-toggle {
        padding: 8px 12px;
    }

    .mobile-order-summary-content .coupon-label {
        font-size: 12px !important;
    }

    .mobile-order-summary-content .coupon-form {
        padding: 0 12px 10px;
    }

    .mobile-order-summary-content .coupon-applied {
        margin: 8px 12px;
        padding: 8px 12px;
    }

    .mobile-order-summary-content .order-totals-section {
        padding: 8px 12px;
    }

    .mobile-order-summary-content .order-total-row {
        padding: 5px 0;
    }

    .mobile-order-summary-content .order-total-row .total-label,
    .mobile-order-summary-content .order-total-row .total-value {
        font-size: 12px !important;
    }

    .mobile-order-summary-content .order-total-row.grand-total .total-label {
        font-size: 13px !important;
    }

    .mobile-order-summary-content .order-total-row.grand-total .total-value {
        font-size: 15px !important;
    }

    #order-notes-mobile {
        padding: 10px;
    }
}

/* ========================================
   NATIONAL ADDRESS WARNING
   ======================================== */

.national-address-warning {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 12px;
    margin-bottom: 16px;
}

.national-address-warning .warning-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.national-address-warning .warning-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.national-address-warning .warning-icon {
    color: #DC2626;
    font-size: 20px;
    flex-shrink: 0;
}

.national-address-warning .warning-header strong {
    font-size: 14px;
    font-weight: 600;
    color: #991B1B;
}

.national-address-warning .warning-description {
    font-size: 13px;
    color: #B91C1C;
    margin: 0;
    line-height: 1.5;
    padding-right: 28px; /* Align with text after icon */
}

[dir="rtl"] .national-address-warning .warning-description {
    padding-right: 0;
    padding-left: 28px;
}

.national-address-warning .warning-edit-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: #DC2626;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.national-address-warning .warning-edit-btn:hover {
    background: #B91C1C;
}

.national-address-warning .warning-edit-btn .material-symbols-outlined {
    font-size: 18px;
}

/* Incomplete Saudi address indicator in list */
.address-list-item.incomplete-saudi {
    border-color: #FECACA;
    background: #FEF2F2;
}

.address-list-item.incomplete-saudi:hover {
    border-color: #F87171;
    background: #FEE2E2;
}

/* Mobile responsive */
@media (max-width: 767px) {
    .national-address-warning {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 14px;
        border-radius: 10px;
        margin-bottom: 12px;
    }

    .national-address-warning .warning-header {
        gap: 6px;
    }

    .national-address-warning .warning-icon {
        font-size: 18px;
    }

    .national-address-warning .warning-header strong {
        font-size: 13px;
    }

    .national-address-warning .warning-description {
        font-size: 12px;
        line-height: 1.4;
        padding-right: 24px;
    }

    [dir="rtl"] .national-address-warning .warning-description {
        padding-right: 0;
        padding-left: 24px;
    }

    .national-address-warning .warning-edit-btn {
        justify-content: center;
        padding: 10px 14px;
        font-size: 13px;
        border-radius: 6px;
    }

    .national-address-warning .warning-edit-btn .material-symbols-outlined {
        font-size: 16px;
    }
}

/* Extra compact for small phones */
@media (max-width: 480px) {
    .national-address-warning {
        gap: 8px;
        padding: 10px 12px;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    .national-address-warning .warning-icon {
        font-size: 16px;
    }

    .national-address-warning .warning-header strong {
        font-size: 12px;
    }

    .national-address-warning .warning-description {
        font-size: 11px;
        padding-right: 22px;
    }

    [dir="rtl"] .national-address-warning .warning-description {
        padding-right: 0;
        padding-left: 22px;
    }

    .national-address-warning .warning-edit-btn {
        padding: 8px 12px;
        font-size: 12px;
    }

    .national-address-warning .warning-edit-btn .material-symbols-outlined {
        font-size: 14px;
    }
}

/* RTL support - let natural RTL direction handle the layout */
[dir="rtl"] .national-address-warning .warning-edit-btn {
    flex-direction: row-reverse;
}

/* ========================================
   GUEST LOGIN PANEL STYLING
   ======================================== */

#step_login_panel .row {
    margin: 0;
}   

/* Step Login Panel Container */
#step_login_panel {
    display: block !important;
    max-width: 1200px;
    margin: 0 auto;
}

/* Hide padding when login panel is empty (user logged in) */
#step_login_panel:empty {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

#step_login_panel.bottom:empty {
    display: none !important;
}

/* Login Panel Background */
#step_login_panel .login-panel-bg,
#step_login_panel #xlogin {
    display: block !important;
    min-height: auto;
    padding: 0 !important;
}

/* Tab Content - Remove padding */
.login-panel-bg .tab-content {
    padding: 0;
}

/* Login Section - Main Card */
#step_login_panel .login-section,
#step_login_panel #loginPage {
    max-width: 500px;
    margin: 16px auto;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 20px;
}

/* Login Heading */
#step_login_panel .section-heading {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 35px;
    margin-top: 12px;
    padding: 0; 
    text-align: center;
}

/* Tab Navigation for Login/Register/Guest */
#step_login_panel .nav-tabs,
#step_login_panel #accountTabs {
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    gap: 0;
}

#step_login_panel .nav-tabs > li {
    margin-bottom: -1px;
}

#step_login_panel .tabbable .nav-tabs>li {
    border-bottom: transparent !important;
}

#step_login_panel .nav-tabs > li > a {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    border-radius: 0;
    transition: all 0.2s ease;
}

#step_login_panel .nav-tabs > li > a:hover {
    color: #111827;
    background: transparent;
    border-bottom-color: #D1D5DB;
}

#step_login_panel .nav-tabs > li.active > a,
#step_login_panel .nav-tabs > li.active > a:hover,
#step_login_panel .nav-tabs > li.active > a:focus {
    color: #111827;
    background: transparent;
    border: none;
    border-bottom: 2px solid #111827;
}

/* Form Groups */
#step_login_panel .group,
#step_login_panel .form-group {
    margin-bottom: 5px;
    position: relative;
}

/* Form Labels */
#step_login_panel label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
    max-width: max-content;
}

/* Form Inputs */
#step_login_panel input[type="text"],
#step_login_panel input[type="email"],
#step_login_panel input[type="password"],
#step_login_panel input[type="tel"],
#step_login_panel select,
#step_login_panel .form-control,
#step_login_panel .inputMaterial {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #FFFFFF;
    color: #111827;
    transition: all 0.2s ease;
}

#step_login_panel input[type="text"]:focus,
#step_login_panel input[type="email"]:focus,
#step_login_panel input[type="password"]:focus,
#step_login_panel input[type="tel"]:focus,
#step_login_panel select:focus,
#step_login_panel .form-control:focus,
#step_login_panel .inputMaterial:focus {
    outline: none;
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.1);
}

/* Checkbox & Radio */
#step_login_panel .checkbox,
#step_login_panel .radio {
    margin: 16px 0;
}

#step_login_panel .checkbox label,
#step_login_panel .radio label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #4B5563;
    cursor: pointer;
}

#step_login_panel .checkbox input,
#step_login_panel .radio input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0 0;
    flex-shrink: 0;
}

/* Submit Buttons */
#step_login_panel .btn-success,
#step_login_panel #button-login,
#step_login_panel #button-register,
#step_login_panel #button-guest {
    width: 100%;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    background: #111827;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}

#step_login_panel .btn-success:hover,
#step_login_panel #button-login:hover,
#step_login_panel #button-register:hover,
#step_login_panel #button-guest:hover {
    background: #1F2937;
}

/* Footer Links */
#step_login_panel .footer-separator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
    padding: 8px 0;
    border-top: 1px solid #E5E7EB;
}

#step_login_panel .footer-separator a,
#step_login_panel .btn-link {
    font-size: 14px;
    color: #6B7280;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

#step_login_panel .footer-separator a:hover,
#step_login_panel .btn-link:hover {
    color: #111827;
    text-decoration: underline;
}

/* Error Messages */
#step_login_panel .xerror,
#step_login_panel .text-danger,
#step_login_panel .has-error .help-block {
    color: #DC2626;
    font-size: 13px;
    margin-top: 6px;
    display: block;
}

#step_login_panel .has-error input,
#step_login_panel .has-error select {
    border-color: #DC2626;
}

/* Alert Messages */
#step_login_panel .alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

#step_login_panel .alert-danger {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #DC2626;
}

#step_login_panel .alert-success {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    color: #16A34A;
}

/* Social Login Section */
#step_login_panel .social-container,
#step_login_panel .login-button-container {
    margin: 20px 0;
}

#step_login_panel .separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    color: #9CA3AF;
    font-size: 14px;
}

#step_login_panel .separator::before,
#step_login_panel .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #E5E7EB;
}

#step_login_panel .separator::before {
    margin-right: 16px;
}

#step_login_panel .separator::after {
    margin-left: 16px;
}

/* Country Code Input (intl-tel-input) */
#step_login_panel .intl-tel-input {
    width: 100%;
}

#step_login_panel .intl-tel-input .selected-flag {
    padding: 0 12px;
}

/* Tab Content */
#step_login_panel .tab-content > .tab-pane {
    display: none;
}

#step_login_panel .tab-content > .active {
    display: block;
}

/* RTL Support for Login Panel */
[dir="rtl"] #step_login_panel .footer-separator {
    flex-direction: row-reverse;
}

[dir="rtl"] #step_login_panel .separator::before {
    margin-right: 0;
    margin-left: 16px;
}

[dir="rtl"] #step_login_panel .separator::after {
    margin-left: 0;
    margin-right: 16px;
}

/* ===== Compact OTP Login within Login Card (All Screens) ===== */
#step_login_panel .otp-login-header {
    margin-bottom: 14px;
}

#step_login_panel .otp-login-title {
    font-size: 20px !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

#step_login_panel .otp-login-subtitle {
    font-size: 13px !important;
}

#step_login_panel .otp-login-tabs {
    margin: 16px auto;
}

#step_login_panel .otp-input-panel {
    margin-bottom: 12px;
}

#step_login_panel .otp-helper-text {
    font-size: 12px !important;
    margin-top: 6px !important;
}

#step_login_panel .otp-submit-btn,
#step_login_panel .otp-verify-btn {
    margin-top: 16px;
}

#step_login_panel .otp-terms {
    font-size: 11px !important;
    margin-top: 14px !important;
}

/* Compact register form */
#step_login_panel .otp-register-header {
    margin-bottom: 10px;
}

#step_login_panel .otp-register-title {
    font-size: 15px;
    margin-top: 0;
    margin-bottom: 8px;
}

#step_login_panel .otp-register-btn {
    margin-top: 16px;
}

#step_login_panel .otp-checkbox-group {
    margin-bottom: 10px;
}

/* Tablet Portrait (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    #step_login_panel {
        padding: 16px;
    }

    #step_login_panel .login-section,
    #step_login_panel #loginPage {
        max-width: 515px;
        margin: 12px auto;
        padding: 18px;
    }

    #step_login_panel .nav-tabs,
    #step_login_panel #accountTabs {
        display: flex !important;
        flex-wrap: nowrap;
        justify-content: center;
        border-bottom: 1px solid #E5E7EB;
        margin-bottom: 20px;
        padding: 0;
        background: transparent;
    }

    #step_login_panel .nav-tabs > li,
    #step_login_panel #accountTabs > li {
        float: none !important;
        display: inline-block;
        margin: 0;
    }

    #step_login_panel .nav-tabs > li > a,
    #step_login_panel #accountTabs > li > a {
        padding: 10px 20px;
        font-size: 14px;
        border: none !important;
        border-bottom: 2px solid transparent !important;
        background: transparent !important;
        color: #6B7280;
        display: block;
        white-space: nowrap;
    }

    #step_login_panel .nav-tabs > li.active > a,
    #step_login_panel #accountTabs > li.active > a {
        color: #111827 !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 2px solid #111827 !important;
    }

    #step_login_panel .section-heading {
        font-size: 16px;
        margin-bottom: 25px;
    }
}

/* Mobile Responsive */
@media (max-width: 767px) {
    #step_login_panel {
        padding: 12px;
    }

    .row#step_login_panel {
        padding: 0;
    }

    #step_login_container {
        padding: 0;
        margin: 0 10px;
    }

    #step_login_panel .login-section,
    #step_login_panel #loginPage {
        margin: 10px auto;
        padding: 16px;
    }

    #step_login_panel .nav-tabs,
    #step_login_panel #accountTabs {
        display: flex !important;
        flex-wrap: nowrap;
        justify-content: center;
        border-bottom: 1px solid #E5E7EB;
        margin-bottom: 20px;
        padding: 0;
        background: transparent;
    }

    #step_login_panel .nav-tabs > li,
    #step_login_panel #accountTabs > li {
        float: none !important;
        display: inline-block;
        margin: 0;
    }

    #step_login_panel .nav-tabs > li > a,
    #step_login_panel #accountTabs > li > a {
        padding: 10px 16px;
        font-size: 13px;
        border: none !important;
        border-bottom: 2px solid transparent !important;
        background: transparent !important;
        color: #6B7280;
        display: block;
        white-space: nowrap;
    }

    #step_login_panel .nav-tabs > li.active > a,
    #step_login_panel #accountTabs > li.active > a {
        color: #111827 !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 2px solid #111827 !important;
    }

    #step_login_panel .section-heading {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    #step_login_panel .nav-tabs > li > a,
    #step_login_panel #accountTabs > li > a {
        padding: 8px 12px;
        font-size: 12px;
    }

    #step_login_panel .login-section,
    #step_login_panel #loginPage {
        margin: 8px auto;
        padding: 12px;
        border-radius: 10px;
    }

    #step_login_panel .section-heading {
        font-size: 15px;
        margin-bottom: 16px;
        margin-top: 8px;
    }

    #step_login_panel .nav-tabs,
    #step_login_panel #accountTabs {
        margin-bottom: 14px;
    }

    /* Compact OTP login within login card */
    #step_login_panel .otp-login-container,
    #step_login_panel .otp-verify-container {
        border-radius: 0;
    }

    #step_login_panel .otp-login-header {
        margin-bottom: 12px;
    }

    #step_login_panel .otp-login-title {
        font-size: 18px !important;
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }

    #step_login_panel .otp-login-subtitle {
        font-size: 13px !important;
    }

    #step_login_panel .otp-login-tabs {
        margin: 14px auto;
        padding: 4px;
    }

    #step_login_panel .otp-tab {
        padding: 6px 14px;
        font-size: 12px;
    }

    #step_login_panel .otp-input-panel {
        margin-bottom: 10px;
    }

    #step_login_panel .otp-input-panel label {
        font-size: 12px;
        margin-bottom: 4px;
    }

    #step_login_panel .otp-input-wrapper {
        padding: 10px 12px !important;
    }

    #step_login_panel .otp-helper-text {
        font-size: 11px !important;
        margin-top: 4px !important;
    }

    #step_login_panel .otp-submit-btn,
    #step_login_panel .otp-verify-btn {
        padding: 10px 16px;
        font-size: 14px;
        margin-top: 12px;
    }

    #step_login_panel .otp-terms {
        font-size: 10px !important;
        margin-top: 12px !important;
    }

    /* Compact register form within login card */
    #step_login_panel .otp-register-container {
        padding: 0;
    }

    #step_login_panel .otp-register-header {
        margin-bottom: 8px;
    }

    #step_login_panel .otp-register-title {
        font-size: 14px;
        margin-top: 0;
        margin-bottom: 6px;
    }

    #step_login_panel .otp-register-fields .regular-field {
        margin-bottom: 10px !important;
    }

    #step_login_panel .otp-register-fields label {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }

    #step_login_panel .otp-register-btn {
        padding: 10px 16px;
        font-size: 14px;
        margin-top: 12px;
    }

    #step_login_panel .otp-checkbox-group {
        margin-bottom: 8px;
    }

    #step_login_panel .otp-checkbox-label {
        font-size: 11px !important;
    }
}

/* ============================================
   Payment Method Images - Inline with Text
   (Replaces gray circle icons)
   ============================================ */

/* Payment method image - inline with text */
.payment-method-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Update payment details to have gap for image + text */
.payment-method-details {
    gap: 10px;
}

/* Hide old icon containers (gray circle with material icons) */
.payment-method-icon,
.payment-method-logos {
    display: none !important;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .payment-method-img {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 480px) {
    .payment-method-img {
        width: 20px;
        height: 20px;
    }

    .payment-method-details {
        gap: 8px;
    }
}

/* Override bootstrap radio/checkbox margin */
input[type=radio],
input[type=checkbox] {
    margin: 1px 0 0;
}

/* ========================================
   PAGE LOADER - CIRCULAR SPINNER
   ======================================== */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.page-loader.hidden {
    opacity: 0;
}

.page-loader-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.circular-loader {
    width: 64px;
    height: 64px;
    animation: rotate 2s linear infinite;
}

/* Small section loader (40px) */
.circular-loader.loader-sm {
    width: 40px;
    height: 40px;
}

/* Medium section loader (48px) */
.circular-loader.loader-md {
    width: 48px;
    height: 48px;
}

/* Section loader container */
.section-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.section-loader.loader-compact {
    padding: 30px 15px;
}

.loader-track {
    stroke: #E5E7EB;
}

.loader-path {
    stroke: #111111;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

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

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* Mobile adjustments for page loader */
@media (max-width: 767px) {
    .circular-loader {
        width: 52px;
        height: 52px;
    }
}

/* ============================================
   OTP LOGIN REDESIGN STYLES
   ============================================ */

/* ===== CONTAINER ===== */
.otp-login-container,
.otp-verify-container,
.otp-register-container {
    max-width: 480px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
}

/* ===== HEADER ===== */
.otp-login-header {
    text-align: center;
    margin-bottom: 20px;
}

.otp-login-title,
#loginotppanel .otp-login-title,
.otp-login-container .otp-login-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin-top: 10px;
    margin-bottom: 15px;
    line-height: 1.3;
}

.otp-login-subtitle,
#loginotppanel .otp-login-subtitle,
.otp-login-container .otp-login-subtitle {
    font-size: 14px !important;
    color: #6B7280 !important;
    line-height: 1.5;
    margin: 0;
}

/* ===== TAB SWITCHER ===== */
.otp-login-tabs {
    display: flex;
    gap: 8px;
    margin: 26px auto;
    max-width: max-content;
    justify-content: center;
    padding: 5px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #F3F4F6;
    color: #6B7280;
}

.otp-tab {
    padding: 8px 22px;
    border: 0;
    border-radius: 8px;
    background: #F3F4F6;
    color: #6B7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.otp-tab:hover {
    background: #E5E7EB;
}

.otp-tab.active {
    background: #fff;
    border-color: #E5E7EB;
    color: #111111;
}

/* ===== INPUT PANEL ===== */
.otp-input-panel {
    margin-bottom: 16px;
    position: relative; /* For autofill input positioning */
}

.required-star {
    color: #EF4444;
}

/* ===== FLOATING LABEL INPUT ===== */
.otp-input-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 14px !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    background: #fff !important;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
    position: relative;
}

.otp-input-wrapper:focus-within {
    border-color: #111 !important;
}

.otp-input-wrapper .material-symbols-outlined {
    color: #D1D5DB !important;
    font-size: 20px !important;
    flex-shrink: 0;
    line-height: 1;
    order: -1;
}

.otp-input-wrapper input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    font-size: 14px !important;
    color: #111111 !important;
    background: transparent !important;
    text-align: right;
    font-family: inherit;
    min-width: 0;
    line-height: 1.5;
    padding: 5px 5px 0 !important;
    margin: 0;
    height: auto;
    box-shadow: none !important;
}

.otp-input-wrapper input::placeholder {
    color: #D1D5DB;
}

/* Floating Label Styles */
.otp-floating-label {
    position: relative;
}

.otp-floating-label label {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 400;
    color: #9CA3AF;
    background: #fff;
    padding: 0 4px;
    pointer-events: none;
    transition: all 0.2s ease;
    margin: 0;
}

/* Float label when focused or has content */
.otp-floating-label:focus-within label,
.otp-floating-label input:not(:placeholder-shown) + label {
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 500;
    color: #111111;
}

/* Label always at top (no animation) */
.otp-floating-label.label-always-top label {
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 500;
    color: #111111;
}

/* RTL adjustments - ensure icon stays on left */
html[dir="rtl"] .otp-input-wrapper .material-symbols-outlined,
.otp-input-wrapper .material-symbols-outlined {
    order: -1;
}

.otp-helper-text {
    font-size: 12px;
    color: #6B7280;
    margin-top: 6px;
    margin-bottom: 0;
    text-align: right;
}

/* ===== PHONE CONTAINER WITH FLOATING LABEL ===== */
.otp-phone-container {
    position: relative;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.2s ease;
}

.otp-phone-container:focus-within {
    border-color: #111 !important;
}

.otp-phone-container.otp-floating-label label {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 400;
    color: #9CA3AF;
    background: #fff;
    padding: 0 4px;
    pointer-events: none;
    transition: all 0.2s ease;
    margin: 0;
}

/* Float label when focused or has content */
.otp-phone-container.otp-floating-label:focus-within label,
.otp-phone-container.otp-floating-label.has-value label {
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 500;
    color: #111111;
}

/* Phone container - label always at top */
.otp-phone-container.otp-floating-label.label-always-top label {
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 500;
    color: #111111;
}

/* ===== PHONE WRAPPER WITH COUNTRY CODE (intlTelInput v12) ===== */
.otp-phone-wrapper,
#loginotppanel .otp-phone-wrapper {
    display: block !important;
    width: 100%;
}

/* intlTelInput main container */
.otp-phone-wrapper .intl-tel-input,
#loginotppanel .otp-phone-wrapper .intl-tel-input {
    width: 100% !important;
    display: block !important;
}

.otp-phone-wrapper .intl-tel-input.separate-dial-code,
.otp-phone-wrapper .intl-tel-input.allow-dropdown,
#loginotppanel .otp-phone-wrapper .intl-tel-input.separate-dial-code,
#loginotppanel .otp-phone-wrapper .intl-tel-input.allow-dropdown {
    width: 100% !important;
}

/* Flag container - positioned left */
.otp-phone-wrapper .intl-tel-input .flag-container,
#loginotppanel .otp-phone-wrapper .intl-tel-input .flag-container {
    background: #F3F4F6 !important;
    left: 0 !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    height: 100% !important;
    padding: 0 !important;
    z-index: 100 !important;
    border-end-start-radius: 8px !important;
    border-start-start-radius: 8px !important;
    border-right: 1px solid #D1D5DB !important;
}

/* Selected flag button */
.otp-phone-wrapper .intl-tel-input .selected-flag {
    display: flex !important;
    gap: 6px;
    align-items: center !important;
    padding: 5px !important;
    height: 100% !important;
    width: auto !important;
    min-width: 95px !important;
    max-height: none !important;
    background: transparent !important;
    border-radius: 8px !important;
    border: none !important;
    top: 0 !important;
}

.otp-phone-wrapper .intl-tel-input .flag-container:hover {
    background: #E5E7EB !important;
}

.otp-phone-wrapper .intl-tel-input .flag-container:hover .selected-flag {
    background: transparent !important;
}

/* Flag icon */
.otp-phone-wrapper .intl-tel-input .iti-flag {
    position: relative;
    display: inline-block !important;
    transform: scale(1.3) !important;
    left: unset !important;
    margin: 0;
    order: 3;
}

/* Dial code (+966) */
.otp-phone-wrapper .intl-tel-input .selected-dial-code {
    display: inline-block !important;
    vertical-align: middle !important;
    font-size: 14px !important;
    color: #374151 !important;
    font-weight: 500 !important;
    order: 2;
}

/* Dropdown arrow */
.otp-phone-wrapper .intl-tel-input .iti-arrow {
    position: relative !important;
    left: unset !important;
    right: unset !important;
    top: unset !important;
    margin-top: 2px !important;
    border-top-color: #6B7280 !important;
    display: block !important;
    order: 1;
}

/* Phone input field */
.otp-phone-wrapper .otp-phone-input {
    width: 100% !important;
    padding-left: 110px !important;
    padding-right: 10px !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    color: #111111 !important;
    background: transparent !important;
    outline: none !important;
    font-family: inherit;
    line-height: 1.5;
    text-align: left;
    direction: ltr;
    letter-spacing: 1px;
    height: auto !important;
}

.otp-phone-wrapper .otp-phone-input::placeholder {
    color: #9CA3AF;
    font-size: 14px;
    letter-spacing: 1px;
}

.otp-phone-wrapper .otp-phone-input:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Country dropdown list */
.otp-phone-wrapper .intl-tel-input .country-list {
    border-radius: 8px !important;
    border: 1px solid #D1D5DB !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    max-height: 250px !important;
    z-index: 9999 !important;
    min-width: 300px;
}

.otp-phone-wrapper .intl-tel-input .country-list .country {
    padding: 10px 12px !important;
}

.otp-phone-wrapper .intl-tel-input .country-list .country:hover,
.otp-phone-wrapper .intl-tel-input .country-list .country.highlight {
    background: #F3F4F6 !important;
}

/* ===== SUBMIT BUTTON ===== */
.otp-submit-btn,
.otp-verify-btn {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: #111111;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 30px;
    font-family: inherit;
}

.otp-submit-btn:hover,
.otp-verify-btn:hover {
    background: #333333;
}

.otp-submit-btn:disabled,
.otp-verify-btn:disabled {
    background: #9CA3AF;
    cursor: not-allowed;
}

.otp-submit-btn.loading,
.otp-verify-btn.loading {
    background: #9CA3AF !important;
    cursor: wait !important;
}

/* Body cursor during OTP loading */
body.otp-loading,
body.otp-loading * {
    cursor: wait !important;
}

.otp-submit-btn:active,
.otp-verify-btn:active {
    transform: scale(0.99);
}

.otp-submit-btn .material-symbols-outlined,
.otp-verify-btn .material-symbols-outlined {
    font-size: 18px;
}

/* Button loading spinner */
.btn-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: btn-spin 0.8s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* ===== TERMS FOOTER ===== */
.otp-terms {
    font-size: 12px;
    color: #6B7280;
    text-align: center;
    margin: 23px 0 0;
    line-height: 1.5;
    border-top: #D1D5DB solid 1px;
    padding: 20px 0 5px 0;
}

.otp-terms a {
    color: #111111;
    text-decoration: underline !important;
    font-weight: 500;
}

.otp-terms a:hover {
    color: #333;
    text-decoration: underline !important;
}

/* ===== HEADER ICON (Forgotten/Reset Pages) ===== */
.otp-header-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    background: linear-gradient(145deg, #F9FAFB 0%, #E5E7EB 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.otp-header-icon .material-symbols-outlined {
    font-size: 28px;
    color: #111111;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

/* Single card account pages (Forgotten/Reset) */
.account-single-card {
    margin-top: 16px;
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.account-single-card .otp-login-container {
    padding: 28px 28px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    max-width: 420px;
    width: 100%;
    background: #fff;
}

.account-single-card .otp-submit-btn {
    margin-top: 20px;
}

.account-single-card .otp-login-header {
    margin-bottom: 16px;
}

.account-single-card .otp-login-title {
    margin-bottom: 8px !important;
}

.account-single-card .otp-login-subtitle {
    font-size: 13px !important;
}

.account-single-card .otp-input-panel {
    margin-bottom: 12px;
}

.account-single-card .otp-input-panel label {
    margin-bottom: 4px;
    font-size: 13px;
}

.account-single-card .otp-input-wrapper {
    padding: 10px 12px !important;
}

.account-single-card .otp-input-wrapper input {
    font-size: 13px !important;
}

/* ===== FOOTER LINKS (Forgotten/Reset Pages) ===== */
.otp-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #E5E7EB;
    font-size: 14px;
    flex-wrap: wrap;
}

.otp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #111111;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    padding: 8px 16px;
    border-radius: 8px;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
}

.otp-back-link:hover {
    color: #111111;
    text-decoration: none;
    background: #E5E7EB;
    border-color: #D1D5DB;
}

.otp-register-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6B7280;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 8px 16px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
}

.otp-register-link:hover {
    color: #111111;
    text-decoration: none;
    background: #F9FAFB;
}

.otp-back-link .material-symbols-outlined {
    font-size: 18px;
}

.otp-divider {
    display: none; /* Hide the divider, use spacing instead */
}

/* Mobile responsive for single card pages */
@media (max-width: 480px) {
    .account-single-card {
        margin-top: 8px;
        margin-bottom: 8px;
        padding: 0 12px;
    }

    .account-single-card .otp-login-container {
        padding: 20px 18px;
        border-radius: 12px;
    }

    .account-single-card .otp-header-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 8px;
    }

    .account-single-card .otp-header-icon .material-symbols-outlined {
        font-size: 22px;
    }

    .account-single-card .otp-login-header {
        margin-bottom: 12px;
    }

    .account-single-card .otp-login-title {
        font-size: 18px !important;
        margin-bottom: 4px !important;
    }

    .account-single-card .otp-login-subtitle {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .account-single-card .otp-input-panel {
        margin-bottom: 10px;
    }

    .account-single-card .otp-input-panel label {
        font-size: 12px;
        margin-bottom: 3px;
    }

    .account-single-card .otp-input-wrapper {
        padding: 8px 10px !important;
    }

    .account-single-card .otp-input-wrapper input {
        font-size: 13px !important;
    }

    .account-single-card .otp-submit-btn {
        margin-top: 14px;
        padding: 10px 16px;
        font-size: 14px;
    }

    .account-single-card .otp-footer-links {
        margin-top: 14px;
        padding-top: 12px;
        gap: 8px;
    }

    .account-single-card .otp-back-link,
    .account-single-card .otp-register-link {
        padding: 6px 12px;
        font-size: 13px;
    }
}

/* ===== PASSWORD TOGGLE ===== */
.otp-password-wrapper {
    position: relative;
}

.otp-password-toggle {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #9CA3AF;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

html[dir="ltr"] .otp-password-toggle {
    left: auto;
    right: 12px;
}

.otp-password-toggle:hover {
    color: #111111;
}

.otp-password-toggle .material-symbols-outlined {
    font-size: 20px;
}

/* Adjust input padding when password toggle is present */
.otp-password-wrapper input {
    padding-left: 44px !important;
}

html[dir="ltr"] .otp-password-wrapper input {
    padding-left: 5px !important;
    padding-right: 44px !important;
}

/* ===== INPUT ERROR STATE ===== */
.otp-input-wrapper.error {
    border-color: #EF4444 !important;
}

.otp-input-wrapper.error .material-symbols-outlined.input-icon {
    color: #EF4444 !important;
}

.otp-input-panel .xerror,
.otp-input-panel .text-danger {
    display: block;
    color: #EF4444;
    font-size: 12px;
    margin-top: 6px;
    text-align: right;
}

html[dir="ltr"] .otp-input-panel .xerror,
html[dir="ltr"] .otp-input-panel .text-danger {
    text-align: left;
}

/* ===== OTP VERIFICATION SCREEN ===== */
.otp-verify-title {
    font-size: 22px;
    font-weight: 700;
    color: #111111;
    text-align: center;
    margin-bottom: 8px;
    line-height: 1.3;
}

.otp-verify-contact {
    font-size: 14px;
    font-weight: 600;
    color: #059669;
    background: #D1FAE5;
    padding: 4px 12px;
    border-radius: 20px;
    direction: ltr !important;
    white-space: nowrap;
    display: inline-block;
}

/* ===== VERIFIED INPUT STYLES ===== */
.verified-input {
    background-color: #F0FDF4 !important;
    border-color: #22C55E !important;
    color: #166534 !important;
    cursor: not-allowed;
}

.verified-input:disabled {
    opacity: 1 !important;
    background-color: #F0FDF4 !important;
}

.verified-field {
    position: relative;
}

.verified-field::after {
    content: '\e5ca'; /* Material icon: check_circle */
    font-family: 'Material Symbols Outlined';
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    color: #22C55E;
    font-size: 20px;
    pointer-events: none;
}

html[dir="rtl"] .verified-field::after {
    right: auto;
    left: 25px;
}

/* High-specificity verified input styles for register fields */
.otp-register-fields .group.regular-field input.inputMaterial.verified-input,
.otp-register-fields .group.filled input.inputMaterial.verified-input,
.otp-register-fields .group.regular-field .input-icon-wrapper input.inputMaterial.verified-input,
.otp-register-fields #regular-field-telephone input#input-telephone.verified-input,
#panel-register input.verified-input,
#xlogin-panel input.verified-input,
.otp-register-fields .group.regular-field .input-icon-wrapper:has(input.inputMaterial.verified-input)
{
    background-color: #F0FDF4 !important;
    border-color: #22C55E !important;
    color: #166534 !important;
    cursor: not-allowed !important;
}

.otp-register-fields .group.regular-field input.inputMaterial.verified-input:disabled,
.otp-register-fields .group.filled input.inputMaterial.verified-input:disabled,
#panel-register input.verified-input:disabled,
#xlogin-panel input.verified-input:disabled {
    opacity: 1 !important;
    background-color: #F0FDF4 !important;
}

/* Verified field wrapper - show checkmark */
.otp-register-fields .group.regular-field.verified-field,
.otp-register-fields .group.filled.verified-field,
#panel-register .group.verified-field,
#xlogin-panel .group.verified-field, 
.otp-register-fields .group.regular-field .input-icon-wrapper:has(input.inputMaterial.verified-input)
.otp-register-fields #regular-field-telephone .intl-tel-input.allow-dropdown:has(input.inputMaterial.verified-input)
{
    position: relative !important;
}

.otp-register-fields .group.regular-field.verified-field::after,
.otp-register-fields .group.filled.verified-field::after,
#panel-register .group.verified-field::after,
#xlogin-panel .group.verified-field::after,
.otp-register-fields .group.regular-field .input-icon-wrapper:has(input.inputMaterial.verified-input)::after,
.otp-register-fields #regular-field-telephone .intl-tel-input.allow-dropdown:has(input.inputMaterial.verified-input)::after
{
    content: '\e5ca' !important; /* Material icon: check_circle */
    font-family: 'Material Symbols Outlined' !important;
    position: absolute !important;
    right: 15px !important;
    top: 25px !important;
    transform: translateY(-50%) !important;
    color: #22C55E !important;
    font-size: 20px !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

html[dir="ltr"] .otp-register-fields .group.regular-field.verified-field::after,
html[dir="ltr"] .otp-register-fields .group.filled.verified-field::after,
html[dir="ltr"] #panel-register .group.verified-field::after,
html[dir="ltr"] #xlogin-panel .group.verified-field::after,
html[dir="ltr"] .otp-register-fields .group.regular-field .input-icon-wrapper:has(input.inputMaterial.verified-input)::after
{
    right: 35px !important;
}

/* Verified input wrapper border */
.otp-register-fields .group.regular-field.verified-field .input-icon-wrapper,
.otp-register-fields .group.regular-field.verified-field .intl-tel-input input,
#panel-register .group.verified-field .input-icon-wrapper,
.otp-register-fields .group.regular-field .input-icon-wrapper:has(input.inputMaterial.verified-input)
{
    border-color: #22C55E !important;
    background-color: #F0FDF4 !important;
}

/** Hide input wrapper if input is verified */
#xlogin-panel .otp-register-fields .group.regular-field:has(.input-icon-wrapper input.inputMaterial.verified-input),
.otp-register-fields #regular-field-telephone:has(.intl-tel-input.allow-dropdown input.inputMaterial.verified-input),
#panel-register .group:has(.input-icon-wrapper input.inputMaterial.verified-input), #step_login_panel .group:has(.input-icon-wrapper input.inputMaterial.verified-input)
{
    display: none !important;
} 

.otp-verify-subtitle {
    font-size: 14px;
    color: #6B7280;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.8;
}

/* ===== OTP CODE INPUT BOXES ===== */
.otp-code-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    background: #f3f4f6;
}

.otp-code-wrapper .material-symbols-outlined {
    color: #9CA3AF;
    font-size: 20px;
    flex-shrink: 0;
}

.otp-code-wrapper label {
    font-size: 13px;
    font-weight: 500;
    color: #111111;
    white-space: nowrap;
    flex-shrink: 0;
}

.otp-code-inputs {
    display: flex;
    flex: 1;
    justify-content: center;
    min-width: 180px;
    direction: ltr; /* OTP codes are always left-to-right */
}

.otp-digit {
    width: 30px !important;
    height: 35px !important;
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #111111 !important;
    outline: none !important;
    padding: 0 !important;
    font-family: inherit !important;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    caret-color: #111111 !important;
}

.otp-digit::-webkit-outer-spin-button,
.otp-digit::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.otp-digit:focus {
    outline: none;
}

.otp-digit.filled {
    color: #111111;
}

.otp-digit::placeholder {
    color: #9CA3AF;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
}

/* SMS Auto-fill input - visually hidden but accessible for iOS/Android */
.otp-autofill-input {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    opacity: 0.01 !important; /* Tiny opacity for iOS detection */
    width: 100% !important;
    max-width: 200px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: transparent !important;
    caret-color: transparent !important;
    font-size: 16px; /* Prevents iOS zoom */
    pointer-events: none !important; /* Don't interfere with digit inputs */
}

.otp-autofill-input:focus {
    pointer-events: auto;
}

/* ===== RESEND SECTION ===== */
.otp-resend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 13px;
    flex-wrap: wrap;
    gap: 8px;
}

.otp-resend-row > span {
    color: #6B7280;
}

.otp-resend-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: #111111;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s ease;
    font-family: inherit;
}

.otp-resend-btn:hover:not(:disabled) {
    background: #f5f5f5;
}

.otp-resend-btn:disabled,
.otp-resend-btn.disabled {
    color: #9CA3AF;
    cursor: not-allowed;
}

.otp-resend-btn .material-symbols-outlined {
    font-size: 16px;
}

/* ===== TIMER ===== */
.otp-timer {
    text-align: center;
    font-size: 12px;
    color: #6B7280;
    margin-bottom: 12px;
}

.otp-timer progress {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    margin-top: 8px;
    -webkit-appearance: none;
    appearance: none;
}

.otp-timer progress::-webkit-progress-bar {
    background: #E5E7EB;
    border-radius: 2px;
}

.otp-timer progress::-webkit-progress-value {
    background: #111111;
    border-radius: 2px;
}

.otp-timer progress::-moz-progress-bar {
    background: #111111;
    border-radius: 2px;
}

/* ===== INFO MESSAGE ===== */
.otp-info-message {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #1E40AF;
}

.otp-info-message .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
}

/* ===== CHANGE PHONE LINK ===== */
.otp-change-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: none;
    border: none;
    color: #6B7280;
    font-size: 13px;
    cursor: pointer;
    margin-top: 12px;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.otp-change-phone:hover {
    color: #111111;
    background: #f5f5f5;
}

.otp-change-phone .material-symbols-outlined {
    font-size: 16px;
}

/* ===== SUPPORT LINK ===== */
.otp-support {
    font-size: 12px;
    color: #6B7280;
    text-align: center;
    margin: 23px 0 0;
    line-height: 1.5;
    border-top: #D1D5DB solid 1px;
    padding: 20px 0 5px 0;
}

.otp-support a {
    color: #111111;
    text-decoration: underline;
}

.otp-support a:hover {
    color: #333;
}

/* ===== ERROR MESSAGE ===== */
.otp-error-message {
    margin-bottom: 12px;
    border-radius: 8px;
}

/* ===== REGISTRATION FORM ===== */
.otp-register-title {
    font-size: 16px;
    font-weight: 700;
    color: #111111;
    text-align: center;
    margin-bottom: 8px;
    margin-top: 10px;
}

.otp-register-subtitle {
    font-size: 14px;
    color: #6B7280;
    text-align: center;
    margin-bottom: 32px;
}

.optional-label {
    font-weight: 400;
    color: #9CA3AF;
}

/* ===== RTL SUPPORT ===== */
html[dir="rtl"] .otp-input-wrapper {
    flex-direction: row-reverse;
}

html[dir="ltr"] .otp-input-wrapper input {
    text-align: right;
}

html[dir="ltr"] .otp-submit-btn .material-symbols-outlined,
html[dir="ltr"] .otp-verify-btn .material-symbols-outlined {
    transform: rotate(180deg);
}

html[dir="rtl"] .otp-code-wrapper {
    flex-direction: row-reverse;
}

html[dir="rtl"] .otp-resend-row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .otp-change-phone {
    flex-direction: row-reverse;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 480px) {
    .otp-login-container,
    .otp-verify-container,
    .otp-register-container {
        border-radius: 0;
    }

    .otp-login-title {
        font-size: 20px;
    }

    .otp-verify-title {
        font-size: 18px;
    }

    .otp-login-tabs {
        gap: 6px;
    }

    .otp-tab {
        padding: 8px 16px;
        font-size: 13px;
    }

    .otp-digit {
        width: 30px !important;
        height: 35px !important;
        font-size: 18px;
    }

    .otp-code-wrapper {
        padding: 12px;
        gap: 12px;
    }

    .otp-submit-btn,
    .otp-verify-btn {
        padding: 12px 20px;
        font-size: 14px;
    }
}

@media (max-width: 360px) {
    .otp-digit {
        width: 30px;
        height: 35px;
        font-size: 16px;
    }

    .otp-code-inputs {
        gap: 4px;
    }
}

/* ============================================
   REGISTRATION FORM REDESIGN STYLES
   ============================================ */

/* ===== REGISTRATION CONTAINER ===== */
.otp-register-container {
    max-width: 480px;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
}

/* ===== REGISTRATION HEADER ===== */
.otp-register-header {
    text-align: center;
    margin-bottom: 10px;
}

.otp-register-title {
    font-size: 16px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 8px;
    margin-top: 10px;
    line-height: 1.8;
}

.otp-register-subtitle {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.6;
    margin: 0;
}

/* ===== TWO COLUMN LAYOUT FOR NAME FIELDS ===== */
.otp-register-row {
    display: flex;
    gap: 12px;
    margin-bottom: 0;
}

.otp-register-row .otp-input-panel {
    flex: 1;
    min-width: 0;
}

/* ===== REGISTRATION INPUT STYLES ===== */
.otp-register-container .otp-input-panel {
    margin-bottom: 16px;
}

.otp-register-container .otp-input-panel label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
}

.otp-register-container .otp-input-panel label .required-star {
    color: #EF4444;
    margin-right: 2px;
}

.otp-register-container .otp-input-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    background: #fff !important;
    transition: border-color 0.2s ease;
}

.otp-register-container .otp-input-wrapper:focus-within {
    border-color: #111 !important;
}

.otp-register-container .otp-input-wrapper input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    font-size: 14px !important;
    color: #111111 !important;
    background: transparent !important;
    text-align: right;
    font-family: inherit;
    min-width: 0;
    line-height: 1.5;
    padding: 0 !important;
    margin: 0;
    height: auto;
    box-shadow: none !important;
}

.otp-register-container .otp-input-wrapper input::placeholder {
    color: #9CA3AF;
}

/* ===== CHECKBOX GROUP ===== */
.otp-checkbox-group {
    margin: 15px 0;
}

.otp-checkbox-item {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    cursor: pointer;
}

.otp-checkbox-item:last-child {
    margin-bottom: 0;
}

/* Custom Checkbox */
.otp-checkbox-custom {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.otp-checkbox-custom input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    position: absolute !important;
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
    margin: 0 !important;
    z-index: 2 !important;
}

.otp-checkbox-custom .checkmark {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border: 2px solid #D1D5DB !important;
    border-radius: 4px !important;
    background: #fff !important;
    transition: all 0.2s ease !important;
    display: block !important;
    z-index: 1 !important;
}

/* RTL: Position checkmark on right */
[dir="rtl"] .otp-checkbox-custom .checkmark {
    left: auto !important;
    right: 0 !important;
}

.otp-checkbox-custom input[type="checkbox"]:checked + .checkmark {
    background: #111111 !important;
    border-color: #111111 !important;
}

.otp-checkbox-custom .checkmark::after {
    content: '' !important;
    position: absolute !important;
    display: none;
    left: 10px !important;
    right: auto !important;
    top: 2px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid white !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

#step_login_container .otp-checkbox-custom .checkmark::after {
    left: 6px !important;
}

/* RTL: Adjust checkmark tick position */
[dir="ltr"] .otp-checkbox-custom .checkmark::after {
    right: 10px !important;
    left: auto !important;
}

[dir="ltr"] #step_login_container .otp-checkbox-custom .checkmark::after {
    right: 6px !important;
    left: auto !important;
}

.otp-checkbox-custom input[type="checkbox"]:checked + .checkmark::after {
    display: block !important;
}

.otp-checkbox-custom input[type="checkbox"]:focus + .checkmark {
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1);
}

/* Checkbox Label Text */
.otp-checkbox-label {
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
    cursor: pointer;
}

.otp-checkbox-label a {
    color: #111111;
    text-decoration: underline;
    font-weight: 500;
}

.otp-checkbox-label a:hover {
    color: #333;
}

/* ===== REGISTRATION SUBMIT BUTTON ===== */
.otp-register-btn {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: #111111;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 24px;
    font-family: inherit;
}

.otp-register-btn:hover {
    background: #333333;
}

.otp-register-btn:disabled {
    background: #9CA3AF;
    cursor: not-allowed;
}

.otp-register-btn:active {
    transform: scale(0.99);
}

.otp-register-btn .material-symbols-outlined {
    font-size: 18px;
}

/* ===== REGISTRATION PHONE CONTAINER ===== */
.otp-register-container .otp-phone-container {
    position: relative;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.2s ease;
}

.otp-register-container .otp-phone-container:focus-within {
    border-color: #111 !important;
}

/* ===== RTL ADJUSTMENTS FOR REGISTRATION ===== */
html[dir="rtl"] .otp-register-row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .otp-register-container .otp-input-wrapper input {
    text-align: right;
}

html[dir="ltr"] .otp-register-container .otp-input-wrapper input {
    text-align: left;
}

html[dir="ltr"] .otp-register-btn .material-symbols-outlined {
    transform: rotate(180deg);
}

/* RTL: Labels should align to the right (start in RTL) */
html[dir="rtl"] .otp-register-fields .group.regular-field label,
html[dir="rtl"] .otp-register-fields .group.filled label,
html[dir="rtl"] .otp-register-fields .group label,
[dir="rtl"] .otp-register-fields .group.regular-field label,
[dir="rtl"] .otp-register-fields .group.filled label {
    text-align: right !important;
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* LTR: Labels should align to the left */
html[dir="ltr"] .otp-register-fields .group.regular-field label,
html[dir="ltr"] .otp-register-fields .group.filled label,
html[dir="ltr"] .otp-register-fields .group label,
[dir="ltr"] .otp-register-fields .group.regular-field label,
[dir="ltr"] .otp-register-fields .group.filled label {
    text-align: left !important;
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
}

/* ===== DYNAMIC FIELDS STYLING (from makefields.tpl) ===== */
.otp-register-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
}

/* Make firstname and lastname side by side */
.otp-register-fields #regular-field-firstname,
.otp-register-fields #regular-field-lastname {
    flex: 1;
    min-width: calc(50% - 6px);
}

/* Full width for other fields */
.otp-register-fields #regular-field-telephone,
.otp-register-fields #regular-field-email,
.otp-register-fields #regular-field-password,
.otp-register-fields #regular-field-confirm,
.otp-register-fields .group.regular-field:not(#regular-field-firstname):not(#regular-field-lastname) {
    flex: 0 0 100%;
}

/* ============================================
   CHECKOUT LOGIN FORM STYLING
   ============================================ */

/* Style login form groups */
#xlogin-panel .group {
    margin-bottom: 16px;
    position: relative;
    display: block !important;
}

#xlogin-panel .group label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    margin-bottom: 8px !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Red asterisk for required login fields */
#xlogin-panel .group label::after {
    content: '*' !important;
    color: #EF4444 !important;
    margin-right: 4px !important;
    font-size: 14px !important;
}

/* Input icon wrapper - contains icon and input */
#xlogin-panel .group .input-icon-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    background: #fff !important;
    transition: border-color 0.2s ease !important;
    order: 1 !important;
}

#xlogin-panel .group .input-icon-wrapper:focus-within {
    border-color: #111 !important;
}

/* Input icon (email) */
#xlogin-panel .group .input-icon-wrapper .input-icon {
    font-size: 20px !important;
    color: #6B7280 !important;
    flex-shrink: 0 !important;
}

/* Password toggle icon */
#xlogin-panel .group .input-icon-wrapper .password-toggle {
    font-size: 20px !important;
    color: #6B7280 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: color 0.2s ease !important;
    user-select: none !important;
}

#xlogin-panel .group .input-icon-wrapper .password-toggle:hover {
    color: #111111 !important;
}

/* Input inside wrapper */
#xlogin-panel .group .input-icon-wrapper input.inputMaterial {
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    color: #111111 !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: 1.5 !important;
}

#xlogin-panel .group .input-icon-wrapper input.inputMaterial:focus {
    border: none !important;
    outline: none !important;
}

#xlogin-panel .group .input-icon-wrapper input.inputMaterial::placeholder {
    color: #9CA3AF !important;
}

/* Forgot password link styling */
#xlogin-panel .group a {
    display: block !important;
    font-size: 13px !important;
    color: #6B7280 !important;
    text-decoration: none !important;
    margin-top: 8px !important;
}

#xlogin-panel .group a:hover {
    color: #111111 !important;
    text-decoration: underline !important;
}

/* Login button styling */
#xlogin-panel .buttons {
    margin-top: 15px;
}

#xlogin-panel .buttons .btn-success,
#xlogin-panel .buttons input[type="submit"] {
    width: 100% !important;
    padding: 14px 24px !important;
    background: #111111 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

#xlogin-panel .buttons .btn-success:hover,
#xlogin-panel .buttons input[type="submit"]:hover {
    background: #333333 !important;
}

/* Section heading styling */
#tab-login .section-heading {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    text-align: center !important;
    margin-bottom: 24px !important;
}

/* ============================================
   CHECKOUT REGISTRATION FORM STYLING
   ============================================ */

/* Style all input groups in registration */
.otp-register-fields .group.regular-field,
.otp-register-fields .group.filled {
    margin-bottom: 16px;
    position: relative;
    display: flex !important;
    flex-direction: column-reverse !important;
}

.otp-register-fields .group.regular-field label,
.otp-register-fields .group.filled label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    margin-bottom: 8px !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    background: transparent !important;
    padding: 0 !important;
    order: 2 !important;
    pointer-events: auto !important;
}

.otp-register-fields .group.regular-field label .required,
.otp-register-fields .group.regular-field label span.required,
.otp-register-fields .group label span.required {
    color: #EF4444 !important;
    font-size: 14px !important;
}

/* Add single asterisk via ::before */
.otp-register-fields .group.regular-field label .required::before,
.otp-register-fields .group label span.required::before {
    content: '*' !important;
}

/* IMPORTANT: Hide the duplicate asterisk from original xtensions.css */
.otp-register-fields .group.regular-field label .required::after,
.otp-register-fields .group.regular-field label span.required::after,
.otp-register-fields .group label span.required::after,
.otp-register-fields .group label>span.required::after {
    content: '' !important;
    display: none !important;
}

.otp-register-fields .group.regular-field input.inputMaterial,
.otp-register-fields .group.filled input.inputMaterial {
    width: 100% !important;
    padding: 14px !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #111111 !important;
    background: #fff !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: 1.5 !important;
    order: 1 !important;
}

.otp-register-fields .group.regular-field input.inputMaterial:focus,
.otp-register-fields .group.filled input.inputMaterial:focus {
    border-color: #111 !important;
}

.otp-register-fields .group.regular-field input.inputMaterial::placeholder,
.otp-register-fields .group.filled input.inputMaterial::placeholder {
    color: #9CA3AF !important;
}

/* Help text styling */
.otp-register-fields .group.regular-field .help-text,
.otp-register-fields .group.filled .help-text {
    display: block !important;
    font-size: 12px !important;
    color: #6B7280 !important;
    margin-top: 6px !important;
    order: 0 !important;
}

/* Input icon wrapper for email and password fields in registration */
.otp-register-fields .group.regular-field .input-icon-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    background: #fff !important;
    transition: border-color 0.2s ease !important;
    order: 1 !important;
}

.otp-register-fields .group.regular-field .input-icon-wrapper:focus-within {
    border-color: #111 !important;
}

/* Input icon (email) */
.otp-register-fields .group.regular-field .input-icon-wrapper .input-icon {
    font-size: 20px !important;
    color: #6B7280 !important;
    flex-shrink: 0 !important;
}

/* Password toggle icon */
.otp-register-fields .group.regular-field .input-icon-wrapper .password-toggle {
    font-size: 20px !important;
    color: #6B7280 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: color 0.2s ease !important;
    user-select: none !important;
}

.otp-register-fields .group.regular-field .input-icon-wrapper .password-toggle:hover {
    color: #111111 !important;
}

/* Input inside wrapper */
.otp-register-fields .group.regular-field .input-icon-wrapper input.inputMaterial {
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    color: #111111 !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: 1.5 !important;
}

.otp-register-fields .group.regular-field .input-icon-wrapper input.inputMaterial:focus {
    border: none !important;
    outline: none !important;
}

/* Phone field with country code in registration */
.otp-register-fields #regular-field-telephone {
    position: relative;
}

.otp-register-fields #regular-field-telephone .intl-tel-input {
    width: 100% !important;
    display: block !important;
}

.otp-register-fields #regular-field-telephone .intl-tel-input.separate-dial-code,
.otp-register-fields #regular-field-telephone .intl-tel-input.allow-dropdown {
    width: 100% !important;
}

.otp-register-fields #regular-field-telephone .intl-tel-input .flag-container {
    background: #F3F4F6 !important;
    left: 0 !important;
    right: auto !important;
    top: 25px !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    height: calc(100% - 2px) !important;
    max-height: 49px;
    padding: 0 !important;
    z-index: 100 !important;
    border-end-start-radius: 7px !important;
    border-start-start-radius: 7px !important;
    border-right: 1px solid #D1D5DB;
    margin: 0 1px;
}

.otp-register-fields #regular-field-telephone .intl-tel-input .selected-flag {
    display: flex !important;
    gap: 6px;
    align-items: center !important;
    padding: 5px !important;
    height: 100% !important;
    width: auto !important;
    min-width: 95px !important;
    background: transparent !important;
    border: none !important;
}

.otp-register-fields #regular-field-telephone .intl-tel-input .flag-container:hover {
    background: #E5E7EB !important;
}

.otp-register-fields #regular-field-telephone .intl-tel-input .iti-flag {
    position: relative;
    display: inline-block !important;
    transform: scale(1.3) !important;
    left: unset !important;
    margin: 0;
    order: 3;
}

.otp-register-fields #regular-field-telephone .intl-tel-input .selected-dial-code {
    display: inline-block !important;
    font-size: 14px !important;
    color: #374151 !important;
    font-weight: 500 !important;
    order: 2;
}

.otp-register-fields #regular-field-telephone .intl-tel-input .iti-arrow {
    position: relative !important;
    left: unset !important;
    right: unset !important;
    top: unset !important;
    margin-top: 2px !important;
    border-top-color: #6B7280 !important;
    display: block !important;
    order: 1;
}

.otp-register-fields #regular-field-telephone input#input-telephone {
    padding-left: 110px !important;
    padding-right: 14px !important;
    text-align: left !important;
    direction: ltr !important;
    letter-spacing: 1px;
}

.otp-register-fields #regular-field-telephone .intl-tel-input .country-list {
    border-radius: 8px !important;
    border: 1px solid #D1D5DB !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    max-height: 250px !important;
    z-index: 9999 !important;
    min-width: 300px;
}

.otp-register-fields #regular-field-telephone .intl-tel-input .country-list .country {
    padding: 10px 12px !important;
}

.otp-register-fields #regular-field-telephone .intl-tel-input .country-list .country:hover,
.otp-register-fields #regular-field-telephone .intl-tel-input .country-list .country.highlight {
    background: #F3F4F6 !important;
}

/* Phone field - ensure label on top with flex ordering */
.otp-register-fields #regular-field-telephone {
    display: flex !important;
    flex-direction: column !important;
}

.otp-register-fields #regular-field-telephone > label {
    order: 1 !important;
    width: 100% !important;
}

[dir="rtl"] .otp-register-fields #regular-field-telephone > label {
    text-align: right !important;
}

[dir="ltr"] .otp-register-fields #regular-field-telephone > label {
    text-align: left !important;
}

.otp-register-fields #regular-field-telephone > .intl-tel-input,
.otp-register-fields #regular-field-telephone > .iti {
    order: 2 !important;
}

/* Phone field errors - target all possible structures */
.otp-register-fields #regular-field-telephone .text-danger,
.otp-register-fields #regular-field-telephone .xerror,
#regular-field-telephone .text-danger,
#regular-field-telephone .xerror,
.otp-register-fields .intl-tel-input + .text-danger,
.otp-register-fields .intl-tel-input + .xerror,
.otp-register-fields .iti + .text-danger,
.otp-register-fields .iti + .xerror {
    order: 3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #FEF2F2 !important;
    border: 1px solid #FECACA !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    margin-top: 5px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #DC2626 !important;
    width: 100% !important;
}

/* Phone field error icon */
.otp-register-fields #regular-field-telephone .text-danger::before,
.otp-register-fields #regular-field-telephone .xerror::before,
#regular-field-telephone .text-danger::before,
#regular-field-telephone .xerror::before,
.otp-register-fields .intl-tel-input + .text-danger::before,
.otp-register-fields .intl-tel-input + .xerror::before,
.otp-register-fields .iti + .text-danger::before,
.otp-register-fields .iti + .xerror::before {
    content: '\e5c9';
    font-family: 'Material Symbols Outlined';
    font-size: 18px;
    color: #DC2626;
    flex-shrink: 0;
}

/* Select fields in registration */
.otp-register-fields .group.regular-field select.inputMaterial,
.otp-register-fields .group.filled select.inputMaterial {
    width: 100% !important;
    padding: 14px !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #111111 !important;
    background: #fff !important;
    outline: none !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 14px center !important;
    padding-left: 36px !important;
    order: 1 !important;
}

.otp-register-fields .group.regular-field select.inputMaterial:focus,
.otp-register-fields .group.filled select.inputMaterial:focus {
    border-color: #111 !important;
}

/* Hide labelselect decoration */
.otp-register-fields .group labelselect {
    display: none !important;
}

/* Hide the floating label animation effect - use static labels */
.otp-register-fields .group.regular-field.filled label,
.otp-register-fields .group.regular-field:focus-within label,
.otp-register-fields .group.filled label {
    top: auto !important;
    transform: none !important;
    font-size: 13px !important;
    position: relative !important;
    left: auto !important;
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 8px !important;
    order: 2 !important;
}

/* Captcha styling */
.otp-captcha-group {
    margin: 16px 0;
}

/* ===== MOBILE RESPONSIVE FOR REGISTRATION ===== */
@media (max-width: 480px) {
    .otp-register-container {
        border-radius: 0;
    }

    .otp-register-title {
        font-size: 16px;
    }

    .otp-register-subtitle {
        font-size: 13px;
    }

    .otp-register-row {
        flex-direction: column;
        gap: 0;
    }

    html[dir="rtl"] .otp-register-row {
        flex-direction: column;
    }

    .otp-register-btn {
        padding: 12px 20px;
        font-size: 14px;
    }

    /* Stack name fields on mobile */
    .otp-register-fields #regular-field-firstname,
    .otp-register-fields #regular-field-lastname {
        flex: 0 0 100%;
        min-width: 100%;
    }

    .login-section .group-half.group-left {
        padding-left: 0;
        padding-right: 0;
    }
    .login-section .group-half.group-right {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ============================================
   RTL FIXES FOR INPUT ICONS
   ============================================ */

/* RTL: Flip icon position - icons should be on left (start) in RTL */
[dir="rtl"] .input-icon-wrapper,
[dir="rtl"] #xlogin-panel .group .input-icon-wrapper,
[dir="rtl"] .otp-register-fields .group.regular-field .input-icon-wrapper {
    flex-direction: row-reverse !important;
}

/* RTL: Ensure icons stay on the correct side */
[dir="rtl"] .input-icon-wrapper .input-icon,
[dir="rtl"] .input-icon-wrapper .password-toggle {
    order: -1 !important;
}

/* ============================================
   HALF-WIDTH FIELDS (FIRSTNAME/LASTNAME)
   ============================================ */

/* Handle wrapper divs for half-width fields - move to TOP of form */
.otp-register-fields > .group-half {
    flex: 1 !important;
    min-width: calc(50% - 6px) !important;
    display: block !important;
}

/* Use negative order to place firstname/lastname at the START */
.otp-register-fields > .group-half.group-left {
    order: -2 !important;
}

.otp-register-fields > .group-half.group-right {
    order: -1 !important;
}

/* RTL: Keep firstname first, lastname second */
[dir="rtl"] .otp-register-fields > .group-half.group-left {
    order: -2 !important;
}

[dir="rtl"] .otp-register-fields > .group-half.group-right {
    order: -1 !important;
}

/* Inner fields inside wrappers - take full width of wrapper */
.otp-register-fields > .group-half .group.regular-field {
    width: 100% !important;
    flex: none !important;
    min-width: 100% !important;
}

/* Field half width - for side by side layout (direct children) */
.otp-register-fields > .group.field-half {
    flex: 1 !important;
    min-width: calc(50% - 6px) !important;
}

/* Use negative order to place firstname/lastname at the START */
.otp-register-fields > .group.field-half-start {
    order: -2 !important;
}

.otp-register-fields > .group.field-half-end {
    order: -1 !important;
}

/* RTL: Keep firstname first, lastname second */
[dir="rtl"] .otp-register-fields > .group.field-half-start {
    order: -2 !important;
}

[dir="rtl"] .otp-register-fields > .group.field-half-end {
    order: -1 !important;
}

/* Mobile: Stack half-width fields */
@media (max-width: 480px) {
    .otp-register-fields > .group-half,
    .otp-register-fields > .group.field-half {
        flex: 0 0 100% !important;
        min-width: 100% !important;
    }
}

/* ============================================
   CUSTOM FIELDS STYLING
   ============================================ */

/* Custom fields - full width and consistent styling */
.otp-register-fields .group.custom-field {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-bottom: 5px !important;
}

/* Custom field labels */
.otp-register-fields .group.custom-field label,
.otp-register-fields .group.custom-field .control-label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    margin-bottom: 8px !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Custom field required asterisk - match regular field styling */
.otp-register-fields .group.custom-field label .fieldlabel.required,
.otp-register-fields .group.custom-field.filled label .fieldlabel.required,
.otp-register-fields .form-group.custom-field .control-label .fieldlabel.required {
    color: #EF4444 !important;
    font-size: 14px !important;
}

.otp-register-fields .group.custom-field label .fieldlabel.required::before,
.otp-register-fields .group.custom-field.filled label .fieldlabel.required::before,
.otp-register-fields .form-group.custom-field .control-label .fieldlabel.required::before {
    content: '*' !important;
}

/* Custom field inputs */
.otp-register-fields .group.custom-field input.inputMaterial,
.otp-register-fields .group.custom-field textarea.inputMaterial {
    width: 100% !important;
    padding: 14px !important;
    font-size: 14px !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #111111 !important;
    transition: border-color 0.2s ease !important;
}

.otp-register-fields .group.custom-field input.inputMaterial:focus,
.otp-register-fields .group.custom-field textarea.inputMaterial:focus {
    border-color: #111 !important;
    outline: none !important;
}

/* Custom field select */
.otp-register-fields .group.custom-field select.inputMaterial {
    width: 100% !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #111111 !important;
    appearance: none !important;
    cursor: pointer !important;
    text-overflow: ellipsis !important;
}

/* Custom field radio/checkbox groups */
.otp-register-fields .form-group.custom-field {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-bottom: 16px !important;
    padding: 16px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    background: #FAFAFA !important;
}

.otp-register-fields .form-group.custom-field .control-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin-bottom: 12px !important;
}

.otp-register-fields .form-group.custom-field .checkbox,
.otp-register-fields .form-group.custom-field .radio {
    margin: 8px 0 !important;
}

.otp-register-fields .form-group.custom-field label.pointer {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    color: #374151 !important;
    cursor: pointer !important;
}

/* ============================================
   CUSTOM FIELD CHECKBOXES - Newsletter & Agree
   ============================================ */

/* Checkbox custom field container */
.otp-register-fields .form-group.custom-field.ischeckbox {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
}

/* Hide the control-label header for single-option checkboxes (newsletter, agree) */
.otp-register-fields .form-group.custom-field.ischeckbox > .control-label {
    display: none !important;
}

/* Checkbox row container */
.otp-register-fields .form-group.custom-field.ischeckbox .checkbox.is_checkbox {
    margin: 0 !important;
    padding: 0 !important;
}

/* Checkbox label - base styles */
.otp-register-fields .form-group.custom-field.ischeckbox .checkbox.is_checkbox label {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #374151 !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* RTL: Text aligns right */
[dir="rtl"] .otp-register-fields .form-group.custom-field.ischeckbox .checkbox.is_checkbox label {
    text-align: right !important;
}

/* The actual checkbox input - custom styled */
.otp-register-fields .form-group.custom-field.ischeckbox .input-checkbox {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    border: 2px solid #D1D5DB !important;
    border-radius: 4px !important;
    background: #fff !important;
    cursor: pointer !important;
    position: relative !important;
    margin: 0 !important;
    margin-top: 3px !important;
    transition: all 0.2s ease !important;
    /* LTR: checkbox on left */
    float: left !important;
    margin-right: 10px !important;
}

/* RTL: checkbox on right */
[dir="rtl"] .otp-register-fields .form-group.custom-field.ischeckbox .input-checkbox {
    float: right !important;
    margin-right: 0 !important;
    margin-left: 10px !important;
}

/* Checkbox hover state */
.otp-register-fields .form-group.custom-field.ischeckbox .input-checkbox:hover {
    border-color: #9CA3AF !important;
}

/* Checkbox checked state */
.otp-register-fields .form-group.custom-field.ischeckbox .input-checkbox:checked {
    background: #111111 !important;
    border-color: #111111 !important;
}

/* Checkbox checkmark */
.otp-register-fields .form-group.custom-field.ischeckbox .input-checkbox:checked::after {
    content: '' !important;
    position: absolute !important;
    top: 2px !important;
    left: 6px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

/* RTL checkmark position */
[dir="rtl"] .otp-register-fields .form-group.custom-field.ischeckbox .input-checkbox:checked::after {
    left: auto !important;
    right: 6px !important;
}

/* Links inside checkbox labels (privacy policy) */
.otp-register-fields .form-group.custom-field.ischeckbox label a {
    color: #111111 !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
}

.otp-register-fields .form-group.custom-field.ischeckbox label a:hover {
    color: #374151 !important;
}

/* ============================================
   VALIDATION ERROR MESSAGES - REGISTER FORM
   ============================================ */

/* Ensure group containers can wrap errors below inputs */
/* Note: Do NOT include .form-group here as it overrides inline display:none on customer_group */
.otp-register-fields .group.regular-field,
.otp-register-fields .group.filled,
.otp-register-fields .group.custom-field,
.otp-register-fields .group.custom-field.filled,
#xlogin-panel .group,
#panel-register .group,
#step_login_panel .group {
    display: flex !important;
    flex-direction: column !important;
}

/* Labels should appear FIRST (top) - order 1 */
.otp-register-fields .group.regular-field > label,
.otp-register-fields .group.filled > label,
.otp-register-fields .group.custom-field > label,
.otp-register-fields .group.custom-field.filled > label,
#xlogin-panel .group > label,
#panel-register .group > label,
#step_login_panel .group > label {
    order: 1 !important;
}

/* Inputs and input wrappers should appear SECOND - order 2 */
.otp-register-fields .group.regular-field > input,
.otp-register-fields .group.regular-field > select,
.otp-register-fields .group.regular-field > textarea,
.otp-register-fields .group.regular-field > .input-icon-wrapper,
.otp-register-fields .group.regular-field > .iti,
.otp-register-fields .group.regular-field > .intl-tel-input,
.otp-register-fields .group.filled > select,
.otp-register-fields .group.filled > input,
.otp-register-fields .group.custom-field > select,
.otp-register-fields .group.custom-field > input,
.otp-register-fields .group.custom-field.filled > select,
#xlogin-panel .group > input,
#xlogin-panel .group > .input-icon-wrapper,
#panel-register .group > input,
#panel-register .group > .input-icon-wrapper,
#step_login_panel .group > input,
#step_login_panel .group > .input-icon-wrapper {
    order: 2 !important;
}

/* Footer separator and links should appear THIRD - order 3 */
#xlogin-panel .group > .footer-separator,
#xlogin-panel .group > a,
#panel-register .group > .footer-separator,
#panel-register .group > a,
#step_login_panel .group > .footer-separator,
#step_login_panel .group > a {
    order: 3 !important;
}

/* Input wrapper should not grow to take error space */
.otp-register-fields .group .input-icon-wrapper,
#xlogin-panel .group .input-icon-wrapper {
    flex-shrink: 0 !important;
}

/* All validation errors - direct children of group, positioned OUTSIDE input wrapper */
.otp-register-fields .group.regular-field > .text-danger,
.otp-register-fields .group.regular-field > .xerror,
.otp-register-fields .group.filled > .text-danger,
.otp-register-fields .group.filled > .xerror,
.otp-register-fields > .group-half .group.regular-field > .text-danger,
#xlogin-panel .group > .text-danger,
#xlogin-panel .group > .xerror,
#panel-register .group > .text-danger,
#panel-register .group > .xerror,
#step_login_panel .group > .text-danger,
#step_login_panel .group > .xerror {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #FEF2F2 !important;
    border: 1px solid #FECACA !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    margin-top: 5px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #DC2626 !important;
    order: 4 !important; /* Errors appear FOURTH (bottom) after label, input, and footer links */
    width: 100% !important;
}

/* Move error messages out of input-icon-wrapper visually */
.otp-register-fields .input-icon-wrapper .text-danger,
.otp-register-fields .input-icon-wrapper .xerror,
#xlogin-panel .input-icon-wrapper .text-danger {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #FEF2F2 !important;
    border: 1px solid #FECACA !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #DC2626 !important;
    z-index: 10 !important;
    font-weight: 500;
}

/* Make input-icon-wrapper position relative for absolute errors */
.otp-register-fields .input-icon-wrapper,
#xlogin-panel .input-icon-wrapper {
    position: relative !important;
}

/* Add margin-bottom to group when it has error inside wrapper */
.otp-register-fields .group:has(.input-icon-wrapper .text-danger),
.otp-register-fields .group:has(.input-icon-wrapper .xerror),
#xlogin-panel .group:has(.input-icon-wrapper .text-danger) {
    margin-bottom: 60px !important;
}

/* Add error icon before validation message */
.otp-register-fields .text-danger::before,
.otp-register-fields .xerror::before,
#xlogin-panel .text-danger::before,
#xlogin-panel .xerror::before,
#panel-register .text-danger::before,
#panel-register .xerror::before {
    content: '\e5c9';
    font-family: 'Material Symbols Outlined';
    font-size: 18px;
    color: #DC2626;
    flex-shrink: 0;
}

/* Error state for inputs */
.otp-register-fields .has-error input.inputMaterial,
.otp-register-fields .has-error select.inputMaterial,
.otp-register-fields .has-error textarea.inputMaterial,
.otp-register-fields input.inputMaterial.error,
.otp-register-fields select.inputMaterial.error {
    border-color: #DC2626 !important;
    background: #FFFBFB !important;
}

/* Error state focus */
.otp-register-fields .has-error input.inputMaterial:focus,
.otp-register-fields input.inputMaterial.error:focus {
    border-color: #DC2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

/* Phone field specific error styling */
.otp-register-fields .group .iti + .text-danger,
.otp-register-fields .group .phone-wrapper + .text-danger {
    margin-top: 8px !important;
}

/* Alert boxes in forms */
.otp-register-fields .alert,
#panel-register .alert {
    border-radius: 8px !important;
    padding: 12px 14px !important;
    margin-bottom: 16px !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
}

.otp-register-fields .alert-danger,
#panel-register .alert-danger {
    background: #FEF2F2 !important;
    border: 1px solid #FECACA !important;
    color: #DC2626 !important;
}

.otp-register-fields .alert-success,
#panel-register .alert-success {
    background: #F0FDF4 !important;
    border: 1px solid #BBF7D0 !important;
    color: #16A34A !important;
}

.otp-register-fields .alert-warning,
#panel-register .alert-warning {
    background: #FFFBEB !important;
    border: 1px solid #FDE68A !important;
    color: #D97706 !important;
}

/* RTL adjustments for error messages */
[dir="rtl"] .otp-register-fields .text-danger,
[dir="rtl"] .otp-register-fields .xerror,
[dir="rtl"] #xlogin-panel .text-danger,
[dir="rtl"] #xlogin-panel .xerror,
[dir="rtl"] #panel-register .text-danger,
[dir="rtl"] #panel-register .xerror {
    text-align: right !important;
}

/* Half-width fields error - ensure error spans full width */
.otp-register-fields > .group-half .text-danger,
.otp-register-fields > .group.field-half .text-danger,
.otp-register-fields > .group-half .xerror,
.otp-register-fields > .group.field-half .xerror {
    width: 100% !important;
}

/* ============================================
   STANDALONE LOGIN/ACCOUNT FOOTER REDESIGN
   ============================================ */

/* ===== FOOTER BAR ===== */
.standalone-footer {
    background: #fff;
    border-top: 1px solid #E5E7EB;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 100;
}

.standalone-footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    max-width: 100%;
    margin: 0 auto;
}

/* ===== SECURE BADGE (LEFT SIDE) ===== */
.footer-secure-badge {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-secure-badge .secure-icon {
    color: #22C55E;
    font-size: 20px;
    font-variation-settings: 'FILL' 1;
}

.footer-secure-badge .secure-text {
    font-size: 14px;
    font-weight: 500;
    color: #22C55E;
}

/* ===== CONTACT INFO (RIGHT SIDE) ===== */
.footer-contact-info {
    display: flex;
    align-items: center;
    gap: 24px;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #374151;
    font-size: 14px;
    transition: color 0.2s ease;
    cursor: pointer;
    position: relative;
    z-index: 10;
}

.footer-contact-item:hover {
    color: #111111;
    text-decoration: none;
}

.footer-contact-item .material-symbols-outlined {
    font-size: 18px;
    color: #6B7280;
}

.footer-contact-item .contact-text {
    font-weight: 400;
}

/* ===== RTL SUPPORT FOR FOOTER ===== */
html[dir="rtl"] .standalone-footer-bar {
    flex-direction: row-reverse;
}

html[dir="rtl"] .footer-secure-badge {
    flex-direction: row-reverse;
}

html[dir="rtl"] .footer-contact-info {
    flex-direction: row-reverse;
}

html[dir="rtl"] .footer-contact-item {
    flex-direction: row-reverse;
}

/* ===== MOBILE RESPONSIVE FOR FOOTER ===== */
@media (max-width: 768px) {
    .standalone-footer-bar {
        flex-direction: column;
        gap: 12px;
        padding: 12px 16px;
        text-align: center;
    }

    html[dir="rtl"] .standalone-footer-bar {
        flex-direction: column;
    }

    .footer-contact-info {
        flex-direction: column;
        gap: 10px;
    }

    html[dir="rtl"] .footer-contact-info {
        flex-direction: column;
    }

    /* Add bottom spacing to login card when footer bar is present */
    #step_login_panel .login-section,
    #step_login_panel #loginPage {
        margin-bottom: 8px;
    }

    .account-single-card {
        margin-bottom: 8px;
    }

    .otp-verify-subtitle {
        font-size: 13px;
        line-height: 2.2; /* to space out the newline badge text */
    }

    .otp-verify-contact {
        font-size: 13px;
        padding: 2px 10px;
    }
}

@media (max-width: 480px) {
    .standalone-footer-bar {
        gap: 8px;
        padding: 10px 12px;
    }

    .footer-secure-badge .secure-text {
        font-size: 12px;
    }

    .footer-contact-item {
        font-size: 12px;
    }

    .footer-contact-info {
        gap: 8px;
    }

    .footer-secure-badge .secure-icon {
        font-size: 18px;
    }

    .footer-contact-item .material-symbols-outlined {
        font-size: 16px;
    }
}