/* custom.css - Yohost Order Form Cart Override */

/* Import main theme variables if they exist, otherwise fallback */
:root {
    --radius: 0.5rem;
    --background: oklch(100% 0 0);
    --foreground: oklch(14.5% 0 0);
    --surface: oklch(96% 0 0);
    --card: oklch(100% 0 0);
    --primary: oklch(20% 0 0);
    --primary-foreground: oklch(98.5% 0 0);
    --secondary: oklch(92% 0 0);
    --secondary-foreground: oklch(20% 0 0);
    --border: oklch(85% 0 0);
    --input: oklch(85% 0 0);
}

:root.dark, body.dark-mode {
    --background: oklch(14.5% 0 0);
    --foreground: oklch(100% 0 0);
    --surface: oklch(18% 0 0);
    --card: oklch(16% 0 0);
    --primary: oklch(100% 0 0);
    --primary-foreground: oklch(20% 0 0);
    --secondary: oklch(22% 0 0);
    --secondary-foreground: oklch(100% 0 0);
    --border: oklch(22% 0 0);
    --input: oklch(22% 0 0);
}

/* Base resets for Cart */
.store-order-container {
    background-color: var(--background) !important;
    color: var(--foreground) !important;
    font-family: 'Inter', sans-serif !important;
}

/* Custom Pricing Cards (Products listing) */
.yohost-cart-card {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    transition: all 0.15s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.yohost-cart-card:hover {
    border-color: var(--primary);
}
.yohost-cart-card.recommended {
    border-color: var(--primary);
    border-width: 2px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

/* cycle selector blocks */
.btn-cycle-selector {
    background-color: var(--surface);
    border: 1px solid var(--border);
    color: var(--foreground);
    border-radius: var(--radius);
    padding: 10px 15px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-cycle-selector.active, .btn-cycle-selector:hover {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
}

/* Order Summary Box */
.order-summary-box {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}

/* Buttons in Cart */
.yohost-cart-btn-primary {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 13px !important;
    letter-spacing: 0.05em;
    border-radius: var(--radius) !important;
    height: 2.75rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    padding: 0 20px !important;
}
.yohost-cart-btn-primary:hover {
    opacity: 0.9;
}

.yohost-cart-btn-secondary {
    background-color: var(--secondary) !important;
    color: var(--secondary-foreground) !important;
    border: 1px solid var(--border) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border-radius: var(--radius) !important;
    height: 2.75rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 20px !important;
}

/* inputs override */
.store-order-container input[type="text"],
.store-order-container select,
.store-order-container textarea {
    background-color: var(--card) !important;
    border: 1px solid var(--border) !important;
    color: var(--foreground) !important;
    border-radius: var(--radius) !important;
}
.store-order-container input[type="text"]:focus,
.store-order-container select:focus {
    border-color: var(--primary) !important;
}