/* ============================================
   ITAFX Checkout - Exact React CSS
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* CSS Variables - Exact from React index.css */
:root {
    --background: 222 47% 6%;
    --foreground: 210 40% 98%;
    --card: 222 47% 9%;
    --card-foreground: 210 40% 98%;
    --popover: 222 47% 9%;
    --popover-foreground: 210 40% 98%;
    --primary: 142 76% 36%;
    --primary-foreground: 210 40% 98%;
    --secondary: 222 47% 14%;
    --secondary-foreground: 210 40% 98%;
    --muted: 222 47% 14%;
    --muted-foreground: 215 20% 65%;
    --accent: 225 73% 57%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;
    --border: 222 47% 18%;
    --input: 222 47% 14%;
    --ring: 225 73% 57%;
    --radius: 0.75rem;
    --success: 142 76% 36%;
    --success-foreground: 210 40% 98%;
    --selection-active: 225 73% 57%;
    --selection-inactive: 222 47% 14%;
    --neon-glow: 210 100% 60%;
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Base */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    background-color: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    min-height: 100vh;
}

a { color: hsl(var(--foreground)); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout */
.min-h-screen { min-height: 100vh; }
.bg-background { background-color: hsl(var(--background)); }
.flex { display: flex; }
.flex-col { flex-direction: column; }

/* Header */
.site-header {
    width: 100%;
    padding: 0.625rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid hsl(var(--border) / 0.5);
    background-color: hsl(var(--card) / 0.5);
    backdrop-filter: blur(8px);
}
.view-rules-btn {
    display: none;
}
@media (min-width: 640px) {
    .site-header { padding: 0.75rem 1.5rem; }
}
.header-logo img { height: 2rem; width: auto; }
@media (min-width: 640px) {
    .header-logo img { height: 2.5rem; }
}
.header-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.625rem;
    color: hsl(var(--muted-foreground));
}
@media (min-width: 640px) {
    .header-badges { gap: 1rem; font-size: 0.75rem; }
}
.header-badge {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.header-badge svg {
    width: 0.75rem;
    height: 0.75rem;
    color: hsl(var(--primary));
}
@media (min-width: 640px) {
    .header-badge svg { width: 0.875rem; height: 0.875rem; }
}
.header-badge span { display: none; }
@media (min-width: 640px) {
    .header-badge span { display: inline; }
}

/* Main */
.checkout-main {
    flex: 1;
    max-width: 72rem;
    margin: 0 auto;
    padding: 1rem 0.75rem;
    width: 100%;
}
@media (min-width: 640px) {
    .checkout-main { padding: 1.5rem 1rem; }
}
@media (min-width: 768px) {
    .checkout-main { padding: 1.5rem; }
}

/* Promo Banner */
.promo-banner {
    background-color: hsl(var(--secondary));
    border-radius: 1rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    border: 1px solid hsl(var(--border));
    margin-bottom: 1rem;
}
@media (min-width: 640px) {
    .promo-banner {
        flex-direction: row;
        justify-content: space-between;
        padding: 1.25rem 2rem;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
}
.promo-content { flex: 1; text-align: center; }
@media (min-width: 640px) {
    .promo-content { text-align: left; }
}
.promo-subtitle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}
@media (min-width: 640px) {
    .promo-subtitle { justify-content: flex-start; font-size: 1rem; }
}
.promo-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background-color: hsl(var(--accent));
}
.promo-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin-bottom: 0.75rem;
}
@media (min-width: 640px) { .promo-title { font-size: 1.5rem; } }
@media (min-width: 1024px) { .promo-title { font-size: 1.875rem; } }
.promo-mobile-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
@media (min-width: 640px) { .promo-mobile-actions { display: none; } }
.promo-badge {
    display: inline-block;
    background-color: hsl(var(--accent));
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.375rem 1rem;
    border-radius: 0.5rem;
}
.promo-code-text { font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
.promo-code-text strong { color: hsl(var(--foreground)); }
.promo-badge-desktop { display: none; }
@media (min-width: 640px) {
    .promo-badge-desktop { display: flex; margin-top: 0.75rem; }
}
.promo-description {
    display: none;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.75rem;
}
@media (min-width: 640px) { .promo-description { display: block; font-size: 1rem; } }
.promo-description strong { color: hsl(var(--foreground)); }
.promo-card {
    display: none;
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 140px;
}
@media (min-width: 640px) { .promo-card { display: flex; min-width: 160px; } }
.promo-card-code { font-size: 0.75rem; color: hsl(var(--muted-foreground)); font-weight: 500; }
.promo-card-discount { font-size: 1.25rem; font-weight: 700; color: hsl(var(--foreground)); }
@media (min-width: 640px) { .promo-card-discount { font-size: 1.5rem; } }
.promo-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: hsl(var(--foreground));
    color: hsl(var(--background));
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0.25rem;
}
.promo-copy-btn:hover { opacity: 0.9; }

/* Grid Layout */
.checkout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .checkout-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (min-width: 1024px) {
    .checkout-grid { grid-template-columns: 2fr 3fr; gap: 1.5rem; }
}
.checkout-left, .checkout-right {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .checkout-left, .checkout-right { gap: 1rem; }
}

/* Cards - Exact from React */
.checkout-card {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 0.75rem;
    box-shadow: 0 0 20px -5px hsl(var(--neon-glow) / 0.15), 0 0 40px -10px hsl(var(--neon-glow) / 0.1);
}
@media (min-width: 640px) { .checkout-card { padding: 1rem; } }
@media (min-width: 768px) { .checkout-card { padding: 1.25rem; } }

.checkout-card-highlight {
    background: linear-gradient(to bottom right, hsl(var(--card)), hsl(var(--card) / 0.8));
    border: 1px solid hsl(var(--primary) / 0.3);
    border-radius: var(--radius);
    padding: 0.75rem;
    box-shadow: 0 10px 15px -3px hsl(var(--primary) / 0.05);
}
@media (min-width: 640px) { .checkout-card-highlight { padding: 1rem; } }

/* Product Selector */
.product-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
@media (min-width: 640px) { .product-header { margin-bottom: 1rem; } }
.product-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin: 0;
}
@media (min-width: 640px) { .product-title { font-size: 1rem; } }
.product-description {
    font-size: 0.625rem;
    color: hsl(var(--muted-foreground));
    margin-top: 0.125rem;
}
@media (min-width: 640px) { .product-description { font-size: 0.75rem; } }
.view-rules-btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    color: hsl(var(--muted-foreground));
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}
@media (min-width: 640px) { .view-rules-btn { font-size: 0.75rem; } }
.view-rules-btn:hover { color: hsl(var(--foreground)); }
.view-rules-btn span { display: none; }
@media (min-width: 640px) { .view-rules-btn span { display: inline; } }

.selector-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.selector-label {
    font-size: 0.625rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.size-buttons button.btn-disable {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
    display: none;
}
@media (min-width: 640px) { .selector-label { font-size: 0.75rem; } }
.selector-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.375rem;
}
@media (min-width: 640px) { .selector-buttons { gap: 0.5rem; } }
.selector-buttons.size-buttons {
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
    .selector-buttons.size-buttons { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .selector-buttons.size-buttons { grid-template-columns: repeat(4, 1fr); }
}

/* Selection Button - Exact from React */
.selection-btn {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s;
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    cursor: pointer;
    text-align: center;
}
@media (min-width: 640px) {
    .selection-btn { padding: 0.625rem 0.75rem; font-size: 0.875rem; }
}
.selection-btn:hover { border-color: hsl(var(--accent) / 0.5); }
.selection-btn.active {
    background-color: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
    border-color: hsl(var(--accent));
    box-shadow: 0 4px 6px -1px hsl(var(--accent) / 0.2);
}

.platform-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    border-top: 1px solid hsl(var(--border) / 0.5);
}
.platform-label { font-size: 0.625rem; color: hsl(var(--muted-foreground)); }
@media (min-width: 640px) { .platform-label { font-size: 0.75rem; } }
.platform-value { font-size: 0.75rem; font-weight: 500; color: hsl(var(--foreground)); }
@media (min-width: 640px) { .platform-value { font-size: 0.875rem; } }

/* Variation Notice */
.variation-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.variation-notice.success {
    background-color: hsl(var(--success) / 0.15);
    border: 1px solid hsl(var(--success) / 0.3);
}
.variation-notice.success .notice-icon {
    color: hsl(var(--success));
}
.variation-notice.error {
    background-color: hsl(var(--destructive) / 0.15);
    border: 1px solid hsl(var(--destructive) / 0.3);
}
.variation-notice.error .notice-icon {
    color: hsl(var(--destructive));
}
.variation-notice .notice-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}
.variation-notice .notice-text {
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    font-weight: 500;
}
.variation-notice.hidden {
    display: none;
}

/* Order Summary */
.order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid hsl(var(--border) / 0.3);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}
.order-header-title {
    font-size: 0.75rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.coupons-tested-badge {
    font-size: 0.75rem;
    background-color: hsl(var(--success) / 0.2);
    color: hsl(var(--success));
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}
.order-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.order-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.order-label { font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
.order-value { font-size: 0.875rem; font-weight: 500; color: hsl(var(--foreground)); }
.order-value.strikethrough { text-decoration: line-through; color: hsl(var(--muted-foreground)); }

/* Coupon Section */
.coupon-section { margin-bottom: 1rem; }
.coupon-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    margin-bottom: 0.75rem;
}
.coupon-input-row { display: flex; gap: 0.5rem; }

/* Input Field - Exact from React */
.input-field {
    width: 100%;
    background-color: hsl(var(--input));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    outline: none;
    transition: all 0.2s;
}
.input-field::placeholder { color: hsl(var(--muted-foreground)); }
.input-field:focus {
    outline: none;
    box-shadow: 0 0 0 2px hsl(var(--primary) / 0.5);
    border-color: hsl(var(--primary));
}
.input-field-sm {
    flex: 1;
    background-color: hsl(var(--input));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    color: hsl(var(--foreground));
    outline: none;
    text-transform: uppercase;
}
.input-field-sm::placeholder { color: hsl(var(--muted-foreground)); text-transform: none; }
.input-field-sm:focus {
    box-shadow: 0 0 0 1px hsl(var(--primary) / 0.5);
    border-color: hsl(var(--primary));
}

/* Apply Button */
.apply-btn {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    min-width: 70px;
    transition: all 0.2s;
}
.apply-btn:hover { background-color: hsl(var(--secondary) / 0.8); }
.apply-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.apply-btn.loading { pointer-events: none; }

.coupon-error {
    font-size: 0.75rem;
    color: hsl(var(--destructive));
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Tested Coupons */
.tested-coupons { margin-bottom: 1rem; }
.tested-label { font-size: 0.75rem; color: hsl(var(--muted-foreground)); display: block; margin-bottom: 0.5rem; }
.tested-coupon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid hsl(var(--border) / 0.3);
    background-color: hsl(var(--muted) / 0.2);
    margin-bottom: 0.5rem;
}
.tested-coupon.best {
    background-color: hsl(var(--success) / 0.1);
    border-color: hsl(var(--success) / 0.4);
}
.tested-coupon-left { display: flex; align-items: center; gap: 0.5rem; }
.tested-coupon-icon { width: 1rem; height: 1rem; color: hsl(var(--success)); }
.tested-coupon-rank { font-size: 0.625rem; color: hsl(var(--muted-foreground)); width: 1rem; text-align: center; }
.tested-coupon-info { display: flex; flex-direction: column; }
.tested-coupon-code { display: flex; align-items: center; gap: 0.375rem; }
.tested-coupon-code-text { font-size: 0.75rem; font-weight: 700; color: hsl(var(--foreground)); }
.tested-coupon.best .tested-coupon-code-text { color: hsl(var(--success)); }
.tested-coupon-applied {
    font-size: 0.625rem;
    background-color: hsl(var(--success));
    color: white;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-weight: 500;
}
.tested-coupon-percent { font-size: 0.625rem; color: hsl(var(--muted-foreground)); }
.tested-coupon-right { display: flex; align-items: center; gap: 0.5rem; }
.tested-coupon-amount { font-size: 0.75rem; font-weight: 600; color: hsl(var(--muted-foreground)); }
.tested-coupon.best .tested-coupon-amount { color: hsl(var(--success)); }
.tested-coupon-remove {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: hsl(var(--muted-foreground));
}
.tested-coupon-remove:hover { color: hsl(var(--destructive)); }

/* Order Total */
.order-total-section {
    border-top: 1px solid hsl(var(--border) / 0.5);
    padding-top: 0.75rem;
}
.discount-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: hsl(var(--success));
    margin-bottom: 0.5rem;
}
.discount-label { font-size: 0.875rem; font-weight: 500; }
.discount-value { font-size: 0.875rem; font-weight: 700; }
.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.total-label { font-size: 1rem; font-weight: 600; color: hsl(var(--foreground)); }
.total-value-wrapper { text-align: right; }
.total-value { font-size: 1.5rem; font-weight: 700; color: hsl(var(--primary)); }
.savings-text { font-size: 0.75rem; font-weight: 500; color: hsl(var(--success)); display: block; }

/* Step Cards */
.step-card { margin-bottom: 1rem; }
.step-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
@media (min-width: 640px) { .step-header { margin-bottom: 1rem; } }
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.step-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin: 0;
    flex: 1;
}
@media (min-width: 640px) { .step-title { font-size: 1rem; } }
.step-check { flex-shrink: 0; margin-left: auto; }
.step-content {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
@media (min-width: 640px) { .step-content { gap: 0.75rem; } }

/* Phone Field with Internal Country Selector */
.phone-field-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background-color: hsl(var(--input));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    transition: border-color 0.2s;
}
.phone-field-wrapper:focus-within {
    border-color: hsl(var(--accent));
    box-shadow: 0 0 0 2px hsl(var(--accent) / 0.1);
}
.phone-country-trigger {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0.5rem 0.625rem 0.75rem;
    background: none;
    border: none;
    border-right: 1px solid hsl(var(--border));
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;
}
.phone-country-trigger:hover {
    background-color: hsl(var(--muted) / 0.5);
}
.phone-country-flag {
    font-size: 1.125rem;
    line-height: 1;
}
.phone-country-code {
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
}
.phone-country-arrow {
    color: hsl(var(--muted-foreground));
    transition: transform 0.2s;
}
.phone-country-trigger.open .phone-country-arrow {
    transform: rotate(180deg);
}
.phone-input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    padding: 0.625rem 0.75rem !important;
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    outline: none !important;
    box-shadow: none !important;
}
.phone-input::placeholder {
    color: hsl(var(--muted-foreground));
}

/* Phone Dropdown */
.phone-dropdown {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    z-index: 100;
    box-shadow: 0 10px 40px -5px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.phone-dropdown-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-bottom: 1px solid hsl(var(--border));
}
.phone-dropdown-search svg {
    color: hsl(var(--muted-foreground));
    flex-shrink: 0;
}
.phone-dropdown-search-input {
    flex: 1;
    background: transparent;
    border: none;
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    outline: none;
}
.phone-dropdown-search-input::placeholder {
    color: hsl(var(--muted-foreground));
}
.phone-dropdown-list {
    max-height: 240px;
    overflow-y: auto;
}
.phone-dropdown-list::-webkit-scrollbar {
    width: 6px;
}
.phone-dropdown-list::-webkit-scrollbar-track {
    background: hsl(var(--muted));
}
.phone-dropdown-list::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 3px;
}
.phone-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    color: hsl(var(--foreground));
    font-size: 0.875rem;
    text-align: left;
    transition: background-color 0.15s;
}
.phone-dropdown-item:hover {
    background-color: hsl(var(--muted));
}
.phone-dropdown-item.selected {
    background-color: hsl(var(--accent) / 0.15);
}
.phone-dropdown-item .item-flag {
    font-size: 1.25rem;
    line-height: 1;
}
.phone-dropdown-item .item-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.phone-dropdown-item .item-code {
    color: hsl(var(--muted-foreground));
    font-size: 0.75rem;
    font-weight: 500;
}

/* Hide external intl-tel-input plugin elements */
.iti,
.iti--allow-dropdown,
.iti--separate-dial-code,
.intl-tel-input {
    display: none !important;
}
.iti__flag-container,
.iti__selected-flag,
.iti__arrow,
.iti__country-list,
.iti__dropdown-content,
.intl-tel-input .flag-container,
.intl-tel-input .selected-flag,
.intl-tel-input .country-list {
    display: none !important;
}

/* Select Wrapper */
.select-wrapper { position: relative; }
.select-wrapper select { appearance: none; padding-right: 2.5rem; cursor: pointer; }
.select-chevron {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: hsl(var(--muted-foreground));
    pointer-events: none;
}

/* Input with Loader */
.input-loader-wrapper { position: relative; }
.input-loader {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    border: 2px solid hsl(var(--border));
    border-top-color: hsl(var(--primary));
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }

/* Link Button */
.link-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    text-decoration: underline;
    text-align: left;
}
.link-btn:hover { color: hsl(var(--foreground)); }

/* Two Columns */
.two-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.625rem;
}
@media (min-width: 640px) {
    .two-cols { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
}

/* Payment Methods */
.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.payment-method {
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}
@media (min-width: 640px) { .payment-method { padding: 1rem; } }
.payment-method:hover { border-color: hsl(var(--primary) / 0.5); }
.payment-method.active {
    border-color: hsl(var(--primary));
    background-color: hsl(var(--primary) / 0.05);
}
.payment-method-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.payment-radio {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid hsl(var(--muted-foreground));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.payment-radio svg { display: none; color: white; }
.payment-radio.checked {
    border-color: hsl(var(--primary));
    background-color: hsl(var(--primary));
}
.payment-radio.checked svg { display: block; }
.payment-icon { flex-shrink: 0; }
.payment-icon.bitcoin { color: #f7931a; }
.payment-icon.card { color: hsl(var(--accent)); }
.payment-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    cursor: pointer;
}
.payment-box {
    margin-top: 0.75rem;
    margin-left: 1.75rem;
    padding: 0.75rem;
    background-color: hsl(var(--card) / 0.5);
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    animation: slideIn 0.2s ease-out;
}
@keyframes slideIn {
    from { opacity: 0; transform: translateY(-0.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

/* Crypto Select */
.crypto-select-wrapper { position: relative; }
.crypto-icon-placeholder {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: hsl(var(--muted-foreground));
}
.crypto-select {
    width: 100%;
    background-color: hsl(var(--input));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    padding: 0.625rem 2.5rem 0.625rem 2.5rem;
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    appearance: none;
    cursor: pointer;
}

/* Paytiko Info */
.paytiko-info {}
.paytiko-header { display: flex; align-items: center; gap: 0.75rem; }
.paytiko-logo { width: 2rem; height: 2rem; }
.paytiko-text p { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin: 0; }
.paytiko-secure { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.25rem; }
.paytiko-secure svg { color: hsl(var(--success)); }
.paytiko-secure span { font-size: 0.625rem; color: hsl(var(--success)); }
.paytiko-cards {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid hsl(var(--border));
}
.card-logo {
    background-color: white;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
}
.card-logo span { font-size: 0.75rem; font-weight: 700; }
.card-logo.visa span { color: #1a1f71; }
.card-logo.mastercard span { color: #eb001b; }
.card-logo.paypal span { color: #003087; }

/* Payment Footer */
.payment-footer {
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
}

/* Discount Summary */
.discount-summary {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: hsl(var(--success) / 0.1);
    border: 1px solid hsl(var(--success) / 0.3);
    border-radius: 0.5rem;
}
.discount-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.discount-coupon-text { font-size: 0.875rem; font-weight: 500; color: hsl(var(--success)); }
.discount-coupon-amount { font-size: 0.875rem; font-weight: 700; color: hsl(var(--success)); }
.discount-summary-totals {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

/* Terms */
.terms-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.terms-checkbox {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    border: 2px solid hsl(var(--muted-foreground));
    border-radius: 0.25rem;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.125rem;
    padding: 0;
}
.terms-checkbox:hover { border-color: hsl(var(--primary)); }
.terms-checkbox svg { display: none; color: white; }
.terms-checkbox.checked {
    background-color: hsl(var(--primary));
    border-color: hsl(var(--primary));
}
.terms-checkbox.checked svg { display: block; }
.terms-text {
    font-size: 0.625rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.5;
    margin: 0;
}
@media (min-width: 640px) { .terms-text { font-size: 0.75rem; } }
.terms-text a { color: hsl(var(--foreground)); font-weight: 500; }

/* CTA Button - Exact from React */
.cta-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(to right, hsl(var(--primary)), hsl(var(--primary) / 0.8));
    color: hsl(var(--primary-foreground));
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.875rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 10px 15px -3px hsl(var(--primary) / 0.3);
}
@media (min-width: 640px) { .cta-button { font-size: 1rem; } }
.cta-button:hover:not(:disabled) {
    background: linear-gradient(to right, hsl(var(--primary) / 0.9), hsl(var(--primary)));
    box-shadow: 0 10px 15px -3px hsl(var(--primary) / 0.4);
}
.cta-button:disabled { opacity: 0.5; cursor: not-allowed; }
.cta-button .btn-loader { display: flex; align-items: center; gap: 0.5rem; }
.spinner { animation: spin 1s linear infinite; }

/* Trust Badge */
.trust-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 0.75rem;
    font-size: 0.625rem;
    color: hsl(var(--muted-foreground));
}
@media (min-width: 640px) { .trust-badge { font-size: 0.75rem; } }

/* Footer */
.site-footer {
    padding: 1.5rem;
    text-align: center;
    border-top: 1px solid hsl(var(--border));
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

/* Utilities */
.hidden { display: none !important; }


.select2-dropdown {
  background-color: rgb(11	15	28);
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-top: none;
}
.select2-container {
    vertical-align: text-bottom;
}
.select2-container--default .select2-selection--single {
  background-color: hsl(var(--input)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.5rem !important;
  height: 38px;
  font-size: 0.875rem;
  padding: 0;
  color: hsl(var(--foreground));
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: hsl(var(--foreground)) !important;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 37px !important;
  padding: 0 0.75rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: hsl(var(--foreground));
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid hsl(var(--border));
    padding: 6px;
    background-color: hsl(var(--secondary));
    color: hsl(var(--foreground));
    border-radius: 5px;
}

.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[data-selected=true] {
    background-color: hsl(var(--accent));
}

.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] {
  background-color: hsl(var(--accent));
  color: hsl(var(--foreground));
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 13px;
  top: 12px;
  right: 6px;
}


/* Dark theme scrollbar for Select2 dropdown */
.select2-results > .select2-results__options {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #AEC3BF hsl(var(--secondary)); /* thumb + track */
}

/* For Chrome, Edge, Safari */
.select2-results > .select2-results__options::-webkit-scrollbar {
  width: 6px;
}

.select2-results > .select2-results__options::-webkit-scrollbar-track {
  background: hsl(var(--secondary)); /* Track color (dark background) */
}

.select2-results > .select2-results__options::-webkit-scrollbar-thumb {
  background-color: #AEC3BF; /* Scrollbar thumb */
  border-radius: 10px;
}

.select2-results > .select2-results__options::-webkit-scrollbar-thumb:hover {
  background-color: #AEC3BF; /* Hover effect */
}

.address-fields .form-row {
    margin-bottom: 0.75rem;
}
ul.woocommerce-error {
    padding-left: 15px;
    margin-bottom: 12px;
}
.woocommerce-message {
    margin-bottom: 12px;
}

.woocommerce-thankyou-order-details {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    list-style: none;
    margin: 20px 0 40px 0;
}
.woocommerce-thankyou-order-details li {
    flex: 1;
    background-color: hsl(var(--input));
    border-radius: 10px;
    padding: 15px 20px;
}
.woocommerce-thankyou-order-details li strong {
    display: block;
}

p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
    font-size: 24px;
    font-weight: 500;
}
.order-received-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 40px;
}

.order-received-row .woocommerce-order-details, 
.order-received-row .woocommerce-customer-details {
    flex: calc(50% - 15%);
}

.order-received-row  .wc-item-meta {
    list-style: none;
}

.order-received-row .affiliate-signup {
    flex: 100%;
}

@media (max-width: 991px) {
    .order-received-row .woocommerce-order-details, 
    .order-received-row .woocommerce-customer-details {
        flex: 100%;
    }
}