/**
 * OCN Dark Theme Customization for Order Form
 * Matches ocnetworks.co.uk branding
 */

/* Global background and text colors */
body {
    background-color: #0e1623 !important;
    color: #e2e8f0 !important;
}

/* Main order container */
#order-standard_cart {
    background-color: #0e1623 !important;
}

/* Product boxes - dark background */
#order-standard_cart .products .product {
    background: #1a2332 !important;
    border: 1px solid rgba(249, 115, 22, 0.2) !important;
}

/* Product headers - orange gradient accent */
#order-standard_cart .products .product header {
    background: linear-gradient(135deg, #1a2332 0%, #0e1623 100%) !important;
    border-bottom: 2px solid #f97316 !important;
}

#order-standard_cart .products .product header span {
    color: #fff !important;
}

#order-standard_cart .products .product header .qty {
    color: #94a3b8 !important;
}

/* Product description text */
#order-standard_cart .products .product div.product-desc {
    color: #cbd5e1 !important;
    background-color: #1a2332 !important;
}

/* Product info section - dark theme */
#order-standard_cart .product-info {
    background-color: #1a2332 !important;
    border-top: 1px solid rgba(249, 115, 22, 0.2) !important;
    border-bottom: 1px solid rgba(249, 115, 22, 0.2) !important;
    color: #e2e8f0 !important;
}

#order-standard_cart .product-info .product-title {
    color: #fff !important;
}

/* View cart items header - orange theme */
#order-standard_cart .view-cart-items-header {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: #fff !important;
    border: none !important;
}

#order-standard_cart .view-cart-items {
    border-bottom: 2px solid #f97316 !important;
}

/* Cart items - alternating dark backgrounds */
#order-standard_cart .view-cart-items .item {
    background-color: #1a2332 !important;
    border-color: rgba(249, 115, 22, 0.1) !important;
    color: #e2e8f0 !important;
}

#order-standard_cart .view-cart-items .item:nth-child(even) {
    background-color: #0f1a2a !important;
}

/* Labels and form text */
#order-standard_cart label,
#order-standard_cart p.domain-renewal-desc {
    color: #cbd5e1 !important;
}

/* Panel/card backgrounds */
.panel,
.card {
    background-color: #1a2332 !important;
    border-color: rgba(249, 115, 22, 0.2) !important;
}

.panel-heading,
.card-header {
    background: linear-gradient(135deg, #1a2332 0%, #0e1623 100%) !important;
    border-bottom: 2px solid #f97316 !important;
    color: #fff !important;
}

.panel-body,
.card-body {
    background-color: #1a2332 !important;
    color: #e2e8f0 !important;
}

/* Form controls - dark theme */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    background-color: #0f1a2a !important;
    border: 1px solid rgba(249, 115, 22, 0.3) !important;
    color: #e2e8f0 !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    background-color: #1a2332 !important;
    border-color: #f97316 !important;
    box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.25) !important;
}

/* Buttons - orange gradient */
.btn-primary,
.btn-success {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    border: none !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-success:hover {
    background: linear-gradient(135deg, #ea580c 0%, #dc2626 100%) !important;
}

.btn-default,
.btn-secondary {
    background-color: #1a2332 !important;
    border: 1px solid rgba(249, 115, 22, 0.3) !important;
    color: #e2e8f0 !important;
}

.btn-default:hover,
.btn-secondary:hover {
    background-color: #0f1a2a !important;
    border-color: #f97316 !important;
}

/* Tables - dark theme */
table {
    color: #e2e8f0 !important;
}

thead,
.table-header {
    background: linear-gradient(135deg, #1a2332 0%, #0e1623 100%) !important;
    border-bottom: 2px solid #f97316 !important;
    color: #fff !important;
}

tbody tr {
    background-color: #1a2332 !important;
    border-color: rgba(249, 115, 22, 0.1) !important;
}

tbody tr:nth-child(even) {
    background-color: #0f1a2a !important;
}

/* Sidebar elements */
.cart-sidebar,
.secondary-cart-sidebar {
    background-color: transparent !important;
}

/* Order summary */
.order-summary {
    background-color: #1a2332 !important;
    border: 1px solid rgba(249, 115, 22, 0.2) !important;
    border-radius: 8px !important;
}

.order-summary .header {
    background: linear-gradient(135deg, #1a2332 0%, #0e1623 100%) !important;
    border-bottom: 2px solid #f97316 !important;
    color: #fff !important;
    padding: 15px !important;
    border-radius: 8px 8px 0 0 !important;
}

.order-summary .summary-container {
    background-color: #1a2332 !important;
    padding: 20px !important;
}

/* Domain pricing table */
.domain-pricing {
    background-color: #1a2332 !important;
}

.domain-pricing .tld-pricing-header {
    background: linear-gradient(135deg, #1a2332 0%, #0e1623 100%) !important;
    border-bottom: 2px solid #f97316 !important;
    color: #fff !important;
}

.domain-pricing .tld-row {
    background-color: #1a2332 !important;
    border-color: rgba(249, 115, 22, 0.1) !important;
    color: #e2e8f0 !important;
}

.domain-pricing .tld-row:nth-child(even) {
    background-color: #0f1a2a !important;
}

/* Alert boxes */
.alert {
    background-color: #1a2332 !important;
    border-color: rgba(249, 115, 22, 0.3) !important;
    color: #e2e8f0 !important;
}

.alert-success {
    background-color: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #4ade80 !important;
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

.alert-warning {
    background-color: rgba(251, 191, 36, 0.1) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    color: #fbbf24 !important;
}

.alert-info {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #60a5fa !important;
}

/* Modal dialogs */
.modal-content {
    background-color: #1a2332 !important;
    border: 1px solid rgba(249, 115, 22, 0.3) !important;
    margin-top: 200px !important;
}

.modal-header {
    background: linear-gradient(135deg, #1a2332 0%, #0e1623 100%) !important;
    border-bottom: 2px solid #f97316 !important;
    color: #fff !important;
}

.modal-body {
    background-color: #1a2332 !important;
    color: #e2e8f0 !important;
    overflow: visible !important;
}

.modal-footer {
    background-color: #0f1a2a !important;
    border-top: 1px solid rgba(249, 115, 22, 0.2) !important;
    padding: 30px 15px !important;
    display: block !important;
    text-align: center !important;
    min-height: 100px !important;
    overflow: visible !important;
    position: relative !important;
}

/* Nuclear option for button visibility */
.modal-footer *,
.modal-footer button,
.modal-footer .btn {
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-block !important;
}

/* Ensure modal footer buttons are visible and properly styled */
.modal-footer .btn,
.modal-footer button,
#order-standard_cart .modal-footer .btn,
#order-standard_cart .modal-footer button,
.modal-footer .btn-default,
.modal-footer .btn-primary,
.modal-remove-item .modal-footer button,
.modal-remove-item .btn {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 9999 !important;
    min-width: 120px !important;
    padding: 12px 40px !important;
    margin: 10px !important;
    font-size: 18px !important;
    line-height: normal !important;
    height: auto !important;
    float: none !important;
    transform: none !important;
    clip: auto !important;
    clip-path: none !important;
}

.modal-footer .btn-default,
.modal-footer button[data-dismiss="modal"] {
    background-color: #1a2332 !important;
    border: 2px solid #f97316 !important;
    color: #e2e8f0 !important;
}

.modal-footer .btn-default:hover,
.modal-footer button[data-dismiss="modal"]:hover {
    background-color: #243447 !important;
    border-color: #fb923c !important;
}

.modal-footer .btn-primary,
.modal-footer button[type="submit"] {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    border: none !important;
    color: #fff !important;
}

.modal-footer .btn-primary:hover,
.modal-footer button[type="submit"]:hover {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%) !important;
}

/* Override any conflicting modal styles */
#order-standard_cart .modal-remove-item .modal-footer {
    padding-bottom: 30px !important;
}

/* Suggested domains card */
.suggested-domains .card-header {
    background: linear-gradient(135deg, #1a2332 0%, #0e1623 100%) !important;
    border-bottom: 2px solid #f97316 !important;
    color: #fff !important;
}

/* Market Connect promo */
#order-standard_cart .mc-promo .header {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: #fff !important;
}

/* Price displays */
.price,
.pricing,
.product-pricing {
    color: #fbbf24 !important;
}

/* Text colors for better readability */
h1, h2, h3, h4, h5, h6 {
    color: #fff !important;
}

p, span, div {
    color: #e2e8f0;
}

/* Links */
a {
    color: #f97316 !important;
}

a:hover {
    color: #ea580c !important;
}

/* Dropdown menus */
.dropdown-menu {
    background-color: #1a2332 !important;
    border: 1px solid rgba(249, 115, 22, 0.3) !important;
}

.dropdown-item {
    color: #e2e8f0 !important;
}

.dropdown-item:hover {
    background-color: rgba(249, 115, 22, 0.1) !important;
    color: #fff !important;
}

/* Badges and labels */
.badge,
.label {
    background-color: #f97316 !important;
    color: #fff !important;
}

/* Progress bars */
.progress {
    background-color: #0f1a2a !important;
}

.progress-bar {
    background-color: #f97316 !important;
}

/* List groups */
.list-group-item {
    background-color: #1a2332 !important;
    border: 1px solid rgba(249, 115, 22, 0.2) !important;
    color: #e2e8f0 !important;
}

.list-group-item:hover {
    background-color: #0f1a2a !important;
}

/* Navs and tabs */
.nav-tabs {
    border-bottom: 2px solid #f97316 !important;
}

.nav-tabs .nav-link {
    background-color: #0f1a2a !important;
    border-color: rgba(249, 115, 22, 0.2) !important;
    color: #cbd5e1 !important;
}

.nav-tabs .nav-link.active {
    background-color: #1a2332 !important;
    border-bottom-color: transparent !important;
    color: #fff !important;
}

#order-standard_cart .view-cart-tabs .tab-content {
    background-color: #1a2332 !important;
    border: 1px solid rgba(249, 115, 22, 0.2) !important;
    border-top: none !important;
}

/* Pagination */
.pagination .page-link {
    background-color: #1a2332 !important;
    border: 1px solid rgba(249, 115, 22, 0.2) !important;
    color: #e2e8f0 !important;
}

.pagination .page-link:hover {
    background-color: #0f1a2a !important;
    border-color: #f97316 !important;
}

.pagination .page-item.active .page-link {
    background-color: #f97316 !important;
    border-color: #f97316 !important;
    color: #fff !important;
}

/* Checkout button - prominent orange */
.checkout-button,
#checkout {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 12px 30px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px rgba(249, 115, 22, 0.3) !important;
    transition: all 0.3s ease !important;
}

.checkout-button:hover,
#checkout:hover {
    background: linear-gradient(135deg, #ea580c 0%, #dc2626 100%) !important;
    box-shadow: 0 6px 12px rgba(249, 115, 22, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Account Selection Container - Dark Theme */
#order-standard_cart .account-select-container div.account {
    background: transparent !important;
    border: 1px solid rgba(249, 115, 22, 0.2) !important;
    border-right: 1px solid rgba(249, 115, 22, 0.2) !important;
    padding: 10px !important;
    color: #e2e8f0 !important;
    transition: all 0.3s ease !important;
}

#order-standard_cart .account-select-container div.account:hover {
    background: rgba(249, 115, 22, 0.05) !important;
    border-color: rgba(249, 115, 22, 0.4) !important;
}

#order-standard_cart .account-select-container div.account.active {
    background: rgba(249, 115, 22, 0.1) !important;
    border: 1px solid #f97316 !important;
    border-right: 1px solid #f97316 !important;
    color: #fff !important;
}

#order-standard_cart .account-select-container div.account:not(.border-bottom) {
    border-bottom: 1px solid rgba(249, 115, 22, 0.2) !important;
}

/* Apply Credit Container - Dark Theme */
#order-standard_cart .apply-credit-container {
    margin: 15px 0 !important;
    padding: 15px !important;
    background-color: #1e293b !important;
    border: 1px solid rgba(249, 115, 22, 0.3) !important;
    border-radius: 0.75rem !important;
    color: #e2e8f0 !important;
}

/* Credit Card Input Container - Dark Theme */
#order-standard_cart .cc-input-container {
    padding: 15px 15px 10px 15px !important;
    background-color: #1e293b !important;
    border: 1px solid rgba(249, 115, 22, 0.3) !important;
    border-radius: 0.75rem !important;
}

/* Credit Card Input Fields - Dark Theme */
#order-standard_cart .cc-input-container input,
#order-standard_cart .cc-input-container input[type="text"],
#order-standard_cart .cc-input-container input[type="tel"],
#order-standard_cart .cc-input-container input[type="number"],
#order-standard_cart .cc-input-container select,
#creditCardInputFields input,
.payment-term-input input,
input[name="ccnumber"],
input[name="cccvv"],
input[name="ccexpirydate"],
.cc-input-container input,
.cc-input-container select {
    border: 1px solid rgba(71, 85, 105, 0.5) !important;
    border-radius: 0.75rem !important;
    background: var(--ocn-background-light, #1a2332) !important;
    background-color: var(--ocn-background-light, #1a2332) !important;
    color: var(--ocn-foreground, #e2e8f0) !important;
    font-family: var(--font-body, 'Montserrat', sans-serif) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    padding: 0.9rem 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

#order-standard_cart .cc-input-container input:focus,
#creditCardInputFields input:focus,
.payment-term-input input:focus,
.cc-input-container input:focus,
.cc-input-container select:focus {
    border-color: var(--ocn-primary, #f97316) !important;
    background: var(--ocn-background-lighter, #1e293b) !important;
    background-color: var(--ocn-background-lighter, #1e293b) !important;
    box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.25) !important;
    outline: none !important;
}

#order-standard_cart .cc-input-container input::placeholder,
#creditCardInputFields input::placeholder,
.cc-input-container input::placeholder {
    color: var(--ocn-foreground-dim, rgba(226, 232, 240, 0.6)) !important;
    font-size: 15px !important;
}

/* More specific selectors for stubborn payment forms */
div[class*="cc-input"] input,
div[id*="creditCard"] input,
.payment-container input {
    border: 1px solid rgba(71, 85, 105, 0.5) !important;
    border-radius: 0.75rem !important;
    background: #1a2332 !important;
    color: #e2e8f0 !important;
    font-size: 15px !important;
    padding: 0.9rem 0.75rem !important;
}

/* Form Controls - Dark Theme */
#order-standard_cart .field,
#order-standard_cart .form-control {
    border: 1px solid rgba(71, 85, 105, 0.3) !important;
    color: #e2e8f0 !important;
    background-color: #1a2332 !important;
    border-radius: 0.5rem !important;
}

#order-standard_cart .form-control:focus {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.25) !important;
}

/* Section Dividers - Dark Theme */
#order-standard_cart .sub-heading {
    border-top: 1px solid rgba(71, 85, 105, 0.3) !important;
}

/* Domain Selection Options - Dark Theme */
#order-standard_cart .domain-selection-options .option {
    background-color: #1a2332 !important;
    border: 1px solid rgba(71, 85, 105, 0.3) !important;
}

#order-standard_cart .domain-selection-options .option:hover {
    background-color: #1e293b !important;
    border-color: rgba(249, 115, 22, 0.3) !important;
}

#order-standard_cart .domain-selection-options .option-selected {
    background-color: #1e293b !important;
    border: 1px solid #f97316 !important;
}

/* View Cart Tabs - Dark Theme */
#order-standard_cart .view-cart-tabs .tab-content {
    background-color: #1a2332 !important;
    border: 1px solid rgba(71, 85, 105, 0.3) !important;
    border-radius: 0 0 0.75rem 0.75rem !important;
}

/* Promotion Code Box - Dark Theme */
#order-standard_cart .view-cart-promotion-code {
    background-color: #1e293b !important;
    border: 1px dashed rgba(249, 115, 22, 0.3) !important;
    border-radius: 0.5rem !important;
}

/* Gateway Checkout - Dark Theme */
#order-standard_cart .view-cart-gateway-checkout {
    background-color: #1e293b !important;
    border: 1px solid rgba(249, 115, 22, 0.3) !important;
    border-radius: 0.75rem !important;
}

/* Domain Checker Input Box - Dark Theme */
.domain-checker-container .input-group-box {
    background-color: #1a2332 !important;
    border: 1px solid rgba(71, 85, 105, 0.3) !important;
}

/* Spotlight TLD - Dark Theme */
.spotlight-tld {
    background-color: #1a2332 !important;
    border: 1px solid rgba(71, 85, 105, 0.3) !important;
    color: #e2e8f0 !important;
}

.spotlight-tld .unavailable,
.spotlight-tld .invalid {
    background-color: #1e293b !important;
    border-color: rgba(71, 85, 105, 0.3) !important;
    color: rgba(226, 232, 240, 0.6) !important;
}

.spotlight-tld .btn:not(.domain-contact-support) {
    background-color: #f97316 !important;
    border-color: #ea580c !important;
}

.spotlight-tld .btn:not(.domain-contact-support):hover {
    background-color: #fb923c !important;
}

/* Payment Gateway iFrame Styling - Dark Theme */
/* Stripe Elements */
.StripeElement,
.stripe-card-element {
    background-color: #1a2332 !important;
    border: 1px solid rgba(71, 85, 105, 0.5) !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem !important;
}

.StripeElement--focus {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.25) !important;
}

.StripeElement--invalid {
    border-color: #ef4444 !important;
}

/* PayPal Hosted Fields */
#card-number,
#card-cvv,
#card-expiry,
.card-field-wrapper,
.hosted-field {
    background-color: #1a2332 !important;
    border: 1px solid rgba(71, 85, 105, 0.5) !important;
    border-radius: 0.5rem !important;
}

/* Square Payment Form */
#sq-card-number,
#sq-cvv,
#sq-expiration-date,
#sq-postal-code {
    background-color: #1a2332 !important;
    border: 1px solid rgba(71, 85, 105, 0.5) !important;
    border-radius: 0.5rem !important;
}

/* Generic payment input wrappers */
.payment-input-wrapper,
.card-input-wrapper,
.hosted-field-wrapper {
    background-color: #1a2332 !important;
}

/* Payment form labels */
#order-standard_cart .cc-input-container label,
.payment-form label,
.cc-input-container label {
    color: var(--ocn-foreground-muted, #cbd5e1) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
}

/* Universal input override for payment pages */
#order-standard_cart input,
#order-standard_cart select,
#order-standard_cart textarea {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--ocn-foreground, #e2e8f0) !important;
}

/* Ensure all inputs in checkout have consistent styling */
#checkout input[type="text"],
#checkout input[type="tel"],
#checkout input[type="email"],
#checkout input[type="number"],
#frmCheckout input,
#frmPayment input {
    background: var(--ocn-background-light, #1a2332) !important;
    border: 1px solid rgba(71, 85, 105, 0.5) !important;
    border-radius: 0.75rem !important;
    color: var(--ocn-foreground, #e2e8f0) !important;
    font-size: 15px !important;
    padding: 0.9rem 0.75rem !important;
}

/* AGGRESSIVE INPUT OVERRIDES - Override payment gateway styles */
input,
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="email"] {
    border: 1px solid rgba(71, 85, 105, 0.5) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgba(71, 85, 105, 0.5) !important;
    border-radius: 0.75rem !important;
    box-sizing: border-box !important;
    background: #1a2332 !important;
    background-color: #1a2332 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    padding: 0.9rem 0.75rem !important;
    padding-top: 0.9rem !important;
    padding-bottom: 0.9rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    width: 100% !important;
    color: #e2e8f0 !important;
}

input:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="email"]:focus {
    border-color: #f97316 !important;
    background: #1e293b !important;
    background-color: #1e293b !important;
    outline: none !important;
    box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.25) !important;
}

/* ========================================
   FINAL NUCLEAR OPTION - Override everything
   ======================================== */
* input,
body input,
html input,
div input,
form input {
    border: 1px solid rgba(71, 85, 105, 0.5) !important;
    border-radius: 0.75rem !important;
    background: #1a2332 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    padding: 0.9rem 0.75rem !important;
    color: #e2e8f0 !important;
}

* input:focus,
body input:focus,
html input:focus,
div input:focus,
form input:focus {
    border-color: #f97316 !important;
    background: #1e293b !important;
    box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.25) !important;
}