/* CSS Variables - Design System */
:root {
    --primary-color: #efc75e;
    --primary-dark: #d4b347;
    --secondary-color: #000000;
    --background-color: #ffffff;
    --background-gradient: linear-gradient(135deg, #fef7e7 0%, #ffffff 100%);
    --text-primary: #000000;
    --text-secondary: #6b7280;
    --text-white: #ffffff;
    --border-color: #e5e7eb;
    --shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 40px -15px rgba(0, 0, 0, 0.15);
    --border-radius: 16px;
    --border-radius-lg: 24px;
    --transition: all 0.3s ease;
}

.form-card {
    color: #000;
}

.dk-v-core-ordering-form p {
    margin: 0;
}

.summary-content h3 {
    color: #000;
}

.form-card h2 {
    color: #000;
}

.form-card p {
    color: #000;
}

h3#kyc-status-message {
    color: #000;
}

/* Plan Additional Fees Styling */
.plan-additional-fees {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    font-size: 13px;
}

.plan-additional-fees .fee-item {
    color: #6c757d;
    margin: 5px 0;
    font-weight: 500;
}

.plan-additional-fees .fee-total {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #dee2e6;
    color: var(--text-primary);
    font-size: 14px;
}

.plan-additional-fees .fee-total strong {
    color: var(--primary-color);
}

/* Payment Breakdown Styling */
.payment-breakdown {
    background: #f8f9fa;
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: 20px;
    margin: 20px 0;
}

.payment-breakdown h4 {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #dee2e6;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.breakdown-item:last-of-type {
    border-bottom: none;
}


.breakdown-label {
    font-size: 14px;
    color: var(--text-primary);
}

.breakdown-amount {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

.breakdown-divider {
    height: 2px;
    background: var(--primary-color);
    margin: 15px 0;
    border-radius: 1px;
}

.breakdown-total {
    padding: 15px 0 10px;
    margin-top: 10px;
}

.breakdown-total .breakdown-label,
.breakdown-total .breakdown-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.breakdown-note {
    text-align: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #dee2e6;
}

.breakdown-note small {
    color: #6c757d;
    font-style: italic;
}

/* Stripe Checkout Elements Styling */
.checkout-form-container {
    margin: 20px 0;
    padding: 25px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--background-color);
    box-shadow: var(--shadow);
}

.checkout-section {
    margin-bottom: 20px;
}

.checkout-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.checkout-subtitle {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.stripe-checkout-container {
    margin-bottom: 15px;
    min-height: 40px;
}

.checkout-errors {
    color: #fa755a;
    font-size: 14px;
    margin-top: 10px;
    padding: 10px;
    border-radius: 6px;
    background: #fdf2f2;
    border: 1px solid #fecaca;
    display: none;
    animation: slideDown 0.3s ease-out;
}

.checkout-errors:empty {
    display: none !important;
}

#stripe-checkout-form {
    animation: fadeIn 0.4s ease-in-out;
}

/* Enhanced animations */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(15px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Checkout method tabs styling */
.checkout-form-container .Tab {
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    margin-bottom: 8px !important;
}

.checkout-form-container .Tab--selected {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(239, 199, 94, 0.1) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .checkout-form-container {
        margin: 15px 0;
        padding: 20px;
    }
    
    .checkout-title {
        font-size: 16px;
    }
}

/* Progress Header */
.progress-header {
    background: var(--secondary-color);
    color: var(--text-white);
    padding: 10px 0;
    display: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.progress-header.show {
    display: block;
    margin-bottom: -20px;
}

.progress-content {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    margin-bottom: 20px;
    min-height: 50px;
}

.progress-title {
    font-size: 1.25rem;
    font-weight: bold;
}

.progress-steps {
    display: flex;
    align-items: center;
    gap: 32px;
}

.progress-step {
    display: flex;
    align-items: center;
}

.step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #4b5563;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: bold;
    transition: var(--transition);
}

.progress-step.active .step-number,
.progress-step.completed .step-number {
    background: var(--primary-color);
    color: var(--secondary-color);
}

.progress-line {
    width: 32px;
    height: 2px;
    background: #4b5563;
    transition: var(--transition);
}

.progress-line.completed {
    background: var(--primary-color);
}

/* Main Content */

.step-section {
    display: none;
}

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

/* Hero Section */
.hero {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #374151 100%);
    color: var(--text-white);
    padding: 80px 0;
    display: block;
}

.hero-content {
    text-align: center;
}

.hero-title {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 24px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: #d1d5db;
    margin-bottom: 16px;
}

.hero-description {
    font-size: 1.125rem;
    color: #9ca3af;
    max-width: 768px;
    margin: 0 auto 64px;
    line-height: 1.75;
}

.hero-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card {
    text-align: center;
    transition: var(--transition);
}

.feature-card:hover {
    transform: scale(1.05);
}

.feature-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, #fbbf24 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 2rem;
    box-shadow: 0 8px 20px rgba(239, 199, 94, 0.3);
}

.feature-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.feature-text {
    color: #9ca3af;
    font-size: 0.875rem;
}

/* Section Headers */
.section-header {
    text-align: center;
    margin-bottom: 25px;
}

.section-title {
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 0px;
}

.section-subtitle {
    font-size: 16px;
    color: #ffffff;
}

/* Plans Grid */

.branch-icon svg {
    background-color: var(--primary-color);
    padding: 14px;
    border-radius: 100px;
    width: 60px;
    height: 60px;
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

.plan-card {
    background: var(--background-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--border-color);
    transition: var(--transition);
    position: relative;
    cursor: pointer;
}

.plan-card:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

/* Box Icon Styles - Using actual PNG images */
.box-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    padding-top: 10px;
    min-height: auto;
}

.box-icon-img {
    max-width: 150px;
    max-height: 90px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.plan-card:hover .box-icon-img {
    transform: translateY(-5px) scale(1.08);
}


.plan-popular {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(239, 199, 94, 0.2);
}

.plan-badge {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: var(--secondary-color);
    padding: 0px 22px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: bold;
}

.sale-badge {
    position: absolute;
    top: 15px;
    left: -8px;
    background: linear-gradient(135deg, #ff4444 0%, #cc0000 100%);
    color: white;
    padding: 6px 25px 6px 15px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
    transform: rotate(0deg);
}

.sale-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 9px 8px;
    border-color: transparent transparent #8b0000 transparent;
    transform: translateY(-100%);
}

.sale-badge::after {
    content: '';
    position: absolute;
    top: 0;
    right: -5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 14px 0 14px 8px;
    border-color: transparent transparent transparent #aa0000;
}

.plan-price-wrapper {
    min-height: 65px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.plan-price-regular {
    font-size: 16px;
    color: #999;
    margin-bottom: 5px;
}

.plan-price-regular del {
    text-decoration: line-through;
}

.plan-content {
    padding: 15px 15px;
    text-align: center;
    height: 100%;
}

.plan-name {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #000;
    line-height: 28px;
}

.plan-size {
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.plan-price {
    font-size: 32px;
    font-weight: bold;
    color: var(--text-primary);
}

.plan-price span {
    font-size: 16px;
    font-weight: normal;
    color: var(--text-secondary);
}

.plan-features {
    list-style: none;
    margin-bottom: 32px;
    text-align: left;
}

.plan-features li {
    padding: 8px 0;
    color: var(--text-secondary);
}

/* Branches Grid */
.branches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    margin: 0 auto;
    align-items: stretch;
}

.branch-card {
    background: var(--background-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    border: 2px solid transparent;
    padding: 12px;
    transition: var(--transition);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Pin action area to the bottom on equal-height cards */
.branch-card .btn,
.branch-card .branch-unavailable-cta {
    margin-top: auto;
}

.branch-card:hover {
    border-color: var(--primary-color);
    transform: scale(1.02);
}

/* Filial not yet open (e.g. Randers, read-only, matches button slot on sibling cards) */
.branch-card--unavailable {
    cursor: not-allowed;
    background: linear-gradient(180deg, #fffef9 0%, #ffffff 100%);
    border: 2px solid var(--border-color);
    box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.12);
}

.branch-card--unavailable:hover {
    border-color: var(--border-color);
    transform: none;
    box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.12);
}

/* Softer map pin; still on-brand, signals “not a choice” vs. solid gold on active cards */
.branch-icon--muted svg {
    background: linear-gradient(180deg, #e8d49a, #d4b96d);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    opacity: 0.88;
}

.branch-unavailable-cta {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-top: 4px;
    box-sizing: border-box;
}

/* Same full-width “slot” as .btn.btn-primary; dashed border = not a button */
.branch-unavailable-cta__badge {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 18px;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: var(--secondary-color);
    text-align: center;
    background: linear-gradient(180deg, rgba(239, 199, 94, 0.28) 0%, rgba(239, 199, 94, 0.12) 100%);
    border: 2px dashed var(--primary-dark);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.branch-unavailable-cta__hint {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #374151;
    margin: 0;
    line-height: 1.45;
    padding: 0 4px;
    max-width: 100%;
}

.branch-icon {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 10px;
}

.branch-name {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    color: #000;
}

.branch-details {
    margin-bottom: 10px;
}


.branch-details p {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    display: block;
    text-align: center;
}

.branch-card svg.dk-svg-icon {
    width: 22px;
}

/* Account Types Grid */
.account-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

.account-card {
    background: var(--background-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--border-color);
    padding: 15px 15px;
    transition: var(--transition);
    cursor: pointer;
    text-align: center;
}

.account-card:hover {
    border-color: var(--primary-color);
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

.account-icon {
    font-size: 4rem;
    margin-bottom: 24px;
}

.account-icon svg {
    background-color: var(--primary-color);
    padding: 14px;
    border-radius: 100px;
    width: 70px;
    height: 70px;
}

.account-name {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 16px;
    color: #000;
}

.account-description {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.account-features {
    list-style: none;
    text-align: left;
    margin-top: 20px;
}

.account-features li {
    padding: 4px 0;
    color: var(--text-secondary);
}

/* Form Styles */
.form-card {
    background: var(--background-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 15px;
    margin: 0 auto;
}

.plan-summary {
    background: linear-gradient(135deg, rgba(239, 199, 94, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%);
    border-radius: var(--border-radius);
    padding: 15px;
    margin-bottom: 32px;
}

p.plan-size {
    margin-bottom: 15px;
}

.summary-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summary-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.summary-value {
    font-weight: 600;
    text-transform: capitalize;
}

h3#selected-plan-name {
    font-size: 18px;
    margin-bottom: 0;
}

.form-fields {
    display: none;
}

.form-fields.active {
    display: block;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}


.form-group label {
    display: block;
    font-weight: 500;
    color: #000;
    margin-bottom: 8px;
}

.form-group input {
    width: 100%!important;
    /* padding: 12px 16px!important; */
    border: 1px solid var(--border-color)!important;
    border-radius: var(--border-radius)!important;
    font-size: 1rem!important;
    transition: var(--transition)!important;
    background-color: #fff!important;
    margin-bottom: 0px!important;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(239, 199, 94, 0.2);
}

/* Field Hint */
.field-hint {
    display: block;
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 4px;
    font-style: italic;
}

/* Field Error */
.field-error {
    display: block;
    font-size: 0.875rem;
    color: #dc3545;
    margin-top: 4px;
    font-weight: 500;
}

/* intl-tel-input Styling */
.iti {
    width: 100%;
    display: block;
}

.iti__input {
    width: 100% !important;
    padding: 12px 16px !important;
    padding-left: 52px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    font-size: 1rem !important;
    transition: var(--transition) !important;
    background-color: #fff !important;
    margin-bottom: 0px !important;
}

.iti__input:focus {
    outline: none;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(239, 199, 94, 0.2) !important;
}

.iti__input.error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1) !important;
}

.iti__country-container {
    position: absolute;
    z-index: 2;
}

.iti__selected-country {
    padding: 0 8px !important;
    background-color: #f8f9fa !important;
    border-right: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
}

.iti__selected-country:hover {
    background-color: #e9ecef !important;
}

.iti__country-list {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
}

.iti__country {
    padding: 8px 12px;
    transition: var(--transition);
}

.iti__country:hover,
.iti__country.iti__highlight {
    background-color: #f8f9fa;
}

.iti__selected-country-primary {
    display: flex;
    align-items: center;
    gap: 4px;
}

.iti__arrow {
    margin-left: 4px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #555;
}

.iti__arrow--up {
    border-top: none;
    border-bottom: 4px solid #555;
}

/* Processing Cards */
.processing-card {
    background: var(--background-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 32px;
    margin-bottom: 32px;
    text-align: center;
}

.processing-content {
    margin-bottom: 16px;
}

.status-icon {
    font-size: 4rem;
    margin-bottom: 42px;
}

.status-text {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.progress-bar {
    width: 100%;
    height: 16px;
    background: #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}

.progress-fill {
    height: 100%;
    background: var(--primary-color);
    width: 0%;
    transition: width 0.5s ease;
}

.processing-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
}

/* Instructions and Help */
.instructions-card {
    background: #fef9c3;
    border-radius: var(--border-radius);
    padding: 24px;
    margin-bottom: 32px;
}

.instructions-card h4 {
    font-weight: 600;
    margin-bottom: 16px;
    color: #000;
}


.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

@media (max-width: 768px) {
    .steps-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .instruction-step {
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
        padding: 10px;
    }
    
    .instruction-step .step-number {
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
        flex-shrink: 0;
    }
    
    .step-title {
        font-size: 0.9rem;
        margin-bottom: 2px;
    }
    
    .step-text {
        font-size: 0.8rem;
    }
}

div#kyc-status-icon svg {
    background-color: var(--primary-color);
    padding: 19px;
    border-radius: 100px;
    width: 80px;
    height: 80px;
}

svg.dk-svg-icon.dk-icon-external-link {
    width: 24px;
}

.instruction-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.instruction-step .step-number {
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    color: var(--secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    flex-shrink: 0;
}

.step-title {
    font-weight: 500;
    margin-bottom: 4px;
    color: #000;
}

svg.dk-svg-icon.dk-icon-refresh-ccw {
    width: 24px;
}

.step-text {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.help-section {
    background: #f9fafb;
    border-radius: var(--border-radius);
    padding: 24px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Payment Summary */
.payment-summary-card {
    background: var(--background-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 32px;
    margin-bottom: 32px;
    color: #000;
}

.payment-summary-card h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 24px;
    color: #000;
}

.summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 24px;
}

.summary-grid h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: #000;
}

.summary-details p {
    margin-bottom: 8px;
}

h3#payment-status-message {
    color: #000;
}

.total-amount {
    border-top: 1px solid var(--border-color);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
}

div#payment-status-icon svg {
    background-color: var(--primary-color);
    padding: 14px;
    border-radius: 100px;
    width: 60px;
    height: 60px;
}

.amount {
    color: var(--primary-color);
    font-size: 1.875rem;
}

/* Success Page */
.success-header {
    text-align: center;
    margin-bottom: 48px;
}

.success-icon {
    font-size: 6rem;
    margin-bottom: 24px;
}

.reservation-card {
    background: linear-gradient(135deg, var(--primary-color) 0%, #fbbf24 100%);
    color: var(--secondary-color);
    border-radius: var(--border-radius-lg);
    padding: 32px;
    margin-bottom: 32px;
}

.reservation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.reservation-details p {
    margin-bottom: 12px;
}

.plan-details-box {
    background: rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius);
    padding: 16px;
}

.plan-details-box p {
    margin-bottom: 4px;
}

.account-info-card {
    background: var(--background-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 32px;
    margin-bottom: 32px;
    color: #000;
}

.account-info-card h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 24px;
    color: #000;
}

.account-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.account-info-grid div {
    margin-bottom: 16px;
}

.account-info-grid .info-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.account-info-grid .info-value {
    font-weight: 600;
}

/* Unified Info Card - Professional Design with Brand Colors */
.unified-info-card {
    background: linear-gradient(135deg, var(--primary-color) 0%, #fbbf24 100%);
    color: var(--secondary-color);
    border-radius: var(--border-radius-lg);
    padding: 0;
    margin-bottom: 32px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
}

.unified-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary-color) 0%, #333333 100%);
}

.unified-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.info-section {
    padding: 32px;
    position: relative;
}

.info-section.customer-section {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.03);
}

.info-section.order-section {
    background: rgba(0, 0, 0, 0.05);
}

.info-section h4 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2);
    padding-bottom: 8px;
}

.info-section h4::before {
    content: '';
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: var(--secondary-color);
}

.info-details {
    space-y: 16px;
}

.info-details p {
    margin-bottom: 16px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.info-details p:last-child {
    border-bottom: none;
}

.info-details p:hover {
    background: rgba(0, 0, 0, 0.05);
    padding-left: 8px;
    border-radius: 6px;
}

.info-details strong {
    font-weight: 600;
    margin-right: 12px;
    color: var(--secondary-color);
    min-width: 120px;
    font-size: 0.875rem;
}

.status-confirmed {
    background: var(--secondary-color);
    color: var(--primary-color);
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Enhanced Success Header with Brand Colors */
.success-header {
    text-align: center;
    margin-bottom: 48px;
    position: relative;
}

.success-icon {
    font-size: 4rem;
    margin-bottom: 24px;
    position: relative;
    display: inline-block;
}

.success-icon svg {
    background: linear-gradient(135deg, var(--primary-color) 0%, #fbbf24 100%);
    color: var(--secondary-color);
    padding: 20px;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    box-shadow: 0 8px 25px rgba(239, 199, 94, 0.4);
    animation: successPulse 2s ease-in-out infinite;
}

@keyframes successPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(239, 199, 94, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 35px rgba(239, 199, 94, 0.5);
    }
}

.success-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}

/* Enhanced Next Steps Card with Brand Colors */
.next-steps-card {
    background: var(--background-color);
    border-radius: var(--border-radius-lg);
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
    border: 2px solid var(--primary-color);
}

.next-steps-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color) 0%, #fbbf24 100%);
}

.next-steps-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    gap: 12px;
}



.next-steps-content {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-secondary);
    background: linear-gradient(135deg, #fef7e7 0%, #ffffff 100%);
    padding: 24px;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
    position: relative;
}



/* Responsive design for unified card */
@media (max-width: 768px) {
    .unified-info-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .info-section.customer-section {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
    
    .unified-info-card {
        margin: 0 16px 32px;
    }
    
    .info-section {
        padding: 24px;
    }
    
    .info-section h4 {
        font-size: 1rem;
    }
    
    .success-header h2 {
        font-size: 2rem;
    }
    
    .success-icon svg {
        width: 60px;
        height: 60px;
        padding: 15px;
    }
}

/* Removed duplicate - using enhanced version above */

.next-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.next-steps-content {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.next-step {
    text-align: center;
}

.next-step-number {
    width: 64px;
    height: 64px;
    background: rgba(239, 199, 94, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 1.5rem;
    font-weight: bold;
}

.next-step h4 {
    font-weight: 600;
    margin-bottom: 8px;
    color: #000;
}

.next-step p {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 32px;
}

.contact-info {
    background: #f9fafb;
    border-radius: var(--border-radius);
    padding: 24px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Buttons */
.btn {
    padding: 8px 32px;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary {
    background: var(--primary-color);
    color: var(--secondary-color);
    width: 100%;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: var(--secondary-color);
    color: var(--text-white);
}

.btn-secondary:hover {
    background: #374151;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-plan {
    background: var(--secondary-color);
    color: var(--text-white);
    width: 100%;
}

.btn-plan:hover {
    background: #374151;
    box-shadow: var(--shadow);
}

.btn-plan.btn-primary {
    background: var(--primary-color);
    color: var(--secondary-color);
}

.btn-plan.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-full {
    width: 100%;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .plans-grid,
    .branches-grid,
    .account-types-grid {
        display: flex
        ;
                flex-direction: column;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .summary-grid,
    .reservation-grid,
    .account-info-grid {
        grid-template-columns: 1fr;
    }
    
    .action-buttons {
        grid-template-columns: 1fr;
    }
    
    .progress-content {
        flex-direction: column;
        gap: 16px;
        padding: 0 10px;
    }
    
    .progress-steps {
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
        align-items: center;
    }
    
    .progress-step {
        margin: 0;
    }
    
    .step-number {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
    
    .progress-line {
        width: 20px;
        height: 2px;
        flex-shrink: 0;
    }
    
    /* Medium mobile screens - balanced approach */
    @media (max-width: 480px) {
        .progress-steps {
            gap: 6px;
            justify-content: center;
        }
        
        .progress-line {
            width: 12px;
        }
        
        .step-number {
            width: 22px;
            height: 22px;
            font-size: 0.7rem;
            font-weight: 600;
        }
        
        .progress-content {
            padding: 0 5px;
        }
    }
    
    /* Very small screens - keep horizontal but more compact */
    @media (max-width: 360px) {
        .progress-steps {
            gap: 4px;
            justify-content: center;
            flex-wrap: nowrap;
            overflow-x: auto;
            padding: 0 10px;
            min-width: 100%;
            scroll-behavior: smooth;
        }
        
        .progress-step {
            flex-shrink: 0;
        }
        
        .step-number {
            width: 20px;
            height: 20px;
            font-size: 0.65rem;
            font-weight: 600;
        }
        
        .progress-line {
            width: 8px;
            height: 2px;
            flex-shrink: 0;
        }
    }
    
    .next-steps-grid {
        grid-template-columns: 1fr;
    }

    .form-card {
        padding: 15px;
    }

    .form-card p {
        font-size: 13px;
    }

    .summary-content {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .section-header {
        margin-bottom: 15px;
    }

    .processing-card {
        padding: 15px;
    }

    .section-subtitle {
        font-size: 14px;
    }

    div#kyc-status-icon {
        margin-bottom: 20px;
    }

    .btn-primary {
        font-size: 14px;
        padding: 5px;
    }

    div#kyc-status-icon {
        margin-bottom: 45px;
        margin-top: 20px;
        font-size: 50px;
    }
}

/* Animations */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinning {
    animation: spin 1s linear infinite;
}

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

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

/* KYC Instructions Modal Styles */
.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483647 !important;
    padding: 20px;
    backdrop-filter: blur(4px);
}

/* Ensure modal appears above WordPress admin bar and other elements */
body.modal-open {
    overflow: hidden !important;
}

body.modal-open .modal-overlay {
    z-index: 2147483647 !important;
}

.modal-container {
    background: var(--background-color);
    border-radius: var(--border-radius-lg);
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    position: relative;
    animation: modalSlideIn 0.3s ease-out;
    z-index: 999999 !important;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    padding: 20px 20px 15px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition);
}

.modal-close:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

.modal-content {
    padding: 20px;
}

.instruction-highlight {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #0ea5e9;
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 30px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.highlight-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.instruction-highlight h3 {
    margin: 0 0 8px 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #075985;
}

.instruction-highlight p {
    margin: 0;
    color: #0c4a6e;
    line-height: 1.5;
}

.modal-steps {
    margin-bottom: 30px;
}

.modal-step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
    padding: 25px;
    background: #f8fafc;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
    position: relative;
}

.modal-step:last-child {
    margin-bottom: 0;
}

.step-number {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    font-weight: 700;
    font-size: 1.1rem;
    color: #000;
}

.step-content h4 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.step-content p {
    margin: 0 0 10px 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.step-content ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
    color: var(--text-secondary);
}

.step-content li {
    margin-bottom: 4px;
    line-height: 1.4;
}

.modal-tips {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #f59e0b;
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 25px;
}

.modal-tips h4 {
    margin: 0 0 15px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-tips ul {
    margin: 0;
    padding-left: 20px;
    color: #a16207;
}

.modal-tips li {
    margin-bottom: 6px;
    line-height: 1.4;
}

.modal-warning {
    background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
    border: 1px solid #ef4444;
    border-radius: var(--border-radius);
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
}

.warning-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.modal-warning h4 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #991b1b;
}

.modal-warning p {
    margin: 0;
    color: #b91c1c;
    line-height: 1.5;
}

.modal-footer {
    padding: 15px 20px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.modal-footer .btn {
    min-width: 120px;
    justify-content: center;
}

/* KYC Progress Actions */
.kyc-progress-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.btn-small {
    padding: 2px 20px;
    font-size: 0.875rem;
    height: auto;
    border-radius: 8px;
    font-weight: 500;
    color: #000;
    background: transparent;
}

button#reopen-kyc:hover {
    background: none;
    color: #000;
}

.btn-success {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: var(--text-white);
    border: 1px solid #059669;
}

.btn-success:hover {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    border-color: #047857;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(5, 150, 105, 0.3);
}

/* Responsive Modal */
@media (max-width: 768px) {
    .modal-overlay {
        padding: 10px;
    }
    
    .modal-container {
        max-height: 95vh;
    }
    
    .modal-header {
        padding: 20px 20px 15px;
    }
    
    .modal-header h2 {
        font-size: 1.25rem;
    }
    
    .modal-content {
        padding: 20px;
    }
    
    .modal-step {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding: 20px;
    }
    
    .step-number {
        align-self: flex-start;
    }
    
    .modal-footer {
        padding: 15px 20px 20px;
        flex-direction: column-reverse;
        gap: 10px;
    }
    
    .modal-footer .btn {
        width: 100%;
    }
    
    .kyc-progress-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .kyc-progress-actions .btn {
        width: 100%;
        justify-content: center;
    }

    main.main-content.dk-v-core-ordering-form .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0px 10px;
    }

    div#progress-header .container {
        padding: 0;
    }
}

.section_wrapper.mfn-wrapper-for-wraps.mcb-section-inner.mcb-section-inner-0b4070753 {
    padding: 10px;
}

/* Agreement Review Styles */
.agreement-card {
    background: var(--background-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 32px;
    margin-bottom: 24px;
}

.agreement-content-container {
    margin-bottom: 32px;
}

.agreement-scroll-container {
    max-height: 400px;
    overflow-y: auto;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 24px;
    background: #fafafa;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.agreement-scroll-container h2 {
    color: var(--text-primary);
    font-size: 1.5rem;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary-color);
}

.agreement-scroll-container h3 {
    color: var(--text-primary);
    font-size: 1.25rem;
    margin: 24px 0 12px 0;
}

.agreement-scroll-container h4 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin: 20px 0 8px 0;
    font-weight: 600;
}

.agreement-scroll-container p {
    color: var(--text-primary);
    margin-bottom: 12px;
}

.agreement-scroll-container ul,
.agreement-scroll-container ol {
    margin: 12px 0;
    padding-left: 24px;
}

.agreement-scroll-container li {
    margin-bottom: 4px;
    color: var(--text-primary);
}

.agreement-read-confirmation {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #f0f9ff;
    border: 1px solid #0ea5e9;
    border-radius: var(--border-radius);
}

.form-group-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.form-group-checkbox input[type="checkbox"] {
    margin-top: 4px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.form-group-checkbox label {
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
    line-height: 1.5;
}

.signature-section {
    margin: 32px 0;
    padding: 24px;
    background: #f8fafc;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.signature-section h3 {
    color: var(--text-primary);
    margin-bottom: 8px;
}

.signature-section p {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.signature-container {
    background: white;
    border-radius: var(--border-radius);
    padding: 16px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

#signature-canvas {
    width: 100%;
    max-width: 600px;
    height: 200px;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    cursor: crosshair;
    background: #fafafa;
    transition: var(--transition);
    display: block;
    margin: 0 auto 16px auto;
}

#signature-canvas:hover {
    border-color: var(--primary-color);
    background: white;
}

.signature-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.signature-info {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.btn-small {
    padding: 8px 16px;
    font-size: 0.875rem;
}

.agreement-actions {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    margin-top: 32px;
}

.agreement-actions .btn {
    min-width: 140px;
}

.btn-disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn-disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-secondary);
    font-style: italic;
}

/* Responsive Agreement Styles */
@media (max-width: 768px) {
    .agreement-card {
        padding: 20px;
    }
    
    .agreement-scroll-container {
        max-height: 300px;
        padding: 16px;
        font-size: 0.9rem;
    }
    
    #signature-canvas {
        height: 150px;
    }
    
    .agreement-actions {
        flex-direction: column-reverse;
    }
    
    .agreement-actions .btn {
        width: 100%;
    }
    
    .signature-controls {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

/* Disabled company name field styling */
input[name="companyName"]:disabled {
    background-color: #f5f5f5;
    color: #666;
    font-style: italic;
}

/* Manual input enabled styling */
input[name="companyName"]:not(:disabled) {
    background-color: #fff;
}

input[name="companyName"]::placeholder {
    color: #e67e22;
    font-style: italic;
    font-weight: 500;
}

/* Google Places Autocomplete styling */
.google-autocomplete {
    position: relative;
}

.pac-container {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    font-family: inherit;
}

.pac-item {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: var(--transition);
}

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

.pac-item:hover,
.pac-item.pac-item-selected {
    background-color: #f9f9f9;
}

.pac-item-query {
    font-weight: 600;
    color: var(--text-primary);
}

.pac-matched {
    font-weight: 700;
    color: var(--primary-color);
}

.pac-icon {
    margin-right: 8px;
}

/* Address input with autocomplete indicator */
.google-autocomplete::after {
    content: '🌍';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    opacity: 0.5;
    pointer-events: none;
}

.dk-v-core-ordering-form input[type="text"], .dk-v-core-ordering-form input[type="email"], .dk-v-core-ordering-form input[type="tel"], .dk-v-core-ordering-form input[type="date"]{
    color: #000!important;
}

input[type="date"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, select:focus, textarea:focus {
    color: #000!important;
}

/* Trust Indicators Section */
.trust-indicators-card {
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 25px;
    margin: 20px 0;
    box-shadow: var(--shadow);
}

.trust-indicators-card h4 {
    color: var(--text-primary);
    font-size: 1.2em;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}

.trust-badges {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    flex: 1;
    min-width: 280px;
    transition: var(--transition);
}

.trust-badge:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.trust-icon {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

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

.trust-logo {
    width: auto;
    padding: 5px;
    object-fit: contain;
    filter: brightness(1.1);
}

.trust-content {
    flex: 1;
}

.trust-title {
    font-weight: 600;
    font-size: 0.95em;
    color: var(--text-primary);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.trust-text {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* Mobile responsive trust badges */
@media (max-width: 768px) {
    .trust-badges {
        flex-direction: column;
        gap: 15px;
    }
    
    .trust-badge {
        min-width: auto;
        padding: 12px;
    }
    
    .trust-icon {
        width: 60px;
        height: 60px;
    }
    
    .trust-icon svg {
        width: 18px;
        height: 18px;
    }
}

/* ========================================
   Dynamic Products System Styles
   ======================================== */

/* Loading Spinner */
.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    font-size: 16px;
    color: var(--text-secondary);
}

.loading-spinner::before {
    content: '';
    width: 24px;
    height: 24px;
    margin-right: 12px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spinner 0.8s linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Selected State for Cards */
.branch-card.selected,
.plan-card.selected,
.account-card.selected {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, #fef7e7 0%, #ffffff 100%);
    box-shadow: 0 0 0 3px rgba(239, 199, 94, 0.2);
    transform: translateY(-2px);
}

.branch-card.selected button,
.plan-card.selected button,
.account-card.selected button {
    background: var(--primary-color);
    color: var(--secondary-color);
}

/* Product Divider (for special products) */
.products-divider {
    grid-column: 1 / -1;
    text-align: center;
    margin: 30px 0 20px;
    padding: 20px 0;
    border-top: 2px solid var(--border-color);
    border-bottom: 2px solid var(--border-color);
}

.products-divider h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

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

/* Enhanced Card Hover Effects for Dynamic Cards */
.branch-card:hover:not(.selected):not(.branch-card--unavailable),
.plan-card:hover:not(.selected) {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* City Cards Enhanced */
.branch-card[data-branch] {
    cursor: pointer;
    transition: var(--transition);
}

.branch-card[data-branch].branch-card--unavailable {
    cursor: not-allowed;
}

/* Product Special Badge */
.plan-card[data-special="true"] {
    position: relative;
}

.plan-card[data-special="true"]::before {
    content: 'Special';
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--primary-color);
    color: var(--secondary-color);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Dynamic Form Animation */
.step-section {
    animation: fadeIn 0.5s ease-in-out;
}

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

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

.empty-state-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.3;
}

.empty-state-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.empty-state-description {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto;
}

/* Error State */
.error-message {
    background: #fee;
    border: 1px solid #fcc;
    border-radius: var(--border-radius);
    padding: 20px;
    margin: 20px 0;
    color: #c33;
    text-align: center;
}

.error-message strong {
    display: block;
    margin-bottom: 5px;
    font-size: 1.1rem;
}

/* Success State */
.success-message {
    background: #efe;
    border: 1px solid #cfc;
    border-radius: var(--border-radius);
    padding: 20px;
    margin: 20px 0;
    color: #3c3;
    text-align: center;
}

/* Responsive adjustments for dynamic grids */
@media (max-width: 768px) {
    .products-divider h3 {
        font-size: 1.2rem;
    }
    
    .no-products {
        font-size: 1rem;
        padding: 40px 20px;
    }
}

/* ========================================
   Navigation Enhancements
   ======================================== */

/* Clickable completed steps */
.progress-step.completed {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.progress-step.completed:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(239, 199, 94, 0.4);
}

.progress-step.completed:hover .step-number {
    background: var(--primary-dark);
}

/* Back button styling */
.back-button-container {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.back-button-container .btn-secondary {
    min-width: 150px;
}

/* Improve step number visibility when clickable */
.progress-step.completed .step-number {
    background: var(--primary-color);
    color: var(--secondary-color);
}

.progress-step.completed:hover .step-number {
    animation: pulse 0.5s ease;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* ========================================
   Product Toggle (København Premium)
   ======================================== */

.product-toggle-container {
    margin-bottom: 30px;
}

.product-toggle {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
    background: #f8f9fa;
    padding: 8px;
    border-radius: 12px;
    max-width: 400px;
    margin: 0 auto 20px;
}

.toggle-btn {
    flex: 1;
    padding: 12px 24px;
    border: 2px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.toggle-btn:hover {
    background: rgba(239, 199, 94, 0.1);
    color: var(--text-primary);
}

.toggle-btn.active {
    background: var(--primary-color);
    color: var(--secondary-color);
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(239, 199, 94, 0.3);
}

.premium-message {
    background: linear-gradient(135deg, #fef7e7 0%, #fff9ed 100%);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    padding: 20px;
    margin: 20px auto;
    max-width: 600px;
    text-align: center;
    animation: slideDown 0.4s ease;
}

.premium-message p {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.6;
}

.premium-message strong {
    color: #d4b347;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Products Group Grid */
.products-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .products-group {
        grid-template-columns: 1fr;
    }
    
    .product-toggle {
        max-width: 100%;
        flex-direction: column;
        gap: 8px;
    }
    
    .toggle-btn {
        width: 100%;
    }
    
    .premium-message {
        padding: 15px;
        font-size: 0.95rem;
    }
}

section#kyc-form {
    margin-top: 20px;
}

input#iti-0__search-input {
    box-shadow: none;
    padding: 10px 25px;
}

div#iti-0__dropdown-content {
    box-shadow: none !important;
    border: none;
}

.iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover, .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary {
    background-color: transparent!important;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s!important;
}
input[data-autocompleted] {
    background-color: transparent !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s!important;
    -webkit-box-shadow: 0 0 0px 1000px white inset!important;
}

/* ─── COUPON SYSTEM ─────────────────────────────────────── */

.coupon-section {
    margin: 16px 0 4px;
    padding-top: 12px;
    border-top: 1px dashed #dee2e6;
}

.coupon-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-dark);
    padding: 8px 0;
    transition: color 0.2s;
    user-select: none;
}

.coupon-toggle:hover {
    color: var(--secondary-color);
}

.coupon-toggle svg {
    flex-shrink: 0;
}

.coupon-toggle::after {
    content: '›';
    margin-left: auto;
    font-size: 16px;
    transition: transform 0.2s;
}

.coupon-toggle.open::after {
    transform: rotate(90deg);
}

.coupon-input-wrapper {
    animation: couponSlideDown 0.25s ease-out;
}

@keyframes couponSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.coupon-input-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.coupon-input-row input {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: border-color 0.2s;
    outline: none;
    background: #fff;
}

.coupon-input-row input:focus {
    border-color: var(--primary-color);
}

.coupon-input-row input::placeholder {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: #9ca3af;
}

.btn-coupon {
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    background: var(--secondary-color) !important;
    color: var(--primary-color) !important;
    border: none !important;
    cursor: pointer;
    transition: all 0.2s !important;
    white-space: nowrap;
    min-width: auto !important;
}

.btn-coupon:hover {
    opacity: 0.85;
}

.btn-coupon:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Coupon message */
.coupon-message {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    animation: couponSlideDown 0.2s ease-out;
}

.coupon-message-error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.coupon-message-success {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

/* Applied coupon badge */
.coupon-applied-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1.5px solid #86efac;
    border-radius: 12px;
    margin-top: 8px;
}

.coupon-applied-animate {
    animation: couponPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes couponPopIn {
    0%   { transform: scale(0.9); opacity: 0; }
    60%  { transform: scale(1.03); }
    100% { transform: scale(1); opacity: 1; }
}

.coupon-applied-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.coupon-applied-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #10b981;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.coupon-applied-code {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #065f46;
    background: #d1fae5;
    padding: 2px 8px;
    border-radius: 4px;
}

.coupon-applied-desc {
    font-size: 12px;
    color: #047857;
}

.coupon-applied-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.coupon-discount-display {
    font-weight: 700;
    font-size: 14px;
    color: #10b981;
}

.coupon-remove-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid #d1d5db;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    transition: all 0.2s;
}

.coupon-remove-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* Discount row in breakdown */
.breakdown-discount {
    animation: couponSlideDown 0.3s ease-out;
}

.coupon-discount-note {
    text-align: right;
    animation: couponSlideDown 0.3s ease-out;
}

.coupon-discount-note small {
    color: #6b7280;
    font-size: 11.5px;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .coupon-applied-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .coupon-applied-actions {
        align-self: flex-end;
    }
}

/* ==========================================================================
   VerifyID: logo + MitID-knap
   ==========================================================================
   Knappen er det officielle MitID-artwork, brugt som det er. Vi tegner den
   ikke selv og lægger ingen effekter oven på den.

   Om størrelsen. Første forsøg satte en fast højde på billedet:

       .btn-mitid img { height: calc(...); width: auto; }

   Det virkede på en isoleret testside og slet ikke på det rigtige site, fordi
   Betheme sætter

       be.css:  .content_wrapper img { max-width: 100%; height: auto; }

   Den regel har præcis samme specificitet som vores (0,1,1), og temaets CSS
   loader sidst, så den vandt. Billedet faldt tilbage til sin naturlige
   størrelse, klemt af max-width: 100%. Målt resultat: 678x112px på desktop og
   203x33px på mobil, altså kæmpestor det ene sted og ulæselig det andet.

   Løsningen er ikke at overbyde temaet med !important eller flere selektorer,
   men at holde op med at slås: vi styrer BREDDEN og lader højden være auto,
   præcis som temaet vil have det. Så bevares formatforholdet 6,074 altid af
   sig selv, uanset hvor lidt plads der er, og der kan ikke opstå forvrængning.

   Bredderne nedenfor er målt i Chrome på selve siden, ikke regnet ud:
     Desktop  formularens .btn er 52px høj -> blå knap 52px -> billedet 406px bredt
     <=768px  formularens .btn er 46px høj -> blå knap 46px -> billedet 359px bredt
   Er der mindre plads end det, skrumper knappen af sig selv, og tryk-fladen
   holdes på 48px, se .btn-mitid min-height. */

:root {
    /* Bredde på MitID-billedet. Giver en blå knap i samme højde som .btn,
       fordi 1968/324 = 6,074 og den blå del fylder 252 af de 324. */
    --mitid-button-width: 406px;   /* -> blå knap 52px, matcher .btn på desktop */
    --verifyid-logo-width: 112px;  /* -> 24px høj, forhold 4,68 */
}

@media (max-width: 768px) {
    :root {
        --mitid-button-width: 359px;   /* -> blå knap 46px, matcher .btn her */
        --verifyid-logo-width: 104px;
    }
}

/* Logo og knap hører sammen, så de centreres som én blok. */
.verifyid-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.verifyid-cta__logo {
    /* Bredde, ikke højde: se forklaringen øverst. Temaets height:auto er
       netop det vi vil have, så der er ingen konflikt at vinde. */
    width: var(--verifyid-logo-width);
    max-width: 100%;
    display: block;
}

.btn-mitid {
    display: block;
    width: 100%;
    max-width: var(--mitid-button-width);
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;

    /* Tryk-flade. På smalle skærme er der kun plads til en blå knap på ca.
       33px, hvilket er under de 44px WCAG 2.5.5 og Apple HIG kræver. Selve
       <button> holdes derfor på 48px, så fingeren rammer, uden at artwork'et
       strækkes. */
    min-height: 48px;
}

.btn-mitid img {
    /* Bredden bestemmer, højden følger med. Formatforholdet kan ikke brydes. */
    width: 100%;
    height: auto;
    display: block;
}

.btn-mitid:hover {
    opacity: 0.9;
}

.btn-mitid:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 3px;
    border-radius: var(--border-radius);
}

.btn-mitid[disabled] {
    opacity: 0.5;
    cursor: default;
}

/* GDPR-linjen.
 *
 * Sætter bevidst hverken font-size, line-height eller color.
 *
 * Den er et <p> i .status-text, præcis som linjen over den, så den arver af sig
 * selv og matcher altid. Første version hardkodede font-size: 0.875rem. Målt
 * gav det 14px begge steder, mens linjen over er 16px på desktop og 13px på
 * mobil. Altså for lille det ene sted og for stor det andet, og den fulgte ikke
 * med når temaet skalerer teksten.
 *
 * Samme fejl som med MitID-knappen: vi overskrev noget, der allerede virkede.
 * Rodfixet er at lade være. */
.verifyid-gdpr {
    margin-top: 12px;
    text-align: center;
}

.verifyid-gdpr a {
    color: var(--text-primary);
    text-decoration: underline;
}

.verifyid-gdpr a:hover {
    text-decoration: none;
}