/* ============================================================================= 
   LAGOM THEME-MATCHED ONESTEPORDER INTEGRATION
   Author: AI Assistant  
   Purpose: Match Lagom theme design system exactly - no custom colors
   ============================================================================= */

/* CRITICAL: Kill ALL overlays globally on order page */
#fullpage-overlay,
.overlay:not(.lu-modal__backdrop),
.lu-preloader-container--full-screen,
.overlayer,
.lagom-overlayer,
.lagom-loader,
.loading-overlay,
.lagom-loading,
.lagom-products__overlay,
body > .overlay:not(.lu-modal__backdrop) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -9999 !important;
}

/* CRITICAL: Force hidden modals to not block clicks */
#modalAjax[aria-hidden="true"],
#modalGeneratePassword[aria-hidden="true"],
.modal.fade[aria-hidden="true"],
.modal-dialog[aria-hidden="true"],
.modal.fade:not(.show),
.system-modal.fade:not(.show) {
    display: none !important;
    pointer-events: none !important;
    z-index: -9999 !important;
}

/* Ensure visible/active modals still work */
.modal.show,
.modal.fade.show,
.system-modal.show {
    display: block !important;
    pointer-events: auto !important;
}

/* CRITICAL: Hide Quick View modal when not active */
#oso-qv-modal:not(.oso-qv-modal--active),
#oso-qv-backdrop:not(.oso-qv-backdrop--active),
.oso-qv-modal[style*="opacity: 0"],
.oso-qv-backdrop[style*="opacity: 0"] {
    display: none !important;
    pointer-events: none !important;
    z-index: -9999 !important;
}

/* Only show when explicitly active */
#oso-qv-modal.oso-qv-modal--active,
#oso-qv-backdrop.oso-qv-backdrop--active {
    display: block !important;
    pointer-events: auto !important;
}

/* Force hidden dropdowns to not block clicks */
.dropdown-menu[style*="visibility: hidden"],
.dropdown-menu:not(.show)[aria-hidden="true"],
.dropdown-lazy[style*="display: none"],
.dropdown-menu-collapse.show[style*="width: 0"],
.dropdown-menu-collapse.show[style*="height: 0"] {
    pointer-events: none !important;
    display: none !important;
}

/* Visible dropdowns should work normally */
.dropdown-menu.show,
.dropdown-menu-collapse.show {
    pointer-events: auto !important;
}

/* CRITICAL: Clean full-width layout */
.page-onesteporder .main-sidebar,
.main-sidebar {
    display: none !important;
}

.page-onesteporder .app-main-order,
.app-main-order,
#lagom-one-step-order {
    background-color: var(--body-bg, #f8f9fa);
}

.page-onesteporder .main-body .container,
.main-body .container,
.app-main-order .container {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 var(--ui-block-padding-base) !important;
}

.page-onesteporder .main-grid,
.main-grid {
    display: block !important;
    grid-template-columns: 1fr !important;
}

/* Use Lagom's spacing, colors, typography throughout */

/* 1. SECTIONS - Use Lagom's .site-section patterns */
#order-lagom2 .oso-section,
.order-section {
    background: var(--ui-block-bg);
    border: var(--ui-block-border);
    border-radius: var(--ui-block-border-radius);
    box-shadow: var(--ui-block-shadow);
    padding: var(--ui-block-padding-lg);
    margin-bottom: var(--ui-block-spacing-base);
}

.oso-section-title,
.section-heading {
    color: var(--text-heading-color);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-h4);
    line-height: var(--line-height-h4);
    margin-bottom: var(--ui-block-spacing-base);
}

/* 2. PRODUCT CARDS - Match Lagom's .package styling */
.oso-package,
.product-card,
.lagom-product-card,
.package-card,
#lagom-products-container .product {
    background: var(--ui-block-bg) !important;
    border: var(--ui-block-border) !important;
    border-radius: var(--ui-block-border-radius) !important;
    box-shadow: var(--ui-block-shadow) !important;
    padding: var(--ui-block-padding-lg) !important;
    margin-bottom: var(--ui-block-spacing-sm) !important;
    transition: all var(--transition-base) !important;
}

.oso-package:hover,
.product-card:hover,
#lagom-products-container .product:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    transform: translateY(-3px) !important;
}

/* Product card header/title */
.oso-package-header,
.product-card-header,
.product-title,
.package-name {
    color: var(--text-heading-color) !important;
    font-size: var(--font-size-h5) !important;
    font-weight: var(--font-weight-h5) !important;
    line-height: var(--line-height-h5) !important;
    margin-bottom: var(--ui-block-spacing-sm) !important;
}

/* Product price */
.oso-package-price,
.product-price,
.package-price {
    color: var(--brand-primary) !important;
    font-size: var(--font-size-h3) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: var(--line-height-h3) !important;
    margin: var(--ui-block-spacing-sm) 0 !important;
}

/* Product description */
.oso-package-description,
.product-description,
.package-description {
    color: var(--text-lighter-color) !important;
    font-size: var(--font-size-sm) !important;
    line-height: var(--line-height-base) !important;
    margin-bottom: var(--ui-block-spacing-base) !important;
}

/* Select/Order buttons in product cards */
.product-card button,
.package-card button,
#lagom-products-container button {
    background: var(--btn-primary-bg) !important;
    color: var(--btn-primary-color) !important;
    border: var(--btn-primary-border) !important;
    padding: var(--btn-base-padding) !important;
    border-radius: var(--btn-base-border-radius) !important;
    font-weight: var(--btn-font-weight) !important;
    width: 100% !important;
    margin-top: var(--ui-block-spacing-sm) !important;
}

.product-card button:hover,
#lagom-products-container button:hover {
    background: var(--btn-primary-hover-bg) !important;
    color: var(--btn-primary-hover-color) !important;
}

/* 3. BUTTONS - Use Lagom's button variables */
.oso-btn-primary,
.order-btn-primary,
.btn-order-primary {
    color: var(--btn-primary-color) !important;
    background: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-border) !important;
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    padding: var(--btn-base-padding);
    border-radius: var(--btn-base-border-radius);
    transition: all var(--transition-base);
}

.oso-btn-primary:hover,
.order-btn-primary:hover {
    color: var(--btn-primary-hover-color) !important;
    background: var(--btn-primary-hover-bg) !important;
    border-color: var(--btn-primary-hover-border) !important;
}

/* 4. BILLING CYCLES - Match Lagom's form styling */
.oso-billing-cycle,
.billing-cycle-option {
    background: var(--ui-block-bg-form);
    border: var(--input-border);
    border-radius: var(--input-border-radius);
    padding: var(--ui-block-padding-sm);
    margin-bottom: var(--ui-block-spacing-xs);
    cursor: pointer;
    transition: all var(--transition-base);
}

.oso-billing-cycle:hover,
.billing-cycle-option:hover {
    background: var(--input-hover-bg);
    border-color: var(--input-hover-border-color);
}

.oso-billing-cycle.active,
.billing-cycle-option.active,
.billing-cycle-option.selected {
    background: var(--ui-block-active-bg, rgba(var(--brand-primary-rgb), 0.1));
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 0, 128, 255), 0.1);
}

/* 5. SIDEBAR/ORDER SUMMARY */
.oso-sidebar,
.order-summary {
    background: var(--ui-block-bg);
    border: var(--ui-block-border);
    border-radius: var(--ui-block-border-radius);
    box-shadow: var(--ui-block-shadow);
    padding: var(--ui-block-padding-lg);
}

.order-summary-title {
    color: var(--text-heading-color);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-h5);
    line-height: var(--line-height-h5);
    margin-bottom: var(--ui-block-spacing-base);
    padding-bottom: var(--ui-block-spacing-sm);
    border-bottom: 1px solid var(--ui-block-divider-color);
}

.order-summary-item {
    display: flex;
    justify-content: space-between;
    padding: var(--ui-block-spacing-xs) 0;
    color: var(--text-body-color);
    font-size: var(--font-size-base);
}

.order-summary-total {
    display: flex;
    justify-content: space-between;
    padding: var(--ui-block-spacing-sm) 0;
    margin-top: var(--ui-block-spacing-sm);
    padding-top: var(--ui-block-spacing-sm);
    border-top: 1px solid var(--ui-block-divider-color);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-bold);
    color: var(--text-heading-color);
}

/* 6. FORM ELEMENTS - Match Lagom inputs */
.oso-input,
.order-input,
#order-lagom2 input[type="text"],
#order-lagom2 input[type="email"],
#order-lagom2 select,
#order-lagom2 textarea {
    background: var(--input-bg);
    border: var(--input-border);
    border-radius: var(--input-border-radius);
    color: var(--input-color);
    font-size: var(--input-font-size);
    padding: var(--input-padding);
    width: 100%;
    transition: all var(--transition-base);
}

.oso-input:hover,
.order-input:hover {
    background: var(--input-hover-bg);
    border-color: var(--input-hover-border-color);
}

.oso-input:focus,
.order-input:focus,
#order-lagom2 input:focus,
#order-lagom2 select:focus,
#order-lagom2 textarea:focus {
    background: var(--input-focus-bg);
    border-color: var(--input-focus-border-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 0, 128, 255), 0.1);
}

/* 7. LABELS & TEXT */
.oso-label,
.order-label,
#order-lagom2 label {
    color: var(--text-lighter-color);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--ui-block-spacing-xs);
    display: block;
}

.oso-text-primary {
    color: var(--brand-primary);
}

.oso-text-success {
    color: var(--brand-success);
}

.oso-text-muted {
    color: var(--text-lighter-color);
}

/* 8. BADGES & LABELS */
.oso-badge,
.order-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1;
}

.oso-badge-primary {
    background: var(--brand-primary);
    color: #fff;
}

.oso-badge-success {
    background: var(--brand-success);
    color: #fff;
}

/* 9. SPACING UTILITIES */
.oso-mt-sm { margin-top: var(--ui-block-spacing-sm); }
.oso-mt-base { margin-top: var(--ui-block-spacing-base); }
.oso-mt-lg { margin-top: var(--ui-block-spacing-lg); }
.oso-mb-sm { margin-bottom: var(--ui-block-spacing-sm); }
.oso-mb-base { margin-bottom: var(--ui-block-spacing-base); }
.oso-mb-lg { margin-bottom: var(--ui-block-spacing-lg); }
.oso-p-sm { padding: var(--ui-block-padding-sm); }
.oso-p-base { padding: var(--ui-block-padding-base); }
.oso-p-lg { padding: var(--ui-block-padding-lg); }

/* 10. RESPONSIVE - Match Lagom breakpoints */
@media (max-width: 991.98px) {
    #order-lagom2 {
        padding: var(--ui-block-padding-base);
    }
    
    .oso-container {
        grid-template-columns: 1fr;
    }
    
    .oso-sidebar {
        position: static;
        margin-top: var(--ui-block-spacing-lg);
    }
}

@media (max-width: 767.98px) {
    .oso-section-title {
        font-size: var(--font-size-h5);
    }
    
    .oso-package-price {
        font-size: var(--font-size-h4);
    }
}

/* 11. LAGOM PRODUCT GRID INTEGRATION */
.lagom-products__grid,
.products-container,
#lagom-products-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--ui-block-spacing-base);
    margin: var(--ui-block-spacing-lg) 0;
}

/* Lagom Package Cards */
.package,
.lagom-product-card,
.product-item {
    background: var(--ui-block-bg);
    border: var(--ui-block-border);
    border-radius: var(--ui-block-border-radius);
    box-shadow: var(--ui-block-shadow);
    padding: var(--ui-block-padding-lg);
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
}

.package:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

.package-header,
.package__header {
    margin-bottom: var(--ui-block-spacing-base);
}

.package-title,
.package__title {
    color: var(--text-heading-color);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-h5);
    line-height: var(--line-height-h5);
    margin-bottom: var(--ui-block-spacing-xs);
}

.package-price,
.package__price {
    color: var(--brand-primary);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h3);
}

.package-description,
.package__description {
    color: var(--text-lighter-color);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    margin-bottom: var(--ui-block-spacing-base);
    flex-grow: 1;
}

.package-features,
.package__features {
    list-style: none;
    padding: 0;
    margin: var(--ui-block-spacing-base) 0;
}

.package-features li,
.package__features li {
    padding: var(--ui-block-spacing-xs) 0;
    color: var(--text-body-color);
    font-size: var(--font-size-sm);
}

.package-footer,
.package__footer {
    margin-top: auto;
    padding-top: var(--ui-block-spacing-base);
}

/* Lagom Group Tabs - COMPREHENSIVE STYLING */
.lagom-tabs,
.group-tabs,
.product-group-tabs,
#lagom-product-tabs,
.lagom-tabs-nav {
    display: flex;
    gap: 4px;
    margin-bottom: var(--ui-block-spacing-lg);
    padding: 0;
    list-style: none;
    border-bottom: 2px solid var(--ui-block-divider-color);
    flex-wrap: wrap;
}

/* Tab buttons - target all possible selectors */
.lagom-tab,
.group-tab,
.product-group-tab,
.lagom-tab-btn,
#lagom-product-tabs button,
#lagom-product-tabs a,
.group-tabs button,
.group-tabs a {
    padding: 12px 20px !important;
    color: var(--text-lighter-color) !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-medium) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    position: relative !important;
    margin-bottom: -2px !important;
}

.lagom-tab:hover,
.group-tab:hover,
#lagom-product-tabs button:hover,
#lagom-product-tabs a:hover,
.group-tabs button:hover,
.group-tabs a:hover {
    color: var(--text-heading-color) !important;
    background: rgba(0, 0, 0, 0.03) !important;
    border-radius: 4px 4px 0 0 !important;
}

/* Active tab state - comprehensive selectors */
.lagom-tab.active,
.lagom-tab.is-active,
.lagom-tab--active,
.group-tab.active,
.group-tab.is-active,
.group-tab--active,
#lagom-product-tabs button.active,
#lagom-product-tabs button.is-active,
#lagom-product-tabs a.active,
#lagom-product-tabs a.is-active,
.group-tabs button.active,
.group-tabs a.active,
[data-tab-active="true"],
.tab-active {
    color: var(--brand-primary) !important;
    border-bottom-color: var(--brand-primary) !important;
    font-weight: var(--font-weight-bold) !important;
    background: rgba(var(--brand-primary-rgb, 0, 128, 255), 0.05) !important;
}

/* Tab content panels */
.lagom-tab-content,
.group-tab-content,
.tab-pane {
    display: none;
}

.lagom-tab-content.active,
.lagom-tab-content.show,
.group-tab-content.active,
.tab-pane.active {
    display: block;
}

/* Lagom Billing Cycles */
.billing-cycle-container,
.billing-cycles {
    display: flex;
    flex-direction: column;
    gap: var(--ui-block-spacing-xs);
    margin: var(--ui-block-spacing-base) 0;
}

.billing-cycle-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ui-block-padding-sm) var(--ui-block-padding-base);
    background: var(--ui-block-bg-form);
    border: var(--input-border);
    border-radius: var(--input-border-radius);
    cursor: pointer;
    transition: all var(--transition-base);
}

.billing-cycle-option:hover {
    background: var(--input-hover-bg);
    border-color: var(--input-hover-border-color);
}

.billing-cycle-option.selected {
    background: rgba(var(--brand-primary-rgb, 0, 128, 255), 0.1);
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 0, 128, 255), 0.1);
}

.billing-cycle-label {
    color: var(--text-body-color);
    font-weight: var(--font-weight-medium);
}

.billing-cycle-price {
    color: var(--brand-primary);
    font-weight: var(--font-weight-bold);
}

/* Lagom Cart Summary */
.cart-summary,
.order-summary-box {
    position: sticky;
    top: 100px;
    background: var(--ui-block-bg);
    border: var(--ui-block-border);
    border-radius: var(--ui-block-border-radius);
    box-shadow: var(--ui-block-shadow);
    padding: var(--ui-block-padding-lg);
}

.cart-item {
    display: flex;
    justify-content: space-between;
    padding: var(--ui-block-spacing-sm) 0;
    border-bottom: 1px solid var(--ui-block-divider-color);
}

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

/* 12. DOMAIN SECTION FIX - Normal width card, not wide */
.section--domain .panel-choose-domain,
.panel-choose-domain--hero,
.box-search-domain,
.search-box-primary,
#lagom-domain-config {
    background: var(--ui-block-bg) !important;
    padding: var(--ui-block-padding-base) !important;
    border-radius: var(--ui-block-border-radius) !important;
    border: var(--ui-block-border) !important;
    box-shadow: var(--ui-block-shadow) !important;
    min-height: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
}

/* Remove the "hero" styling that makes it huge */
.panel-choose-domain--hero .panel-body {
    padding: var(--ui-block-padding-base) !important;
    min-height: auto !important;
    max-height: none !important;
}

/* Fix the inner box */
.box-search-domain .box-body,
.search-box-primary .box-body {
    padding: var(--ui-block-padding-base) !important;
    background: transparent !important;
    min-height: auto !important;
}

/* Remove excessive height */
.panel-choose-domain--hero,
.search-box-primary {
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
}

/* Domain section header */
.box-search-domain .box-header,
.search-box-primary .box-header {
    margin-bottom: var(--ui-block-spacing-base);
}

.box-search-domain .box-header-content,
.search-box-primary .box-header-content {
    color: var(--text-heading-color);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-h5);
}

/* Domain search input styling */
.domain-search-input,
.search-box-primary input[type="text"],
#lagom-domain-config input {
    background: var(--input-bg) !important;
    border: var(--input-border) !important;
    color: var(--input-color) !important;
    border-radius: var(--input-border-radius) !important;
    padding: var(--input-padding) !important;
}

/* Domain buttons */
.domain-search-btn,
.search-box-primary button,
#lagom-domain-config button {
    background: var(--btn-primary-bg) !important;
    color: var(--btn-primary-color) !important;
    border: var(--btn-primary-border) !important;
}

/* Remove any background images or gradients */
.search-box-primary:before,
.search-box-primary:after,
.box-search-domain:before,
.box-search-domain:after,
.search-box-primary *:before,
.search-box-primary *:after {
    display: none !important;
    content: none !important;
}

/* Hide all decorative SVG/graphics in domain section */
.search-box-primary svg,
.search-box-primary img,
.box-search-domain svg,
.box-search-domain img,
.panel-choose-domain--hero svg,
.panel-choose-domain--hero img,
#lagom-domain-config svg,
#lagom-domain-config img {
    display: none !important;
}

/* Make domain section compact */
.section--domain .section-body {
    padding: 0 !important;
}

.panel-choose-domain .panel-body {
    background: var(--ui-block-bg) !important;
}

/* Domain input group - clean inline layout */
.domain-search-group,
.search-box-primary .inline-form,
#lagom-domain-config .inline-form {
    display: flex !important;
    gap: var(--ui-block-spacing-xs) !important;
    align-items: center !important;
}

.domain-search-group input,
.search-box-primary input {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Domain options list - INLINE LAYOUT */
.domain-options,
.domain-option-list,
.panel-domain-option {
    margin-top: var(--ui-block-spacing-base);
    display: flex !important;
    flex-direction: column !important;
    gap: var(--ui-block-spacing-sm) !important;
}

/* Radio button options - clean cards in a row */
.domain-option,
.radio-option,
.panel-domain-option .radio,
.panel-choose-domain .radio {
    padding: var(--ui-block-padding-base) !important;
    margin-bottom: 0 !important;
    background: var(--ui-block-bg) !important;
    border: 2px solid var(--ui-block-divider-color) !important;
    border-radius: var(--input-border-radius) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--ui-block-spacing-sm) !important;
}

.domain-option:hover,
.panel-choose-domain .radio:hover {
    background: var(--input-hover-bg) !important;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Active/selected state */
.domain-option.active,
.domain-option.selected,
.radio.active,
.radio input[type="radio"]:checked + label,
.radio-styled.checked {
    border-color: var(--brand-primary) !important;
    background: rgba(var(--brand-primary-rgb, 0, 128, 255), 0.05) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 0, 128, 255), 0.1) !important;
}

/* Radio button styling */
.domain-option input[type="radio"],
.panel-choose-domain input[type="radio"] {
    margin-right: var(--ui-block-spacing-sm) !important;
    flex-shrink: 0 !important;
}

/* Domain option text */
.domain-option label,
.domain-option span,
.panel-choose-domain .radio span {
    color: var(--text-body-color) !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-medium) !important;
    cursor: pointer !important;
}

.domain-option p,
.panel-choose-domain .radio + p {
    color: var(--text-lighter-color) !important;
    font-size: var(--font-size-sm) !important;
    margin: var(--ui-block-spacing-xs) 0 0 0 !important;
}

/* Clean modern domain section styling */
.panel-choose-domain {
    background: var(--ui-block-bg) !important;
    border-radius: var(--input-border-radius) !important;
    padding: var(--ui-block-padding-lg) !important;
    margin-bottom: var(--ui-block-spacing-base) !important;
}

.search-box-primary {
    background: transparent !important;
    padding: 0 !important;
}

/* Domain section header - clean and minimal */
.box-header {
    margin-bottom: var(--ui-block-spacing-base) !important;
    text-align: center !important;
}

.box-caption {
    display: block !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--brand-primary) !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
}

.box-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--text-heading-color) !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
}

.box-desc {
    font-size: 14px !important;
    color: var(--text-lighter-color) !important;
    margin: 0 0 var(--ui-block-spacing-base) 0 !important;
    line-height: 1.5 !important;
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Domain search container layout */
.domain-search-input,
.search-group,
.search-group-combined,
#lagom-domain-input-container,
.panel-domain-form--search {
    position: relative !important;
    width: 100% !important;
}

/* Search field wrapper */
.search-field {
    position: relative !important;
    flex: 1 !important;
    width: 100% !important;
}

/* Search icon - ensure it doesn't block input */
.search-field-icon {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    color: var(--text-lighter-color) !important;
}

/* Domain search input - strong and prominent */
.panel-choose-domain input[type="text"],
.panel-choose-domain input[placeholder*="domain"],
#lagom-domain-config input[type="text"],
#lagom-domain-input,
input.form-control[placeholder*="domain"] {
    width: 100% !important;
    min-height: 52px !important;
    padding: 16px 50px 16px 20px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border: 2px solid var(--ui-block-divider-color) !important;
    border-radius: var(--input-border-radius) !important;
    background: var(--ui-block-bg) !important;
    color: var(--text-heading-color) !important;
    transition: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    display: block !important;
}

.panel-choose-domain input[type="text"]:focus,
#lagom-domain-config input[type="text"]:focus,
#lagom-domain-input:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 4px 16px rgba(0, 123, 255, 0.2) !important;
    outline: none !important;
}

.panel-choose-domain input[type="text"]::placeholder,
#lagom-domain-config input[type="text"]::placeholder,
#lagom-domain-input::placeholder {
    color: var(--text-lighter-color) !important;
    font-weight: 400 !important;
}

/* Search Domain button - more prominent */
.panel-choose-domain button[type="submit"],
.panel-choose-domain button[type="button"],
#lagom-domain-config button,
#lagom-domain-search,
button.btn-primary {
    padding: 16px 32px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    background: var(--brand-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--input-border-radius) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3) !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Remove has-shadow effects that might interfere */
.has-shadow,
.search-group.has-shadow {
    box-shadow: none !important;
}

.panel-choose-domain button[type="submit"]:hover,
.panel-choose-domain button[type="button"]:hover,
#lagom-domain-config button:hover,
#lagom-domain-search:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4) !important;
}

/* Domain search combined group layout */
.search-group-combined {
    display: flex !important;
    gap: 12px !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
}

.search-group-select,
#lagom-domain-period-wrapper {
    flex-shrink: 0 !important;
    min-width: 120px !important;
}

#lagom-domain-period {
    padding: 16px 16px !important;
    font-size: 16px !important;
    border: 2px solid var(--ui-block-divider-color) !important;
    border-radius: var(--input-border-radius) !important;
    background: var(--ui-block-bg) !important;
    cursor: pointer !important;
}

/* Domain search row layout */
.panel-choose-domain .form-group,
.panel-choose-domain .input-group,
#lagom-domain-config .form-group {
    display: flex !important;
    gap: 12px !important;
    align-items: stretch !important;
    margin-bottom: var(--ui-block-spacing-base) !important;
}

/* Transfer domain section - professional styling */
.panel-choose-domain label,
#lagom-domain-config label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--text-heading-color) !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.3px !important;
}

.panel-choose-domain .help-block,
.panel-choose-domain small,
#lagom-domain-config .help-block,
#lagom-domain-config small {
    display: block !important;
    font-size: 13px !important;
    color: var(--text-lighter-color) !important;
    margin-top: 6px !important;
    line-height: 1.5 !important;
}

/* "No domain selected yet" message */
.panel-choose-domain .alert,
.panel-choose-domain .text-muted,
#lagom-domain-config .alert {
    padding: 12px 16px !important;
    background: rgba(108, 117, 125, 0.1) !important;
    border-left: 3px solid var(--text-lighter-color) !important;
    border-radius: var(--input-border-radius) !important;
    font-size: 14px !important;
    color: var(--text-lighter-color) !important;
    margin: var(--ui-block-spacing-sm) 0 !important;
}

/* EPP/Auth Code input field */
.panel-choose-domain input[placeholder*="authorization"],
.panel-choose-domain input[placeholder*="EPP"],
.panel-choose-domain input[placeholder*="Auth"],
#lagom-domain-config input[placeholder*="authorization"] {
    width: 100% !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    border: 2px solid var(--ui-block-divider-color) !important;
    border-radius: var(--input-border-radius) !important;
    background: var(--ui-block-bg) !important;
    color: var(--text-heading-color) !important;
    transition: all 0.3s ease !important;
    font-family: 'Courier New', monospace !important;
}

.panel-choose-domain input[placeholder*="authorization"]:focus,
.panel-choose-domain input[placeholder*="EPP"]:focus,
.panel-choose-domain input[placeholder*="Auth"]:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
    outline: none !important;
}

/* Field groups spacing */
.panel-choose-domain .form-group,
#lagom-domain-config .form-group {
    margin-bottom: var(--ui-block-spacing-base) !important;
}

.panel-choose-domain .form-group:last-child {
    margin-bottom: 0 !important;
}

/* Domain choice radio buttons - horizontal compact layout */
.panel-domain-options,
.lagom-domain-choice {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--ui-block-spacing-sm) !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
}

/* Each radio option as a compact card */
label.panel-domain-option {
    display: flex !important;
    align-items: flex-start !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    flex: 1 !important;
    min-width: 0 !important;
    background: var(--ui-block-bg) !important;
    border: 2px solid var(--ui-block-divider-color) !important;
    border-radius: var(--input-border-radius) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

label.panel-domain-option:hover {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15) !important;
    transform: translateY(-2px) !important;
}

label.panel-domain-option.is-active {
    border-color: var(--brand-primary) !important;
    background: rgba(0, 123, 255, 0.03) !important;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2) !important;
}

/* Hide all radio buttons completely */
.panel-domain-option input[type="radio"],
.panel-domain-option .radio-styled {
    display: none !important;
}

/* Radio text content - compact */
.panel-domain-option .content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.panel-domain-option .title {
    display: block !important;
    color: var(--text-heading-color) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 3px !important;
    line-height: 1.3 !important;
}

.panel-domain-option .desc,
.panel-domain-option small {
    display: block !important;
    color: var(--text-lighter-color) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

/* Hide decorative graphics that block interaction */
.box-header-graphic {
    display: none !important;
}

/* Ensure domain forms are clickable */
.panel-domain-forms,
.panel-domain-form,
.panel-domain-form--search,
#lagom-domain-input-container {
    position: relative !important;
    z-index: 10 !important;
}

/* Domain results and suggestions - prevent overlay on input */
.lagom-domain-feedback,
#lagom-domain-feedback,
.lagom-domain-suggestions,
#lagom-domain-suggestions,
.spotlight-list,
#lagom-domain-spotlights {
    margin-top: var(--ui-block-spacing-base) !important;
    position: relative !important;
}

/* Ensure results don't overlay the input field */
.box-result {
    margin-top: var(--ui-block-spacing-sm) !important;
    clear: both !important;
}

/* Domain availability notice should not block typing */
.lagom-domain-feedback,
#lagom-domain-feedback {
    pointer-events: none !important;
}

/* ============================================================================= 
   GOOGLE-INSPIRED CLEAN DESIGN FOR ORDER PAGE
   Minimal, fast, and highly usable design system
   ============================================================================= */

/* Clean Typography - Roboto/System fonts */
body,
.page-onesteporder,
#lagom-one-step-order {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #202124;
    background: #f8f9fa;
}

/* Page Header - Clean & Minimal */
.page-onesteporder h1,
.order-page-header h1,
#lagom-one-step-order h1:first-child {
    color: #202124 !important;
    padding: 1.5rem 0;
    margin: 0 0 1.5rem 0;
    border-bottom: 1px solid #e8eaed;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.page-onesteporder h1::before {
    content: "";
    display: none;
}

/* Clean Card Design - Material inspired */
.lagom-card,
.lagom-panel,
.card,
.panel-default,
section.lagom-products,
.domain-section,
.checkout-section {
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15) !important;
    border: none !important;
    padding: 1.5rem !important;
    margin-bottom: 1rem !important;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.lagom-card:hover,
.lagom-panel:hover {
    box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15) !important;
    transform: none;
}

/* Section Headers - Clean & Minimal */
.lagom-card h2,
.lagom-panel h2,
.panel-heading h2,
.section-header h2 {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #202124 !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
    border: none !important;
    letter-spacing: 0.25px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Product Cards Grid - Clean Layout */
.lagom-products-grid,
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.lagom-product-card,
.product-item {
    background: white;
    border-radius: 8px;
    border: 1px solid #dadce0;
    padding: 1.25rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.lagom-product-card:hover,
.product-item:hover {
    border-color: #1967d2;
    box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
    transform: none;
}

.lagom-product-card.selected,
.product-item.selected {
    border-color: #1967d2;
    border-width: 2px;
    background: #f8f9fa;
    box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
}

/* Product Card Badge - Simple Checkmark */
.lagom-product-card::before {
    content: "✓";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: #1a73e8;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.lagom-product-card.selected::before {
    opacity: 1;
    transform: scale(1);
}

/* Product Pricing - Clean Numbers */
.product-price,
.lagom-product-price {
    font-size: 24px;
    font-weight: 400;
    color: #202124;
    margin: 0.75rem 0;
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    letter-spacing: -0.5px;
}

.product-price .currency,
.product-price .period {
    font-size: 14px;
    color: #5f6368;
    font-weight: 400;
}

/* Clean Buttons - Google Style */
.btn,
button,
.lagom-btn {
    padding: 0.625rem 1.5rem;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.25px;
    text-transform: none;
}

.btn-primary,
.btn-success,
button[type="submit"] {
    background: #1a73e8 !important;
    color: white !important;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.btn-primary:hover,
.btn-success:hover {
    background: #1765cc !important;
    box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
    transform: none;
}

.btn-secondary,
.btn-default {
    background: white !important;
    color: #1a73e8 !important;
    border: 1px solid #dadce0 !important;
}

.btn-secondary:hover,
.btn-default:hover {
    background: #f8f9fa !important;
    border-color: #1a73e8 !important;
}

/* Clean Form Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    padding: 0.75rem 1rem !important;
    border: 1px solid #dadce0 !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: white !important;
    color: #202124 !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #1a73e8 !important;
    box-shadow: none !important;
    outline: none !important;
}

input:hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus) {
    border-color: #80868b !important;
}

/* Tab Navigation */
.nav-tabs,
.product-tabs,
.lagom-tabs {
    display: flex;
    gap: 0.5rem;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 1.5rem;
}

.nav-tab,
.tab-item {
    padding: 0.875rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #718096;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-tab:hover,
.tab-item:hover {
    color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.nav-tab.active,
.tab-item.active {
    color: #667eea;
    border-bottom-color: #667eea;
}

/* Domain Option Cards - Clean */
.lagom-domain-choice {
    display: flex !important;
    gap: 0.75rem !important;
    margin: 1rem 0 !important;
}

.panel-domain-option {
    flex: 1;
    background: white;
    border: 1px solid #dadce0;
    border-radius: 4px;
    padding: 1rem 1.25rem;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
}

.panel-domain-option:hover {
    border-color: #1a73e8;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
    transform: none;
}

.panel-domain-option.active {
    border-color: #1a73e8;
    border-width: 2px;
    padding: calc(1rem - 1px) calc(1.25rem - 1px);
    background: #f8f9fa;
    box-shadow: none;
}

/* Checkmark for active domain option */
.panel-domain-option.active::after {
    content: "✓";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    background: #1a73e8;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

/* Stats/Info Boxes */
.stats-container,
.info-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-box,
.info-box {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stat-box h3 {
    font-size: 32px;
    font-weight: 700;
    color: #667eea;
    margin: 0.5rem 0;
}

.stat-box p {
    color: #718096;
    font-size: 14px;
    margin: 0;
}

/* Progress Indicators */
.progress-bar,
.lagom-progress {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin: 1rem 0;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* Clean Messages */
.alert,
.notification,
.message-box {
    padding: 0.875rem 1.25rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 14px;
    font-weight: 400;
    border-left: 4px solid;
}

.alert-success,
.success-message {
    background: #e6f4ea;
    color: #137333;
    border-color: #137333;
}

.alert-danger,
.error-message {
    background: #fce8e6;
    color: #c5221f;
    border-color: #c5221f;
}

.alert-info,
.info-message {
    background: #e8f0fe;
    color: #174ea6;
    border-color: #1a73e8;
}

/* Checkout Summary Box - Clean */
.checkout-summary,
.order-summary {
    background: white;
    border: 1px solid #dadce0;
    border-radius: 8px;
    padding: 1.5rem;
    position: sticky;
    top: 1rem;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.checkout-summary h3 {
    font-size: 16px;
    font-weight: 500;
    color: #202124;
    margin: 0 0 1rem 0;
    padding: 0;
    border: none;
    letter-spacing: 0.25px;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    padding: 0.625rem 0;
    color: #5f6368;
    font-size: 14px;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    margin-top: 0.75rem;
    border-top: 1px solid #e8eaed;
    font-size: 20px;
    font-weight: 500;
    color: #202124;
}

/* Loading States - Material */
.loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(26, 115, 232, 0.2);
    border-top-color: #1a73e8;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Clean Links */
a {
    color: #1a73e8;
    text-decoration: none;
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

a:hover {
    color: #174ea6;
    text-decoration: underline;
}

/* Clean Focus States */
*:focus {
    outline: 2px solid #1a73e8;
    outline-offset: 2px;
}

button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .lagom-products-grid,
    .product-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .lagom-domain-choice {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .page-onesteporder h1 {
        font-size: 20px;
        padding: 1rem 0;
    }
    
    .lagom-card,
    .lagom-panel {
        padding: 1rem !important;
    }
}

/* Performance - Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================= 
   COMPREHENSIVE ORDER PAGE REDESIGN
   Domain, Billing Cycles, Package Details, Summary
   ============================================================================= */

/* Package/Product Title & Description */
.package-title,
.product-title,
.lagom-product-card h3,
.package h3 {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #202124 !important;
    margin: 0 0 0.5rem 0 !important;
    letter-spacing: 0;
    line-height: 1.4;
}

.package-tagline,
.product-description,
.lagom-product-card p {
    font-size: 13px !important;
    color: #5f6368 !important;
    line-height: 1.5;
    margin: 0 0 0.75rem 0 !important;
}

/* Package Features List */
.package-content ul,
.product-features,
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0;
}

.package-content li,
.product-features li,
.feature-list li {
    padding: 0.375rem 0;
    font-size: 13px;
    color: #5f6368;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.package-content li::before,
.product-features li::before,
.feature-list li::before {
    content: "✓";
    color: #1a73e8;
    font-weight: 600;
    flex-shrink: 0;
}

/* Billing Cycle Selector */
.billing-cycle-selector,
.cycle-selector,
.price-cycle-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.cycle-option,
.billing-cycle-option,
input[type="radio"] + label {
    flex: 1;
    min-width: 120px;
    padding: 0.75rem 1rem;
    border: 1px solid #dadce0;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    font-size: 14px;
    color: #202124;
}

.cycle-option:hover,
.billing-cycle-option:hover {
    border-color: #1a73e8;
    background: #f8f9fa;
}

.cycle-option.active,
.cycle-option.selected,
input[type="radio"]:checked + label {
    border-color: #1a73e8;
    border-width: 2px;
    background: #e8f0fe;
    color: #1a73e8;
    font-weight: 500;
    padding: calc(0.75rem - 1px) calc(1rem - 1px);
}

.cycle-price {
    display: block;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.cycle-period {
    display: block;
    font-size: 12px;
    color: #5f6368;
}

/* ============================================================================= 
   COMPREHENSIVE DOMAIN SECTION REDESIGN - CLEAN GOOGLE MATERIAL STYLE
   ============================================================================= */

/* ============================================================================= 
   RESET ALL BACKGROUNDS ON DOMAIN PAGES
   ============================================================================= */

/* Remove all container backgrounds */
.container,
.container-fluid,
.main-grid,
.main-content,
.section,
.section-body,
.section-content,
.row,
.col-md-12,
.col-md-6,
[class*="col-"] > div:not([class*="btn"]):not([class*="form-control"]) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Main Domain Search Box Container */
.search-box,
.domain-search-input,
.domain-section,
#frmDomainChecker {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Search Box Wrapper - Transparent Container */
.search-box,
.search-box-primary,
.search-box-secondary,
[class*="search-box"] {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 1.5rem !important;
    box-shadow: none !important;
}

/* Remove section backgrounds */
.section,
.section-body {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Main content area - clean background */
.main-content {
    background: transparent !important;
}

/* Remove all card/box backgrounds from domain page */
body[class*="domain"] .container,
body[class*="domain"] .section,
body[class*="domain"] .row > div > div:not(.search-field):not(.search-group-btn):not(.domain-option-card) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove any overlays blocking interaction */
.search-box::before,
.search-box::after,
.domain-search-input::before,
.domain-search-input::after,
.search-group::before,
.search-group::after {
    display: none !important;
    content: none !important;
}

/* Domain Page Header Section */
.section-header,
.page-header {
    margin-bottom: 2rem !important;
    text-align: center !important;
}

.section-header h1,
.page-header h1 {
    font-size: 28px !important;
    font-weight: 500 !important;
    color: #202124 !important;
    margin-bottom: 0.75rem !important;
}

.section-header p,
.page-header p {
    font-size: 15px !important;
    color: #5f6368 !important;
    line-height: 1.6;
}

/* Remove promo boxes and extra containers */
.domain-promo-box,
.promo-box-body,
[class*="promo-box"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Clean row containers on domain pages */
.row.row-eq-height {
    background: transparent !important;
    margin-bottom: 0 !important;
}

/* Domain Option Cards (Register/Transfer/Use Existing) - Only These Should Have Background */
.domain-option-card,
.domain-selection-card {
    background: white !important;
    border: 2px solid #dadce0 !important;
    border-radius: 8px !important;
    padding: 1.5rem !important;
    margin-bottom: 1rem !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    height: 100% !important;
}

.domain-option-card:hover,
.domain-selection-card:hover {
    border-color: #1a73e8 !important;
    box-shadow: 0 2px 4px 0 rgba(60, 64, 67, 0.15) !important;
    transform: translateY(-2px);
}

.domain-option-card.active,
.domain-selection-card.active {
    border-color: #1a73e8 !important;
    background: #e8f0fe !important;
}

.domain-option-card h3,
.domain-option-card h4,
.domain-selection-card h3,
.domain-selection-card h4 {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #202124 !important;
    margin-bottom: 0.5rem !important;
}

.domain-option-card p,
.domain-selection-card p {
    font-size: 14px !important;
    color: #5f6368 !important;
    line-height: 1.5;
    margin: 0 !important;
}

/* Search Group - Flex Container */
.search-group,
.search-group-lg,
.domain-search-input.search-group {
    display: flex !important;
    gap: 0.75rem !important;
    align-items: stretch !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Search Field Container */
.search-field {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    pointer-events: auto !important;
}

/* Domain Input Field - ACTUAL INPUT */
.search-field input.form-control,
input[name="domain"].form-control,
#inputDomain,
.domain-search-input input[type="text"] {
    width: 100% !important;
    flex: 1 !important;
    padding: 1rem 1.25rem 1rem 3rem !important;
    border: 2px solid #dadce0 !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    background: white !important;
    color: #202124 !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    pointer-events: auto !important;
    z-index: 100 !important;
    position: relative !important;
    cursor: text !important;
    height: auto !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
}

/* Input Hover State */
.search-field input.form-control:hover {
    border-color: #1a73e8 !important;
}

/* Input Focus State - Blue Glow */
.search-field input.form-control:focus,
input[name="domain"]:focus,
#inputDomain:focus {
    border-color: #1a73e8 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1) !important;
}

/* Placeholder Styling */
.search-field input::placeholder,
input[name="domain"]::placeholder {
    color: #5f6368 !important;
    opacity: 1 !important;
    font-size: 15px !important;
}

/* Search Icon Inside Input */
.search-field-icon {
    position: absolute !important;
    left: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #5f6368 !important;
    z-index: 101 !important;
    pointer-events: none !important;
    font-size: 18px !important;
}

.search-field-icon i {
    color: #5f6368 !important;
}

.domain-search-input:hover {
    border-color: #1a73e8 !important;
}

.domain-search-input:focus {
    border-color: #1a73e8 !important;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1) !important;
    outline: none !important;
}

/* Search Button Container */
.search-group-btn {
    display: flex !important;
    align-items: stretch !important;
}

/* Search/Check Availability Button */
.search-group-btn .btn,
button.domain-check-availability,
#btnCheckAvailability,
.btn-search-domain {
    padding: 1rem 2rem !important;
    background: #1a73e8 !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15) !important;
    white-space: nowrap !important;
    letter-spacing: 0.25px !important;
    height: auto !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Button Hover */
.search-group-btn .btn:hover,
button.domain-check-availability:hover,
#btnCheckAvailability:hover {
    background: #1765cc !important;
    box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15) !important;
    transform: translateY(-1px);
}

/* Button Active/Click */
.search-group-btn .btn:active,
button.domain-check-availability:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3) !important;
}

/* Button Loading State */
.loader-button {
    display: none !important;
    margin-left: 0.5rem;
}

button.domain-check-availability.loading .loader-button {
    display: inline-block !important;
}

/* TLD Pricing Table - Clean Design */
.tld-pricing-table,
.domain-pricing,
.pricing-table {
    background: white !important;
    border: 1px solid #dadce0 !important;
    border-radius: 8px !important;
    padding: 1.5rem !important;
    margin: 1.5rem 0 !important;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15) !important;
}

.tld-pricing-table h2,
.domain-pricing h2 {
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #202124 !important;
    margin-bottom: 1rem !important;
}

/* TLD Pricing Table Rows */
.tld-row,
.pricing-table-row,
table.domain-pricing tbody tr {
    padding: 0.875rem 0 !important;
    border-bottom: 1px solid #f1f3f4 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.tld-row:hover,
.pricing-table-row:hover {
    background: #f8f9fa !important;
}

.tld-name,
.tld-extension {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #202124 !important;
}

.tld-price,
.tld-cost {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1a73e8 !important;
}

.tld-period {
    font-size: 12px !important;
    color: #5f6368 !important;
    margin-left: 0.25rem !important;
}

/* Spotlight TLDs - Featured Display */
.spotlight-tlds,
.domain-spotlight {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 1rem !important;
    margin: 1.5rem 0 !important;
}

.spotlight-tld,
.spotlight-item {
    padding: 1.25rem 1rem !important;
    border: 2px solid #dadce0 !important;
    border-radius: 8px !important;
    text-align: center !important;
    background: white !important;
    cursor: pointer !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

.spotlight-tld:hover,
.spotlight-item:hover {
    border-color: #1a73e8 !important;
    background: #f8f9fa !important;
    transform: translateY(-2px);
    box-shadow: 0 2px 4px 0 rgba(60, 64, 67, 0.15) !important;
}

.spotlight-tld.active,
.spotlight-item.selected {
    border-color: #1a73e8 !important;
    background: #e8f0fe !important;
    box-shadow: 0 2px 4px 0 rgba(26, 115, 232, 0.2) !important;
}

.spotlight-tld-name {
    display: block !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #202124 !important;
    margin-bottom: 0.5rem !important;
}

.spotlight-tld-price {
    display: block !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    color: #1a73e8 !important;
}

.spotlight-tld-period {
    display: block !important;
    font-size: 13px !important;
    color: #5f6368 !important;
    margin-top: 0.25rem !important;
}

/* Selected Checkmark for Spotlight TLD */
.spotlight-tld.active::after,
.spotlight-item.selected::after {
    content: "✓" !important;
    position: absolute !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
    width: 20px !important;
    height: 20px !important;
    background: #1a73e8 !important;
    color: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* Domain Results Container */
#DomainSearchResults,
.domain-results,
.search-results-container {
    margin-top: 1.5rem !important;
    background: white !important;
    border: 1px solid #dadce0 !important;
    border-radius: 8px !important;
    padding: 1.5rem !important;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15) !important;
}

#DomainSearchResults.hidden {
    display: none !important;
}

.domain-checker-result-headline,
#searchDomainInfo {
    margin-bottom: 1rem !important;
}

.domain-results-header {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #202124 !important;
    margin-bottom: 1rem !important;
}

/* Primary Lookup Result */
#primaryLookupResult,
.domain-lookup-result {
    background: white !important;
    border: 2px solid #dadce0 !important;
    border-radius: 8px !important;
    padding: 1.25rem !important;
    margin-bottom: 1rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#primaryLookupResult:not(.hidden):hover {
    transform: translateX(4px);
    box-shadow: 0 2px 4px 0 rgba(60, 64, 67, 0.15) !important;
}

/* Available Domain - Green Accent */
#primaryLookupResult.available,
.domain-lookup-result.available,
.domain-checker-available {
    border-color: #34a853 !important;
    background: #e6f4ea !important;
}

#primaryLookupResult.available:hover {
    background: #d2e3fc !important;
    border-color: #1a73e8 !important;
}

/* Unavailable Domain - Gray */
#primaryLookupResult.unavailable,
.domain-lookup-result.unavailable,
.domain-checker-unavailable {
    border-color: #dadce0 !important;
    background: #f8f9fa !important;
    opacity: 0.6 !important;
}

/* Domain Name Display */
.domain-name,
.result-domain-name {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #202124 !important;
    flex: 1 !important;
}

.domain-result.available .domain-name {
    color: #137333 !important;
}

/* Domain Price & Action Section */
.domain-result-actions {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.domain-price-display {
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #1a73e8 !important;
    margin-right: 0.5rem !important;
}

.domain-price-period {
    font-size: 13px !important;
    color: #5f6368 !important;
}

/* Domain Status Badge */
.domain-status,
.availability-badge {
    font-size: 13px !important;
    padding: 0.375rem 0.875rem !important;
    border-radius: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 0.25px !important;
}

.domain-status.available,
.availability-badge.available {
    background: #34a853 !important;
    color: white !important;
}

.domain-status.taken,
.availability-badge.unavailable {
    background: #5f6368 !important;
    color: white !important;
}

/* Add to Cart Button in Domain Result */
.domain-add-btn,
.btn-add-domain {
    padding: 0.5rem 1.25rem !important;
    background: #1a73e8 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.domain-add-btn:hover {
    background: #1765cc !important;
}

/* Domain Transfer Section */
.domain-transfer-section,
.domain-existing-section {
    margin-top: 2rem !important;
    padding-top: 2rem !important;
    border-top: 1px solid #e8eaed !important;
}

.domain-option-tabs {
    display: flex !important;
    gap: 0.5rem !important;
    margin-bottom: 1.5rem !important;
    border-bottom: 2px solid #e8eaed !important;
}

.domain-option-tab {
    padding: 0.75rem 1.5rem !important;
    border: none !important;
    background: transparent !important;
    color: #5f6368 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.domain-option-tab:hover {
    color: #1a73e8 !important;
}

.domain-option-tab.active {
    color: #1a73e8 !important;
    border-bottom-color: #1a73e8 !important;
}

/* Transfer/Existing Domain Input */
.domain-transfer-input,
.domain-existing-input {
    width: 100% !important;
    padding: 1rem 1.25rem !important;
    border: 2px solid #dadce0 !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    margin-bottom: 1rem !important;
}

.domain-transfer-input:focus {
    border-color: #1a73e8 !important;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1) !important;
    outline: none !important;
}

/* EPP/Auth Code Input */
.epp-code-input {
    width: 100% !important;
    padding: 0.875rem 1rem !important;
    border: 1px solid #dadce0 !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    margin-top: 0.75rem !important;
}

.epp-code-label {
    font-size: 13px !important;
    color: #5f6368 !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}

/* Domain Suggestions */
.domain-suggestions {
    margin-top: 1.5rem !important;
    padding: 1.5rem !important;
    background: #f8f9fa !important;
    border-radius: 8px !important;
    border: 1px solid #e8eaed !important;
}

.suggestions-header {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #202124 !important;
    margin-bottom: 1rem !important;
}

.suggestion-item {
    padding: 0.875rem 1rem !important;
    background: white !important;
    border: 1px solid #dadce0 !important;
    border-radius: 4px !important;
    margin-bottom: 0.5rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.suggestion-item:hover {
    border-color: #1a73e8 !important;
    background: #f8f9fa !important;
}

.suggestion-name {
    font-size: 14px !important;
    color: #202124 !important;
}

.suggestion-price {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1a73e8 !important;
}

/* Loading State for Domain Search */
.domain-loading {
    text-align: center !important;
    padding: 2rem !important;
}

.domain-loading-spinner {
    width: 40px !important;
    height: 40px !important;
    border: 3px solid #e8eaed !important;
    border-top-color: #1a73e8 !important;
    border-radius: 50% !important;
    animation: spin 0.8s linear infinite !important;
    margin: 0 auto 1rem !important;
}

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

.domain-loading-text {
    font-size: 14px !important;
    color: #5f6368 !important;
}

/* Mobile Responsive for Domain Section */
@media (max-width: 768px) {
    /* Search Box Padding */
    .search-box {
        padding: 1.25rem !important;
    }
    
    /* Stack Search Input and Button Vertically */
    .search-group,
    .search-group-lg {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    /* Full Width Search Button on Mobile */
    .search-group-btn {
        width: 100% !important;
    }
    
    .search-group-btn .btn,
    #btnCheckAvailability {
        width: 100% !important;
        padding: 1rem !important;
    }
    
    /* Domain Input - Reduce Padding on Small Screens */
    .search-field input.form-control {
        padding: 0.875rem 1rem 0.875rem 2.75rem !important;
        font-size: 15px !important;
    }
    
    /* Spotlight TLDs - Smaller Grid on Mobile */
    .spotlight-tlds {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
        gap: 0.75rem !important;
    }
    
    /* Domain Results - Reduce Padding */
    #DomainSearchResults,
    .domain-results {
        padding: 1rem !important;
    }
    
    /* Primary Result - Stack Content */
    #primaryLookupResult {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
        padding: 1rem !important;
    }
    
    .domain-result-actions {
        width: 100% !important;
        justify-content: space-between !important;
    }
    
    /* TLD Pricing Table - Full Width on Mobile */
    .tld-pricing-table {
        padding: 1rem !important;
    }
}

/* Order Summary Redesign */
.order-summary,
.checkout-summary,
.cart-summary {
    background: white !important;
    border: 1px solid #dadce0 !important;
    border-radius: 8px !important;
    padding: 1.5rem !important;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15) !important;
    position: sticky;
    top: 1rem;
}

.summary-header {
    font-size: 16px;
    font-weight: 500;
    color: #202124;
    margin: 0 0 1rem 0;
    padding: 0 0 1rem 0;
    border-bottom: 1px solid #e8eaed;
    letter-spacing: 0.25px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f3f4;
}

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

.summary-item-name {
    font-size: 14px;
    color: #202124;
    flex: 1;
}

.summary-item-qty {
    font-size: 13px;
    color: #5f6368;
    margin-left: 0.5rem;
}

.summary-item-price {
    font-size: 14px;
    color: #202124;
    font-weight: 500;
    margin-left: 1rem;
}

.summary-subtotal,
.summary-discount,
.summary-tax {
    display: flex;
    justify-content: space-between;
    padding: 0.625rem 0;
    font-size: 14px;
    color: #5f6368;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0 0 0;
    margin-top: 1rem;
    border-top: 2px solid #e8eaed;
    font-size: 20px;
    font-weight: 500;
    color: #202124;
}

.summary-total-label {
    color: #202124;
}

.summary-total-amount {
    color: #1a73e8;
    font-weight: 500;
}

/* Promo Code Section */
.promo-code-section {
    margin: 1rem 0;
    padding: 1rem 0;
    border-top: 1px solid #e8eaed;
}

.promo-input-group {
    display: flex;
    gap: 0.5rem;
}

.promo-input {
    flex: 1;
    padding: 0.625rem 0.875rem !important;
    border: 1px solid #dadce0 !important;
    border-radius: 4px !important;
    font-size: 14px !important;
}

.btn-apply-promo {
    padding: 0.625rem 1rem !important;
    background: white !important;
    color: #1a73e8 !important;
    border: 1px solid #1a73e8 !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    white-space: nowrap;
}

.btn-apply-promo:hover {
    background: #f8f9fa !important;
}

/* Checkout Button */
.btn-checkout,
.btn-complete-order {
    width: 100%;
    padding: 0.875rem !important;
    background: #1a73e8 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-top: 1rem;
    cursor: pointer;
    transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.btn-checkout:hover,
.btn-complete-order:hover {
    background: #1765cc !important;
    box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
}

/* Continue Shopping Link */
.continue-shopping {
    display: block;
    text-align: center;
    margin-top: 1rem;
    font-size: 14px;
    color: #1a73e8;
    text-decoration: none;
}

.continue-shopping:hover {
    text-decoration: underline;
}

/* Configuration Options */
.config-option,
.configurable-option {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid #e8eaed;
    border-radius: 4px;
    background: #f8f9fa;
}

.config-option-label {
    font-size: 14px;
    font-weight: 500;
    color: #202124;
    margin-bottom: 0.5rem;
    display: block;
}

.config-option-description {
    font-size: 13px;
    color: #5f6368;
    margin-bottom: 0.75rem;
}

/* Quantity Selector */
.qty-selector {
    display: inline-flex;
    align-items: center;
    border: 1px solid #dadce0;
    border-radius: 4px;
    overflow: hidden;
}

.qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: white;
    color: #5f6368;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.qty-btn:hover {
    background: #f8f9fa;
}

.qty-input {
    width: 50px;
    height: 32px;
    border: none;
    border-left: 1px solid #dadce0;
    border-right: 1px solid #dadce0;
    text-align: center;
    font-size: 14px;
    color: #202124;
}

/* Trust Badges */
.trust-badges {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12px;
    color: #5f6368;
}

.trust-badge::before {
    content: "🔒";
    font-size: 16px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .billing-cycle-selector,
    .cycle-selector {
        flex-direction: column;
    }
    
    .cycle-option {
        min-width: 100%;
    }
    
    .domain-search-box {
        flex-direction: column;
    }
    
    .domain-search-button {
        width: 100%;
    }
    
    .domain-tld-list {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
    
    .order-summary {
        position: static;
        margin-top: 1.5rem;
    }
}