/*
 * HYEHOST-NEXUS Dark Mode - Nexus Cart Orderform
 *
 * Dark mode styling with HyeHost purple accents for the Nexus Cart orderform.
 * These variables apply to the orderform's Shadow DOM.
 */

/* Dark mode custom styles for the Nexus ordering system */
:host, :root {
    --hyehost-purple-400: #a855f7;
    --hyehost-purple-500: #9333ea;
    --hyehost-purple-600: #7c22d6;
    --hyehost-purple-700: #6b21a8;

    --vl-primary: #9333ea;
    --vl-primary-lifted: #7c22d6;
    --vl-primary-accented: #6b21a8;
    --vl-secondary: #9ca0b3;
    --vl-secondary-lifted: #b0b4c7;
    --vl-secondary-accented: #c8ccdb;
    --vl-success: #22c55e;
    --vl-success-lifted: #16a34a;
    --vl-success-accented: #15803d;
    --vl-info: #3b82f6;
    --vl-info-lifted: #2563eb;
    --vl-info-accented: #1d4ed8;
    --vl-notice: #a855f7;
    --vl-notice-lifted: #9333ea;
    --vl-notice-accented: #7c22d6;
    --vl-warning: #f97316;
    --vl-warning-lifted: #ea580c;
    --vl-warning-accented: #c2410c;
    --vl-error: #ef4444;
    --vl-error-lifted: #dc2626;
    --vl-error-accented: #b91c1c;
    --vl-grayscale: #25252f;
    --vl-grayscale-lifted: #1c1c24;
    --vl-grayscale-accented: #141419;
    --vl-neutral: #9ca0b3;
    --vl-neutral-lifted: #b0b4c7;
    --vl-neutral-accented: #c8ccdb;
    --vl-text-inverted: #0f0f12;
    --vl-text-muted: #6b7089;
    --vl-text-lifted: #8b8fa3;
    --vl-text-accented: #b0b4c7;
    --vl-text: #eef0f6;
    --vl-border-muted: #1e1e28;
    --vl-border: #2a2a36;
    --vl-border-lifted: #3a3a48;
    --vl-border-accented: #4a4a5a;
    --vl-bg: #16161d;
    --vl-bg-muted: #111116;
    --vl-bg-lifted: #0f0f14;
    --vl-bg-accented: #1c1c24;
    --vl-bg-inverted: #eef0f6;
    --vl-text-xs: 0.625rem;
    --vl-text-sm: 0.75rem;
    --vl-text-md: 0.875rem;
    --vl-text-lg: 1rem;
    --vl-outline-sm: 1px;
    --vl-outline-md: 2px;
    --vl-outline-lg: 3px;
    --vl-rounding-sm: 0.375rem;
    --vl-rounding-md: 0.625rem;
    --vl-rounding-lg: 0.75rem;
    --vl-letter-spacing: 0.01em;
    --vl-disabled-opacity: 25%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}



/* Fix phone input overlap on checkout/register */
.iti { 
    display: block !important; 
    width: 100%; 
}

/* Base phone input padding */
.iti input[type=tel],
.iti input[name="phonenumber"],
.iti input[name="domaincontactphonenumber"], 
.iti #inputPhone, 
.iti #inputDCPhone,
.prepend-icon .field-icon + input[type=tel],
.prepend-icon .field-icon + .iti > input {
    padding-left: 90px !important; /* Make room for the country code flag */
}

/* Force flag container to show clearly */
.iti__flag-container {
    z-index: 5 !important;
}

/* Hide the font-awesome icon since the flag handles it */
.form-group.prepend-icon > label[for="inputPhone"],
.form-group.prepend-icon > label[for="inputDCPhone"],
.form-group.prepend-icon > label[for="customfield1"],
.form-group.prepend-icon > label:has(+ .iti) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
}

@supports selector(:has(div)) {
    .prepend-icon:has(.iti) .field-icon {
        display: none !important;
    }
}