/* ==============================================================
IDHosting — HostModules-style order form
Scoped under ; disable by deleting
/overwrites/common.tpl.
┌─────────────────────────────────────────────────────────────┐
│ TO CHANGE THE BRAND COLOR: │
│ Edit the --idh-brand hex below. All accents, buttons, │
│ selected states, focus rings, and hover underlines │
│ update automatically. Keep the 50-variant at ~95% white │
│ mixed with your brand, and the 600-variant ~10% darker. │
│ Quick values for reference: │
│ Royal blue: brand #2563eb / 600 #1d4ed8 / 50 #eff6ff │
│ Teal: brand #0d9488 / 600 #0f766e / 50 #f0fdfa │
│ Indigo: brand #4f46e5 / 600 #4338ca / 50 #eef2ff │
│ Red: brand #dc2626 / 600 #b91c1c / 50 #fef2f2 │
│ Green: brand #16a34a / 600 #15803d / 50 #f0fdf4 │
└─────────────────────────────────────────────────────────────┘
============================================================== */
/* ---------- Design tokens ----------------------------------- */
html.idh-order{
/* === BRAND — change these 3 to rebrand the entire order form === */
--idh-brand:#2563eb; /* primary accent (buttons, rings, links) */
--idh-brand-600:#1d4ed8; /* darker hover/active state */
--idh-brand-50:#eff6ff; /* tinted backgrounds (selected gateway, etc.) */
/* === Neutrals (usually no need to touch) === */
--idh-ink:#0b1220;
--idh-ink-2:#1f2937;
--idh-muted:#6b7280;
--idh-muted-2:#9ca3af;
--idh-line:#e5e7eb;
--idh-line-2:#f1f2f4;
--idh-bg:#f7f8fb;
--idh-card:#ffffff;
--idh-ok:#10b981;
--idh-warn:#f59e0b;
--idh-err:#ef4444;
--idh-radius:14px;
--idh-radius-sm:10px;
--idh-shadow-sm:0 1px 2px rgba(16,24,40,.05);
--idh-shadow:0 6px 24px -8px rgba(16,24,40,.12), 0 2px 6px -2px rgba(16,24,40,.06);
--idh-shadow-lg:0 18px 40px -14px rgba(16,24,40,.18);
--idh-font:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
/* ---------- Global typography for order pages --------------- */
html.idh-order body,
html.idh-order .main-content,
html.idh-order .main-sidebar,
html.idh-order .panel,
html.idh-order .btn,
html.idh-order .form-control,
html.idh-order .summary-content,
html.idh-order .package{
font-family:var(--idh-font);
-webkit-font-smoothing:antialiased;
letter-spacing:-.005em;
}
html.idh-order body{color:var(--idh-ink);background:var(--idh-bg)}
html.idh-order .main-content{color:var(--idh-ink)}
html.idh-order h1, html.idh-order h2, html.idh-order h3,
html.idh-order .section-title, html.idh-order .package-title,
html.idh-order .page-title{letter-spacing:-.015em}
/* ---------- Container + layout tweaks ----------------------- */
html.idh-order .main-grid{gap:28px}
html.idh-order .main-content{padding:0}
html.idh-order .main-sidebar{min-width:340px}
@media (max-width:991px){html.idh-order .main-sidebar{min-width:0}}
/* Remove Lagom2's page sub-heading noise if present */
html.idh-order .section .section-header{margin-bottom:16px}
/* ==============================================================
STEP INDICATOR (injected by idh-order.js into .main-content)
============================================================== */
.idh-steps{
display:flex;align-items:center;gap:8px;
padding:20px 24px;margin:0 0 20px;
background:var(--idh-card);border:1px solid var(--idh-line);border-radius:var(--idh-radius);
box-shadow:var(--idh-shadow-sm);
}
.idh-step{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--idh-muted-2);flex:1;min-width:0}
.idh-step__num{
width:26px;height:26px;border-radius:50%;
background:var(--idh-line-2);color:var(--idh-muted);
display:grid;place-items:center;font-weight:600;font-size:12.5px;
flex:none;transition:all .2s ease;
}
.idh-step--done .idh-step__num{background:var(--idh-ok);color:#fff}
.idh-step--active .idh-step__num{background:var(--idh-brand);color:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.15)}
.idh-step--active, .idh-step--done{color:var(--idh-ink)}
.idh-step__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.idh-step__sep{flex:1;height:1px;background:var(--idh-line);align-self:center;min-width:12px}
@media (max-width:860px){
.idh-steps{padding:14px;gap:6px}
.idh-step__label{display:none}
}
/* ==============================================================
BUTTONS — refined primary, ghost, checkout
============================================================== */
html.idh-order .btn{
border-radius:11px;font-weight:600;padding:10px 16px;font-size:14px;
transition:all .15s ease;border-width:1px;
}
html.idh-order .btn-lg{padding:13px 22px;font-size:15px;border-radius:12px}
html.idh-order .btn-primary{
background:var(--idh-brand);border-color:var(--idh-brand);color:#fff;
box-shadow:0 6px 16px -8px rgba(37,99,235,.55);
}
html.idh-order .btn-primary:hover,
html.idh-order .btn-primary:focus,
html.idh-order .btn-primary:active{background:var(--idh-brand-600);border-color:var(--idh-brand-600);color:#fff}
html.idh-order .btn-primary-faded{
background:var(--idh-brand-50);color:var(--idh-brand-600);border-color:var(--idh-brand-50);
box-shadow:none;
}
html.idh-order .btn-primary-faded:hover{background:var(--idh-brand);color:#fff;border-color:var(--idh-brand)}
html.idh-order .btn-default,
html.idh-order .btn-secondary{
background:#fff;color:var(--idh-ink);border-color:var(--idh-line);
}
html.idh-order .btn-default:hover,
html.idh-order .btn-secondary:hover{border-color:var(--idh-muted-2);background:#fff;color:var(--idh-ink)}
html.idh-order .btn-checkout{width:100%;padding:14px 22px;border-radius:12px;font-size:15px}
/* ==============================================================
PANELS — soft cards, consistent radius / borders
============================================================== */
html.idh-order .panel,
html.idh-order .panel-form,
html.idh-order .panel-sidebar,
html.idh-order .panel-ordersummary,
html.idh-order .panel-choose-domain,
html.idh-order .panel-bodyless{
background:var(--idh-card);
border:1px solid var(--idh-line);
border-radius:var(--idh-radius);
box-shadow:var(--idh-shadow-sm);
margin-bottom:20px;
}
html.idh-order .panel-body{padding:24px}
html.idh-order .panel-footer{background:transparent;border-top:1px solid var(--idh-line);padding:18px 24px}
/* Alerts */
html.idh-order .alert,
html.idh-order .alert-lagom{
border-radius:var(--idh-radius-sm);border:1px solid var(--idh-line);
padding:14px 16px;box-shadow:none;
}
html.idh-order .alert-danger,
html.idh-order .alert-lagom.alert-danger{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}
html.idh-order .alert-info,
html.idh-order .alert-lagom.alert-info{background:var(--idh-brand-50);border-color:#bfdbfe;color:#1e3a8a}
html.idh-order .alert-warning,
html.idh-order .alert-lagom.alert-warning{background:#fffbeb;border-color:#fde68a;color:#78350f}
/* ==============================================================
PRODUCTS.TPL — plan grid (HostModules style)
============================================================== */
html.idh-order .section.products{margin-top:4px}
html.idh-order .section.products .row{margin-left:-12px;margin-right:-12px}
html.idh-order .section.products .row > .col,
html.idh-order .section.products .row > [class*="col-"]{padding-left:12px;padding-right:12px;margin-bottom:28px}
html.idh-order .package{
position:relative;
background:var(--idh-card);border:1px solid var(--idh-line);border-radius:var(--idh-radius);
padding:28px 24px;margin:0;height:100%;
display:flex;flex-direction:column;gap:18px;
box-shadow:var(--idh-shadow-sm);
transition:all .2s ease;
overflow:visible !important;
}
html.idh-order .package:hover{border-color:var(--idh-brand);box-shadow:var(--idh-shadow);transform:translateY(-2px)}
html.idh-order .package-featured,
html.idh-order .package.package-featured{
border-color:var(--idh-brand);
box-shadow:0 0 0 3px rgba(37,99,235,.10), var(--idh-shadow-sm);
}
html.idh-order .package-featured .label-corner,
html.idh-order .package .label-corner{
position:absolute;top:10px;left:50%;transform:translateX(-50%);
background:var(--idh-brand);color:#fff;font-size:11px;font-weight:700;
padding:5px 12px;border-radius:999px;letter-spacing:.06em;text-transform:uppercase;
line-height:1;white-space:nowrap;z-index:2;
}
html.idh-order .package-featured,
html.idh-order .package.package-featured{padding-top:46px}
html.idh-order .package-side-left{padding:0;background:transparent;display:contents}
html.idh-order .package-side-right{padding:0;margin-top:auto}
html.idh-order .package-header{padding:0;border:0;text-align:left;background:transparent}
html.idh-order .package .graphic-item{
width:40px;height:40px;border-radius:10px;background:var(--idh-brand-50);
color:var(--idh-brand);display:grid;place-items:center;margin:0 0 14px;
}
html.idh-order .package .graphic-item svg,
html.idh-order .package .graphic-item i{width:20px;height:20px;font-size:18px}
html.idh-order .package .package-title{
font-size:18px;font-weight:700;margin:0;text-align:left;color:var(--idh-ink);
}
html.idh-order .package .package-price{margin-top:10px;text-align:left}
html.idh-order .package .package-price .price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;justify-content:flex-start}
html.idh-order .package .package-price .price-starting-from{
display:block;color:var(--idh-muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;
margin-bottom:2px;font-weight:500;
}
html.idh-order .package .package-price .amount,
html.idh-order .package .package-price .price-amount,
html.idh-order .package .package-price .amt,
html.idh-order .package .package-price .price-num{
font-size:34px;font-weight:700;letter-spacing:-.02em;color:var(--idh-ink);line-height:1.1;
}
html.idh-order .package .package-price .price-cycle,
html.idh-order .package .package-price .cycle{color:var(--idh-muted);font-size:13px}
html.idh-order .package .package-price .price-setup{
display:block;color:var(--idh-muted);font-size:12px;margin-top:2px;
}
html.idh-order .package-body{padding:0;border:0;background:transparent;flex:1}
html.idh-order .package-content{padding:0;color:var(--idh-ink-2);font-size:14px;line-height:1.55}
html.idh-order .package-content ul,
html.idh-order .package-features{
list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;
}
html.idh-order .package-content ul li,
html.idh-order .package-features li{
display:flex;gap:8px;align-items:flex-start;
padding:0;border:0;
}
html.idh-order .package-content ul li::before,
html.idh-order .package-features li::before{
content:"";flex:none;width:16px;height:16px;margin-top:3px;
background:no-repeat center/contain
url("data:image/svg+xml;utf8,");
}
html.idh-order .package-footer{padding:0;background:transparent;border:0;margin-top:auto}
html.idh-order .package .btn-order-now,
html.idh-order .package .btn-primary{
display:block;width:100%;padding:12px 18px;border-radius:11px;font-size:14.5px;
}
/* Horizontal package variant simplification */
html.idh-order .package-horizontal{flex-direction:row;gap:24px;align-items:center}
@media (max-width:860px){html.idh-order .package-horizontal{flex-direction:column;align-items:stretch}}
/* ==============================================================
BILLING CYCLE TOGGLE (injected above product grid by JS)
============================================================== */
.idh-cycle-toggle{
display:inline-flex;background:var(--idh-line-2);border-radius:999px;padding:4px;gap:2px;
margin-bottom:24px;
}
.idh-cycle-toggle button{
border:0;background:transparent;color:var(--idh-muted);
padding:9px 18px;border-radius:999px;font-size:13.5px;font-weight:500;cursor:pointer;
display:inline-flex;align-items:center;gap:8px;transition:all .15s ease;
}
.idh-cycle-toggle button.is-active{background:#fff;color:var(--idh-ink);box-shadow:var(--idh-shadow-sm)}
.idh-cycle-toggle .idh-save{
font-size:11px;background:var(--idh-ok);color:#fff;padding:2px 7px;border-radius:999px;font-weight:700;
}
.idh-cycle-toggle-wrap{
display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
margin-bottom:6px;
}
.idh-cycle-toggle-wrap .idh-cycle-note{color:var(--idh-muted);font-size:13px}
/* ==============================================================
SIDEBAR CATEGORIES
============================================================== */
html.idh-order .main-sidebar .panel-sidebar,
html.idh-order .main-sidebar .sidebar-categories{
padding:16px;border-radius:var(--idh-radius);
}
html.idh-order .main-sidebar .list-categories,
html.idh-order .main-sidebar ul.nav{padding:0;margin:0;list-style:none}
html.idh-order .main-sidebar .list-categories li a,
html.idh-order .main-sidebar ul.nav > li > a{
padding:10px 14px;border-radius:10px;color:var(--idh-ink-2);font-weight:500;font-size:14px;
display:flex;align-items:center;gap:10px;transition:background .15s ease;
}
html.idh-order .main-sidebar .list-categories li a:hover,
html.idh-order .main-sidebar ul.nav > li > a:hover{background:var(--idh-line-2)}
html.idh-order .main-sidebar .list-categories li.active > a,
html.idh-order .main-sidebar ul.nav > li.active > a{background:var(--idh-brand-50);color:var(--idh-brand-600)}
/* ==============================================================
DOMAIN HERO BANNER (injected by JS above the chooser panel)
============================================================== */
.idh-domain-hero{
background:linear-gradient(135deg,#eef2ff 0%,#fafbfc 60%,#fff 100%);
border:1px solid var(--idh-line);border-radius:var(--idh-radius);
padding:22px 26px;margin:0 0 20px;box-shadow:var(--idh-shadow-sm);
}
.idh-domain-hero__inner{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.idh-domain-hero__title{
margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--idh-ink);
}
.idh-domain-hero__sub{margin:0;color:var(--idh-muted);font-size:14.5px}
.idh-domain-hero__badge{
display:inline-flex;align-items:center;gap:6px;
margin-top:4px;padding:5px 12px;border-radius:999px;
background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;
font-size:12.5px;font-weight:600;
}
.idh-domain-hero__badge svg{color:var(--idh-ok)}
@media (max-width:640px){
.idh-domain-hero{padding:18px 18px}
.idh-domain-hero__title{font-size:19px}
}
/* ==============================================================
DOMAIN STEP — configureproductdomain.tpl
(existing custom "domain-cards-mode" styling retained — we
only polish colors / spacing around it.)
============================================================== */
html.idh-order .panel-choose-domain{padding:0;overflow:hidden}
html.idh-order .panel-choose-domain > .panel-body{padding:24px}
html.idh-order .panel-domain-search{margin-top:10px}
html.idh-order .domain-card-wrapper{
border-radius:var(--idh-radius) !important;
box-shadow:var(--idh-shadow-sm) !important;
border-color:var(--idh-line) !important;
padding:28px 24px 24px !important;
}
html.idh-order .domain-card-wrapper:hover{
border-color:var(--idh-brand) !important;
box-shadow:var(--idh-shadow) !important;
}
html.idh-order .domain-card-wrapper.active{border-color:var(--idh-brand) !important}
html.idh-order .domain-card-wrapper .inline-form{
background:var(--idh-brand-50) !important;
border-radius:12px !important;
padding:16px !important;
}
html.idh-order .domain-card-wrapper .inline-form .form-control{
border-radius:9px !important;font-size:15px;padding:11px 13px;
}
html.idh-order .domain-card-wrapper .inline-form .btn{
background:var(--idh-brand) !important;color:#fff !important;border-radius:9px !important;
padding:11px 18px;font-weight:600;
}
html.idh-order .domain-card-wrapper .inline-form .inline-form-prefix{
background:#fff !important;color:var(--idh-muted) !important;border-radius:9px !important;
font-size:13px;
}
html.idh-order .domain-cards-divider span{color:var(--idh-muted-2)}
html.idh-order .domain-transfer-link{border-top-color:var(--idh-line) !important}
html.idh-order .domain-transfer-link .btn{border-radius:10px}
/* Plain (non-cards-mode) domain search polish */
html.idh-order .inline-form{border:1px solid var(--idh-line);border-radius:12px;overflow:hidden}
html.idh-order .inline-form .form-control{border:0}
html.idh-order .inline-form .btn{border-radius:0;border:0}
/* Domain result headlines */
html.idh-order .domain-checker-result-headline{
padding:18px 20px;border-radius:12px;font-size:15.5px;font-weight:500;margin-top:14px;
}
html.idh-order .domain-checker-result-headline.domain-checker-available{
background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;
}
html.idh-order .domain-checker-result-headline.domain-checker-unavailable{
background:#fef2f2;color:#7f1d1d;border:1px solid #fecaca;
}
/* Spotlight / suggested / tld pricing grid */
html.idh-order .domain-spotlight,
html.idh-order .domain-suggested,
html.idh-order .tld-pricing{
display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:16px;
}
html.idh-order .domain-spotlight .spotlight-domain,
html.idh-order .domain-suggested .suggested-domain,
html.idh-order .tld-pricing .tld-item{
display:flex;justify-content:space-between;align-items:center;padding:12px 14px;
border:1px solid var(--idh-line);border-radius:10px;background:#fff;transition:all .15s ease;
}
html.idh-order .domain-spotlight .spotlight-domain:hover,
html.idh-order .domain-suggested .suggested-domain:hover,
html.idh-order .tld-pricing .tld-item:hover{border-color:var(--idh-brand)}
/* ==============================================================
CONFIGURE PRODUCT — page title + description block
============================================================== */
html.idh-order .product-config-info{padding:0}
html.idh-order .product-config-info .panel-body{padding:28px}
html.idh-order .product-config-info h2{
display:flex;align-items:center;gap:14px;
font-size:24px;letter-spacing:-.02em;font-weight:700;margin:0 0 10px;
}
html.idh-order .product-config-info .graphic-item{
width:44px;height:44px;border-radius:11px;background:var(--idh-brand-50);color:var(--idh-brand);
display:grid;place-items:center;flex:none;
}
html.idh-order .product-config-info .graphic-item svg,
html.idh-order .product-config-info .graphic-item i{width:22px;height:22px;font-size:20px}
html.idh-order .product-config-info .product-info{color:var(--idh-ink-2);font-size:14.5px;line-height:1.6}
html.idh-order .product-config-info .product-info p:last-child{margin-bottom:0}
/* ==============================================================
CONFIGURE PRODUCT — billing cycle row (was 6 big cards)
Transforms .panel-check-group into a compact pill strip.
============================================================== */
html.idh-order #sectionCycles .section-title{font-size:15px;font-weight:600;color:var(--idh-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px}
html.idh-order .panel-check-group{
display:flex !important;flex-wrap:wrap;gap:10px;
margin:0 !important;
}
html.idh-order .panel-check-group > [class*="col-"]{
flex:1 1 160px;min-width:0;max-width:none;
padding:0 !important;margin:0 !important;width:auto !important;
}
/* Cycle pill card */
html.idh-order .panel-check-group .panel-check{
border:1px solid var(--idh-line) !important;border-radius:12px !important;
background:#fff !important;padding:14px 16px !important;
transition:all .15s ease;box-shadow:none !important;
height:100%;position:relative;
margin:0 !important;
}
html.idh-order .panel-check-group .panel-check.checked{
border-color:var(--idh-brand) !important;
box-shadow:0 0 0 3px rgba(37,99,235,.12) !important;
}
html.idh-order .panel-check-group .panel-check label{
cursor:pointer;margin:0;width:100%;display:block !important;
padding:0 !important;line-height:1.35;overflow:visible !important;
}
html.idh-order .panel-check-group .panel-check label > [class^="iradio"],
html.idh-order .panel-check-group .panel-check label > [class*=" iradio"],
html.idh-order .panel-check-group .panel-check label > .radio-styled,
html.idh-order .panel-check-group .panel-check label > .checkbox-styled,
html.idh-order .panel-check-group .panel-check label > .icheck-control{
position:absolute !important;width:0 !important;height:0 !important;
opacity:0 !important;overflow:hidden !important;margin:0 !important;
pointer-events:none !important;left:0 !important;top:0 !important;
min-width:0 !important;min-height:0 !important;border:0 !important;background:transparent !important;
}
html.idh-order .panel-check-group .panel-check label > [class^="iradio"]::before,
html.idh-order .panel-check-group .panel-check label > [class*=" iradio"]::before,
html.idh-order .panel-check-group .panel-check label > .radio-styled::before,
html.idh-order .panel-check-group .panel-check label > .checkbox-styled::before{
display:none !important;opacity:0 !important;content:none !important;
}
html.idh-order .panel-check-group .check-cycle,
html.idh-order .panel-check-group .check-content{padding:0 !important;margin:0 !important}
html.idh-order .panel-check-group .check-cycle{width:100%;overflow:visible !important}
html.idh-order .panel-check-group .check-content{
min-width:0;display:block !important;overflow:visible !important;
}
html.idh-order .panel-check-group .check-title{
font-size:13.5px;font-weight:600;margin:0 0 2px;color:var(--idh-ink);
display:block !important;line-height:1.35;white-space:normal;overflow:visible !important;text-overflow:clip;
}
html.idh-order .panel-check-group .price-amount,
html.idh-order .panel-check-group .price-amount-total{
font-size:17px;font-weight:700;color:var(--idh-ink);letter-spacing:-.01em;
}
html.idh-order .panel-check-group .price-cycle,
html.idh-order .panel-check-group .price-cycle-type{color:var(--idh-muted);font-size:12px;font-weight:400}
html.idh-order .panel-check-group .check-description{font-size:12px;color:var(--idh-muted);margin-top:2px}
/* Save label — compact, always inside the pill */
html.idh-order .panel-check-group .save-label,
html.idh-order .panel-check-group .label-savings{
position:absolute;top:-8px;right:10px;
background:var(--idh-ok);color:#fff;font-size:10px;font-weight:700;
padding:2px 7px;border-radius:999px;letter-spacing:.04em;line-height:1;
}
html.idh-order .panel-check-group .save-attached .save-label{position:absolute;top:-8px;right:10px}
/* Hide the radio input; the whole pill becomes the clickable area */
html.idh-order .panel-check-group .panel-check input.icheck-control{
position:absolute;opacity:0;pointer-events:none;
}
/* ripple-like focus ring for keyboard users */
html.idh-order .panel-check-group .panel-check:focus-within{
outline:3px solid rgba(37,99,235,.35);outline-offset:2px;
}
/* Fallback for any .panel-check NOT inside the cycle group (e.g. payment gateway) */
html.idh-order .panel-check{
border:1px solid var(--idh-line);border-radius:12px;
background:#fff;transition:all .15s ease;box-shadow:none;
position:relative;
}
html.idh-order .panel-check.checked{
border-color:var(--idh-brand);
box-shadow:0 0 0 3px rgba(37,99,235,.12);
padding-right:48px !important;
}
html.idh-order .panel-check.checked::after,
html.idh-order .addons-list .addon.checked::after,
html.idh-order .form-addons .addon.checked::after,
html.idh-order .panel-addon.checked::after{
content:"";
position:absolute;
top:12px;
right:12px;
width:22px;
height:22px;
border-radius:999px;
background:var(--idh-brand);
box-shadow:0 6px 16px rgba(37,99,235,.35);
z-index:3;
}
html.idh-order .panel-check.checked::before,
html.idh-order .addons-list .addon.checked::before,
html.idh-order .form-addons .addon.checked::before,
html.idh-order .panel-addon.checked::before{
content:"";
position:absolute;
top:18px;
right:17px;
width:11px;
height:6px;
border-left:2px solid #fff;
border-bottom:2px solid #fff;
transform:rotate(-45deg);
z-index:4;
}
/* Config option groups */
html.idh-order .configurable-options .form-group,
html.idh-order .form-configurable-options .form-group{
display:flex;justify-content:space-between;align-items:center;gap:16px;
padding:14px 0;border-top:1px dashed var(--idh-line-2);
}
html.idh-order .configurable-options .form-group:first-child,
html.idh-order .form-configurable-options .form-group:first-child{border-top:0}
html.idh-order .configurable-options label,
html.idh-order .form-configurable-options label{
font-weight:500;font-size:14.5px;color:var(--idh-ink);margin:0;
}
html.idh-order .form-control{
border:1px solid var(--idh-line);border-radius:10px;padding:10px 13px;font-size:14px;
background:#fff;box-shadow:none;transition:all .15s ease;
line-height:1.45;
}
html.idh-order .form-control:focus{border-color:var(--idh-brand);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
/* .input-sm: Lagom2 forces a tight fixed height that clips descenders
(e.g. "1årligt", "99.99DKK/aylık"). Restore room for descenders by
dropping the fixed height and using auto sizing with sane padding. */
html.idh-order .form-control.input-sm,
html.idh-order .input-sm,
html.idh-order select.input-sm,
html.idh-order .input-group-sm > .form-control,
html.idh-order .input-group-sm > .input-group-prepend > .input-group-text,
html.idh-order .input-group-sm > .input-group-append > .input-group-text{
height:auto !important;
min-height:38px;
padding:8px 12px !important;
line-height:1.5 !important;
font-size:13px;
border-radius:9px;
}
html.idh-order .input-group-btn .btn,
html.idh-order .input-group-addon{border-color:var(--idh-line)}
html.idh-order .idh-os-picker-host{
display:block !important;
width:100%;
}
html.idh-order .idh-os-native-select{
position:absolute !important;
width:1px !important;
height:1px !important;
opacity:0 !important;
pointer-events:none !important;
}
html.idh-order .idh-os-picker{
width:100%;
position:relative;
padding:4px 0;
}
html.idh-order .idh-os-tabs{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:14px;
}
html.idh-order .idh-os-tab{
appearance:none;
border:1px solid var(--idh-line);
background:transparent;
color:var(--idh-muted);
padding:9px 18px;
border-radius:999px;
font-size:13px;
font-weight:600;
cursor:pointer;
transition:all .15s ease;
white-space:nowrap;
line-height:1.2;
}
html.idh-order .idh-os-tab:hover{
color:var(--idh-ink);
border-color:rgba(255,255,255,.18);
}
html.idh-order .idh-os-tab.is-active{
border-color:var(--idh-brand);
color:var(--idh-brand);
background:rgba(37,99,235,.08);
box-shadow:0 0 0 3px rgba(37,99,235,.10);
}
html.idh-order .idh-os-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(195px,1fr));
gap:12px;
}
html.idh-order .idh-os-card{
position:relative;
}
html.idh-order .idh-os-card__btn{
width:100%;
appearance:none;
border:1px solid var(--idh-line);
background:#0c1322;
color:var(--idh-ink);
border-radius:14px;
padding:12px 12px 12px 12px;
display:flex;
align-items:center;
gap:10px;
text-align:left;
cursor:pointer;
transition:all .15s ease;
}
html.idh-order .idh-os-card__btn:hover{
border-color:var(--idh-brand);
background:#111b2f;
}
html.idh-order .idh-os-card.is-selected .idh-os-card__btn{
border-color:var(--idh-brand);
background:#111b2f;
box-shadow:0 0 0 3px rgba(37,99,235,.18);
}
html.idh-order .idh-os-card.is-open .idh-os-card__btn{
border-color:var(--idh-brand);
}
html.idh-order .idh-os-icon{
width:42px;
height:42px;
border-radius:11px;
display:grid;
place-items:center;
flex:none;
background:linear-gradient(135deg,#1f2a44,#0c1322);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 6px 14px rgba(0,0,0,.28);
position:relative;
overflow:hidden;
}
html.idh-order .idh-os-icon::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(120% 120% at 0% 0%,rgba(255,255,255,.18),rgba(255,255,255,0) 55%);
pointer-events:none;
}
html.idh-order .idh-os-icon img,
html.idh-order .idh-os-icon > svg{
width:24px;
height:24px;
object-fit:contain;
display:block;
position:relative;
z-index:1;
}
html.idh-order .idh-os-icon-letter{
position:relative;
z-index:1;
color:#ffffff;
font-weight:800;
font-size:18px;
letter-spacing:-.02em;
line-height:1;
}
html.idh-order .idh-os-icon--debian{background:linear-gradient(135deg,#d72b3f,#7a0f1f)}
html.idh-order .idh-os-icon--ubuntu{background:linear-gradient(135deg,#e95420,#7c2906)}
html.idh-order .idh-os-icon--alma{background:linear-gradient(135deg,#0ec46a,#08502f)}
html.idh-order .idh-os-icon--rocky{background:linear-gradient(135deg,#10b981,#0a5e44)}
html.idh-order .idh-os-icon--centos{background:linear-gradient(135deg,#7950a8,#262577)}
html.idh-order .idh-os-icon--alpine{background:linear-gradient(135deg,#1c8bbf,#0d597f)}
html.idh-order .idh-os-icon--fedora{background:linear-gradient(135deg,#3c6eb4,#1d3a6b)}
html.idh-order .idh-os-icon--opensuse{background:linear-gradient(135deg,#73ba25,#3a5e12)}
html.idh-order .idh-os-icon--windows{background:linear-gradient(135deg,#0078d4,#003c6b)}
html.idh-order .idh-os-icon--other{background:linear-gradient(135deg,#475569,#1e293b)}
html.idh-order .idh-os-card__text{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
gap:2px;
}
html.idh-order .idh-os-card__text strong{
color:var(--idh-ink);
font-size:14px;
font-weight:700;
line-height:1.2;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
html.idh-order .idh-os-card__text small{
color:var(--idh-muted);
font-size:12px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
html.idh-order .idh-os-card.is-selected .idh-os-card__text small{
color:var(--idh-brand);
font-weight:600;
}
html.idh-order .idh-os-card__chev{
flex:none;
color:var(--idh-muted);
transition:transform .18s ease;
}
html.idh-order .idh-os-card.is-open .idh-os-card__chev{
transform:rotate(180deg);
color:var(--idh-brand);
}
html.idh-order .idh-os-card__menu{
position:absolute;
top:calc(100% + 6px);
left:0;
right:0;
z-index:50;
background:#0c1322;
border:1px solid var(--idh-line);
border-radius:12px;
box-shadow:0 18px 38px rgba(0,0,0,.45);
padding:6px;
max-height:280px;
overflow-y:auto;
display:flex;
flex-direction:column;
gap:2px;
}
html.idh-order .idh-os-card__menu-item{
appearance:none;
border:0;
background:transparent;
color:var(--idh-ink);
padding:9px 10px;
border-radius:8px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
font-size:13px;
font-weight:600;
cursor:pointer;
text-align:left;
width:100%;
}
html.idh-order .idh-os-card__menu-item:hover{
background:#16233a;
}
html.idh-order .idh-os-card__menu-item.is-current{
background:rgba(37,99,235,.18);
color:#fff;
}
html.idh-order .idh-os-card__menu-item.is-current svg{
color:#93c5fd;
}
@media (max-width:600px){
html.idh-order .idh-os-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Addons block — make them look like toggles */
html.idh-order .addons-list .addon,
html.idh-order .form-addons .addon,
html.idh-order .panel-addon{
display:flex;gap:14px;padding:14px 16px;border:1px solid var(--idh-line);border-radius:12px;
align-items:center;margin-bottom:10px;background:#fff;transition:all .15s ease;
position:relative;
}
html.idh-order .addons-list .addon.checked,
html.idh-order .form-addons .addon.checked,
html.idh-order .panel-addon.checked{
border-color:var(--idh-brand);background:var(--idh-brand-50);
padding-right:48px;
}
/* ==============================================================
ORDER SUMMARY / SIDEBAR (slim sticky)
============================================================== */
html.idh-order .panel-ordersummary,
html.idh-order .main-sidebar .panel-ordersummary{
border-radius:var(--idh-radius);overflow:hidden;
box-shadow:var(--idh-shadow);border:1px solid var(--idh-line);
}
html.idh-order .panel-ordersummary .panel-header,
html.idh-order .panel-ordersummary .panel-body,
html.idh-order .panel-ordersummary .panel-footer{padding:18px 20px}
html.idh-order .panel-ordersummary .panel-header{
background:#fafbfc;border-bottom:1px solid var(--idh-line);
}
html.idh-order .panel-ordersummary .panel-footer{
background:#fafbfc;border-top:1px solid var(--idh-line);
}
/* Hard readability reset for Lagom2 summary variants.
Some Lagom2 presets paint summary text with near-white variables via
.panel-summary-secondary / .panel-summary-configuration selectors. On our
white card this makes the whole body look empty. Force the entire summary
body back to normal visible dark text before applying finer row styling. */
html.idh-order .panel-ordersummary,
html.idh-order .panel-summary,
html.idh-order .panel-summary-configuration,
html.idh-order .panel-summary-secondary{
background:#fff !important;
color:var(--idh-ink) !important;
}
html.idh-order .panel-ordersummary .panel-heading,
html.idh-order .panel-summary .panel-heading,
html.idh-order .panel-summary-configuration .panel-heading,
html.idh-order .panel-summary-secondary .panel-heading,
html.idh-order .panel-ordersummary .panel-body,
html.idh-order .panel-summary .panel-body,
html.idh-order .panel-summary-configuration .panel-body,
html.idh-order .panel-summary-secondary .panel-body{
background:#fff !important;
color:var(--idh-ink) !important;
-webkit-text-fill-color:var(--idh-ink) !important;
visibility:visible !important;
opacity:1 !important;
overflow:visible !important;
}
html.idh-order .panel-ordersummary .panel-heading *,
html.idh-order .panel-summary .panel-heading *,
html.idh-order .panel-summary-configuration .panel-heading *,
html.idh-order .panel-summary-secondary .panel-heading *,
html.idh-order .panel-ordersummary .panel-body *:not(svg):not(path):not(use),
html.idh-order .panel-summary .panel-body *:not(svg):not(path):not(use),
html.idh-order .panel-summary-configuration .panel-body *:not(svg):not(path):not(use),
html.idh-order .panel-summary-secondary .panel-body *:not(svg):not(path):not(use){
color:var(--idh-ink) !important;
-webkit-text-fill-color:var(--idh-ink) !important;
text-shadow:none !important;
visibility:visible !important;
opacity:1 !important;
}
html.idh-order .summary-item,
html.idh-order .summary-content .list-item{
padding:10px 0;border-top:1px dashed var(--idh-line-2);
display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
}
html.idh-order .summary-content > .summary-item:first-child,
html.idh-order .summary-content .list-item:first-child{border-top:0}
/* --- Text color overrides --- */
/* Lagom2's stock theme.css forces .summary-item .item-name .name,
.item-value, .subname etc. to use CSS variables tuned for its colored
summary panel background. Our panel is white, so these defaults render
as invisible light/white text. The !important below intentionally beats
Lagom2's specificity ((0,5,0) on .panel-summary-secondary.panel-summary-configuration
.summary-item .item-name .name) while staying scoped under html.idh-order. */
html.idh-order .panel-heading .panel-title,
html.idh-order .panel-summary .panel-title,
html.idh-order .panel-sidebar .panel-title{color:var(--idh-ink) !important;font-weight:700}
html.idh-order .summary-content .summary-item .item-name,
html.idh-order .summary-content .summary-item .item-name .name,
html.idh-order .summary-content .summary-item .item-name .pg-name,
html.idh-order .summary-content .summary-item .item-value,
html.idh-order .summary-content .summary-item .item-value-price,
html.idh-order .summary-content .list-item .item-name,
html.idh-order .summary-content .list-item-main,
html.idh-order .summary-content .list-item-main .item-name,
html.idh-order .summary-content .list-item-main .item-value{
color:var(--idh-ink) !important;font-size:14px;
}
html.idh-order .summary-content .summary-item .item-name{font-weight:600}
html.idh-order .summary-content .summary-item .item-value-price{font-weight:600;white-space:nowrap}
html.idh-order .summary-content .summary-item .subname,
html.idh-order .summary-content .summary-item .item-name .subname,
html.idh-order .summary-content .list-item .item-name span.domain,
html.idh-order .summary-content .list-item-domain .item-domain{
color:var(--idh-muted) !important;font-size:13px;font-weight:400;display:block;margin-top:2px;
}
/* Config options list (dim but readable) */
html.idh-order .summary-content .summary-list-configoptions .list-item,
html.idh-order .summary-list.summary-list-configoptions .list-item{
font-size:13px;padding:4px 0;border:0;
}
html.idh-order .summary-content .summary-list-configoptions .list-item .item-name,
html.idh-order .summary-content .summary-list-configoptions .list-item .item-value{
color:var(--idh-muted) !important;
}
html.idh-order .summary-content .summary-list-configoptions .item-optionname{color:var(--idh-ink-2) !important}
/* Addon rows: keep bold name visible */
html.idh-order .summary-item-addon{align-items:center}
html.idh-order .summary-item-addon .graphic-item{
width:24px;height:24px;border-radius:6px;background:var(--idh-line-2);flex:none;margin-right:6px;
}
/* Tax rows — muted but legible */
html.idh-order .summary-content .summary-item-tax{padding:4px 0;border:0}
html.idh-order .summary-content .summary-item-tax .item-name,
html.idh-order .summary-content .summary-item-tax .item-name .name,
html.idh-order .summary-content .summary-item-tax .item-value{
color:var(--idh-muted) !important;font-weight:400;font-size:13px;
}
/* Faded list items (renewals + recurring blocks) */
html.idh-order .summary-content .summary-list .list-item.faded,
html.idh-order .summary-content .summary-list.faded .list-item,
html.idh-order .summary-content .summary-list.faded .list-item .item-name,
html.idh-order .summary-content .summary-list.faded .list-item .item-value{
color:var(--idh-muted) !important;
}
html.idh-order .summary-content .summary-list .list-item{color:var(--idh-ink-2) !important}
html.idh-order .summary-content .summary-list .list-item-title{color:var(--idh-ink) !important;font-weight:700}
html.idh-order .summary-content .list-item-promo .item-name,
html.idh-order .summary-content .list-item-promo .item-value{color:#065f46 !important;font-weight:600}
/* Footer tax/total rows live outside .summary-content in ordersummary.tpl,
so they need their own readability reset. Keep buttons excluded so CTA
styling remains intact. */
html.idh-order .panel-ordersummary .panel-footer .summary-item,
html.idh-order .panel-summary .panel-footer .summary-item,
html.idh-order .panel-summary-configuration .panel-footer .summary-item,
html.idh-order .panel-summary-secondary .panel-footer .summary-item{
color:var(--idh-muted) !important;
-webkit-text-fill-color:var(--idh-muted) !important;
visibility:visible !important;
opacity:1 !important;
}
html.idh-order .panel-ordersummary .panel-footer .summary-item .item-name,
html.idh-order .panel-ordersummary .panel-footer .summary-item .item-name .name,
html.idh-order .panel-ordersummary .panel-footer .summary-item .item-value,
html.idh-order .panel-summary .panel-footer .summary-item .item-name,
html.idh-order .panel-summary .panel-footer .summary-item .item-name .name,
html.idh-order .panel-summary .panel-footer .summary-item .item-value,
html.idh-order .panel-summary-configuration .panel-footer .summary-item .item-name,
html.idh-order .panel-summary-configuration .panel-footer .summary-item .item-name .name,
html.idh-order .panel-summary-configuration .panel-footer .summary-item .item-value,
html.idh-order .panel-summary-secondary .panel-footer .summary-item .item-name,
html.idh-order .panel-summary-secondary .panel-footer .summary-item .item-name .name,
html.idh-order .panel-summary-secondary .panel-footer .summary-item .item-value{
color:var(--idh-muted) !important;
-webkit-text-fill-color:var(--idh-muted) !important;
font-size:13px !important;
font-weight:400 !important;
visibility:visible !important;
opacity:1 !important;
}
html.idh-order .panel-ordersummary .panel-footer .price-total,
html.idh-order .panel-summary .panel-footer .price-total,
html.idh-order .panel-summary-configuration .panel-footer .price-total,
html.idh-order .panel-summary-secondary .panel-footer .price-total{
color:var(--idh-muted) !important;
-webkit-text-fill-color:var(--idh-muted) !important;
visibility:visible !important;
opacity:1 !important;
}
html.idh-order .panel-ordersummary .panel-footer .price-amount,
html.idh-order .panel-ordersummary .panel-footer .amt,
html.idh-order .panel-summary .panel-footer .price-amount,
html.idh-order .panel-summary .panel-footer .amt,
html.idh-order .panel-summary-configuration .panel-footer .price-amount,
html.idh-order .panel-summary-configuration .panel-footer .amt,
html.idh-order .panel-summary-secondary .panel-footer .price-amount,
html.idh-order .panel-summary-secondary .panel-footer .amt{
color:var(--idh-ink) !important;
-webkit-text-fill-color:var(--idh-ink) !important;
visibility:visible !important;
opacity:1 !important;
}
html.idh-order .price-left-h{display:flex;flex-direction:column;gap:4px;margin-bottom:14px;overflow:visible}
html.idh-order .price-left-h .price-total{
color:var(--idh-muted);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;
white-space:normal;line-height:1.4;overflow:visible;max-width:100%;display:block;
}
html.idh-order .price-left-h .price-amount,
html.idh-order .price-left-h .amt{
font-size:22px;font-weight:700;color:var(--idh-ink);letter-spacing:-.01em;
line-height:1.25;overflow:visible;display:block;
}
html.idh-order .price-left-h .price-amount-promo{
font-size:14px;font-weight:500;line-height:1.3;display:block;overflow:visible;
}
/* ----------------------------------------------------------------
PRICE CLIPPING FIX — sticky summary + cart pricing columns
The Lagom2 summary panel uses overflow:hidden + flex layouts
that previously clipped sub-text (setup-fee, /cycle suffix, VAT
include label). Force overflow:visible on price wrappers and
give them enough breathing room so descenders / second lines
never disappear under the rounded corner or button below.
---------------------------------------------------------------- */
html.idh-order .panel-ordersummary{overflow:visible}
html.idh-order .panel-ordersummary .panel-header{border-top-left-radius:var(--idh-radius);border-top-right-radius:var(--idh-radius)}
html.idh-order .panel-ordersummary .panel-footer{border-bottom-left-radius:var(--idh-radius);border-bottom-right-radius:var(--idh-radius)}
/* Right-sidebar product/addon row — ensure setup-fee small text
under the main amount is fully visible (it stacks via flex-column). */
html.idh-order .summary-content .summary-item{align-items:flex-start;overflow:visible}
html.idh-order .summary-content .summary-item .item-value{overflow:visible;line-height:1.35}
html.idh-order .summary-content .summary-item .item-value-price{
display:flex !important;flex-direction:column;align-items:flex-end;
white-space:nowrap;overflow:visible;line-height:1.35;gap:2px;
}
html.idh-order .summary-content .summary-item .item-value-price .text-nowrap{display:block;line-height:1.35;overflow:visible}
html.idh-order .summary-content .summary-item .item-value-price .setup-fee,
html.idh-order .summary-content .summary-item .item-value .setup-fee,
html.idh-order .summary-content .summary-item .renewal{
display:block;font-size:11.5px;font-weight:400;color:var(--idh-muted) !important;
line-height:1.3;white-space:normal;overflow:visible;text-align:right;
}
/* Main-column cart item price column — width:140px constraint from
Lagom2 was clipping `/Aylık`-style suffixes when locale strings
are long. Allow column to grow and let inline cycle wrap visibly. */
html.idh-order .panel-cart .cart-item-pricing,
html.idh-order .cart-table .cart-item-pricing{
width:auto !important;min-width:140px !important;max-width:none !important;
overflow:visible !important;line-height:1.35;
}
html.idh-order .panel-cart .cart-item-pricing .item-price,
html.idh-order .panel-cart .cart-item-pricing .cart-item-price,
html.idh-order .cart-table .cart-item-pricing .item-price,
html.idh-order .cart-table .cart-item-pricing .cart-item-price{
width:auto !important;overflow:visible !important;white-space:normal;
display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;
}
html.idh-order .cart-item-pricing .price-cycle-inline,
html.idh-order .cart-item .price-cycle-inline{
display:inline-block;font-size:12.5px;font-weight:500;color:var(--idh-muted);
line-height:1.3;white-space:nowrap;overflow:visible;
}
html.idh-order .cart-item-pricing .renewal,
html.idh-order .cart-item-pricing .setup-fee,
html.idh-order .cart-item .renewal,
html.idh-order .cart-item .setup-fee{
display:block;font-size:11.5px;font-weight:400;color:var(--idh-muted) !important;
line-height:1.3;white-space:normal;overflow:visible;margin-top:2px;
}
html.idh-order .summary-actions .btn-checkout{
width:100%;padding:14px 20px;font-size:15px;border-radius:12px;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
/* Sticky behaviour preserved from Lagom2 addon settings; we just soften */
html.idh-order .sidebar-sticky{top:86px}
/* ==============================================================
SUMMARY COLLAPSIBLE SECTIONS ()
============================================================== */
html.idh-order .idh-summary-collapse{
margin:8px 0 0;padding:0;border-top:1px dashed var(--idh-line-2);
}
html.idh-order .idh-summary-collapse[data-always-hidden]{display:none}
html.idh-order .idh-summary-collapse > summary{
list-style:none;cursor:pointer;
display:flex;align-items:center;justify-content:space-between;
padding:10px 0;color:var(--idh-muted);font-size:12.5px;font-weight:600;
text-transform:uppercase;letter-spacing:.06em;
transition:color .15s ease;
}
html.idh-order .idh-summary-collapse > summary:hover{color:var(--idh-ink-2)}
html.idh-order .idh-summary-collapse > summary::-webkit-details-marker{display:none}
html.idh-order .idh-summary-collapse > summary::marker{display:none}
html.idh-order .idh-summary-collapse__chev{
transition:transform .2s ease;color:var(--idh-muted);
display:inline-flex;
}
html.idh-order .idh-summary-collapse[open] > summary .idh-summary-collapse__chev{
transform:rotate(180deg);
}
html.idh-order .idh-summary-collapse__count{
background:var(--idh-line-2);color:var(--idh-muted);font-size:11px;font-weight:700;
padding:2px 7px;border-radius:999px;text-transform:none;letter-spacing:0;
}
html.idh-order .idh-summary-collapse > .summary-list{padding:4px 0 8px}
html.idh-order .idh-summary-recurring .list-item{
padding:5px 0;font-size:13px;color:var(--idh-muted);
}
html.idh-order .idh-summary-recurring .item-value{color:var(--idh-ink-2);font-weight:500}
/* ==============================================================
VIEW CART / CHECKOUT — main column
============================================================== */
html.idh-order .summary-table,
html.idh-order .cart-table{
border:1px solid var(--idh-line);border-radius:var(--idh-radius);overflow:hidden;background:var(--idh-card);
margin-bottom:20px;
}
html.idh-order .summary-table > thead > tr > th,
html.idh-order .cart-table > thead > tr > th{
background:#fafbfc;border-bottom:1px solid var(--idh-line);font-weight:600;font-size:12px;color:var(--idh-muted);
text-transform:uppercase;letter-spacing:.05em;padding:12px 16px;
}
html.idh-order .summary-table > tbody > tr > td,
html.idh-order .cart-table > tbody > tr > td{padding:14px 16px;border-top:1px solid var(--idh-line-2);font-size:14px;vertical-align:middle}
html.idh-order .summary-table .qty,
html.idh-order .cart-table .qty{color:var(--idh-muted);font-size:12px}
html.idh-order .summary-table .item-title,
html.idh-order .cart-table .item-title{font-weight:600}
html.idh-order .summary-table .item-subtitle,
html.idh-order .cart-table .item-subtitle{color:var(--idh-muted);font-size:13px;font-weight:400;display:block;margin-top:2px}
/* Empty cart */
html.idh-order .message-no-data{
background:var(--idh-card);border:1px dashed var(--idh-line);border-radius:var(--idh-radius);
padding:48px 24px;text-align:center;
}
html.idh-order #lagomPageLoader.message-no-data{
min-height:0 !important;height:auto !important;
margin:14px 0 18px !important;padding:18px 24px !important;
display:flex;align-items:center;justify-content:center;
background:#fff;border:1px solid var(--idh-line);border-radius:14px;
box-shadow:var(--idh-shadow-sm);
}
html.idh-order #lagomPageLoader.hidden{display:none !important}
html.idh-order #lagomPageLoader .loader{
position:relative !important;inset:auto !important;
width:auto !important;height:auto !important;min-height:0 !important;
display:flex;align-items:center;justify-content:center;
margin:0 !important;padding:0 !important;background:transparent !important;
}
html.idh-order #lagomPageLoader .spinner{
margin:0 !important;
}
/* Section titles inside main checkout column */
html.idh-order .section .section-header{margin-bottom:10px}
html.idh-order .section .section-title{font-size:17px;font-weight:700;color:var(--idh-ink);letter-spacing:-.01em}
/* Form fields — checkout billing + domain details */
html.idh-order .form-group{margin-bottom:14px}
html.idh-order .form-group > label,
html.idh-order .form-group > .control-label{
font-size:12.5px;color:var(--idh-muted);font-weight:600;margin-bottom:5px;letter-spacing:.02em;
text-transform:uppercase;
}
html.idh-order .form-group .help-block{font-size:12px;color:var(--idh-muted);margin-top:4px}
html.idh-order .form-group .has-error .form-control{border-color:var(--idh-err);box-shadow:0 0 0 3px rgba(239,68,68,.12)}
html.idh-order .checkbox label,
html.idh-order .radio label{color:var(--idh-ink);font-weight:400;font-size:14px}
html.idh-order .checkbox input[type=checkbox],
html.idh-order .radio input[type=radio]{accent-color:var(--idh-brand)}
/* ==============================================================
PAYMENT GATEWAY GRID (.panel-group.panel-group-condensed with
multiple .panel.panel-check — inside #paymentGatewaysContainer)
============================================================== */
html.idh-order #paymentGatewaysContainer .panel-group,
html.idh-order #paymentGatewaysContainer .panel-group-condensed{
display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;
margin:0 !important;background:transparent;
}
html.idh-order #paymentGatewaysContainer .panel-group .panel,
html.idh-order #paymentGatewaysContainer .panel.panel-check{
margin:0 !important;border-radius:12px;padding:14px 16px;
display:flex;align-items:center;cursor:pointer;
background:#fff !important;box-shadow:none !important;
transition:all .15s ease;
}
html.idh-order #paymentGatewaysContainer .panel-check.checked{
border-color:var(--idh-brand);background:var(--idh-brand-50) !important;
}
html.idh-order #paymentGatewaysContainer .panel-check label{
width:100%;display:flex;align-items:center;gap:12px;margin:0;cursor:pointer;
}
html.idh-order #paymentGatewaysContainer .panel-check .check-content{
flex:1;font-size:14px;font-weight:600;color:var(--idh-ink);
}
html.idh-order #paymentGatewaysContainer .panel-check .check-icon{flex:none;width:40px;display:flex;align-items:center;justify-content:center}
html.idh-order #paymentGatewaysContainer .panel-check .check-icon img{max-width:40px;max-height:24px;object-fit:contain}
html.idh-order #paymentGatewaysContainer .panel-check input[type=radio]{
position:absolute;opacity:0;pointer-events:none;
}
html.idh-order #paymentGatewaysContainer .panel-check .panel-heading{
background:transparent;padding:0;border:0;width:100%;
}
/* Credit card input fields */
html.idh-order #creditCardInputFields{margin-top:16px}
html.idh-order #creditCardInputFields .panel-body{padding:20px}
html.idh-order #creditCardInputFields .cc-input-container .panel-tabs{
display:flex;background:var(--idh-line-2);padding:4px;border-radius:12px;gap:2px;border:0;margin:0 0 14px;width:fit-content;
}
html.idh-order #creditCardInputFields .cc-input-container .panel-tabs > li{display:inline-flex}
html.idh-order #creditCardInputFields .cc-input-container .panel-tabs > li > a{
padding:9px 16px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--idh-muted);border:0;
}
html.idh-order #creditCardInputFields .cc-input-container .panel-tabs > li.active > a,
html.idh-order #creditCardInputFields .cc-input-container .panel-tabs > li > a.active{
background:#fff;color:var(--idh-ink);box-shadow:var(--idh-shadow-sm);
}
/* ==============================================================
PROMO CODE — collapsible panel (our overwrite) + default fallback
============================================================== */
html.idh-order .idh-promo{
border:1px dashed var(--idh-line);border-radius:12px;padding:0;background:transparent;margin:0 0 16px;
}
html.idh-order .idh-promo > summary{
list-style:none;cursor:pointer;
padding:14px 16px;
display:flex;align-items:center;gap:10px;
color:var(--idh-brand);font-weight:600;font-size:14px;
}
html.idh-order .idh-promo > summary::-webkit-details-marker{display:none}
html.idh-order .idh-promo > summary::marker{display:none}
html.idh-order .idh-promo > summary:hover{color:var(--idh-brand-600)}
html.idh-order .idh-promo > summary .idh-promo__chev{transition:transform .2s ease;margin-left:auto}
html.idh-order .idh-promo[open] > summary .idh-promo__chev{transform:rotate(180deg)}
html.idh-order .idh-promo__body{padding:0 16px 14px;border-top:1px dashed var(--idh-line-2)}
html.idh-order .idh-promo__body .search-box{margin:12px 0 0 !important}
/* Applied-state promo panel (kept when a code is already applied) */
html.idh-order .panel-promo-code{
border:1px solid #a7f3d0 !important;background:#ecfdf5 !important;
border-radius:12px;padding:12px 16px !important;
}
html.idh-order .panel-promo-code .panel-heading{
background:transparent;border:0;padding:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
html.idh-order .panel-promo-code .label-savings{
background:var(--idh-ok);color:#fff;padding:4px 10px;border-radius:999px;
font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:6px;
}
html.idh-order .panel-promo-code .promo-code-content{flex:1}
html.idh-order .panel-promo-code .promo-code-content-desc{color:#065f46;font-size:13px;margin-top:2px}
html.idh-order .panel-promo-code .btn-default{border-radius:9px;font-size:12.5px}
/* The hidden search-box when a code is applied stays hidden. */
html.idh-order .search-box[data-promotion-box-add]{
background:transparent;
}
html.idh-order .search-box[data-promotion-box-add] .search-group{
display:flex;gap:8px;align-items:stretch;
}
html.idh-order .search-box[data-promotion-box-add] .search-field{
flex:1;position:relative;
}
html.idh-order .search-box[data-promotion-box-add] .search-field input{
width:100%;padding:11px 14px 11px 38px;border:1px solid var(--idh-line);border-radius:10px;font:inherit;
}
html.idh-order .search-box[data-promotion-box-add] .search-field-icon{
position:absolute;top:50%;left:12px;transform:translateY(-50%);color:var(--idh-muted);
}
html.idh-order .search-box[data-promotion-box-add] .search-group-btn .btn{padding:11px 18px;border-radius:10px}
/* Stock Lagom2 .panel-paymentgateways fallback (older markup) */
html.idh-order .panel-paymentgateways .radio,
html.idh-order .panel-paymentgateways .radio label{display:flex;align-items:center;gap:10px}
html.idh-order .panel-paymentgateways .radio{
padding:12px 14px;border:1px solid var(--idh-line);border-radius:12px;margin:0 0 10px;transition:all .15s ease;
}
html.idh-order .panel-paymentgateways .radio.checked,
html.idh-order .panel-paymentgateways .radio:has(input:checked){
border-color:var(--idh-brand);box-shadow:0 0 0 3px rgba(37,99,235,.12);background:var(--idh-brand-50);
}
/* ==============================================================
CHECKOUT: login/signup split (form-billing.tpl layout)
============================================================== */
html.idh-order .choice-group,
html.idh-order .choice-account-type{
display:flex;gap:10px;margin:0 0 16px;
}
html.idh-order .choice-group .choice,
html.idh-order .choice-account-type .choice{
flex:1;border:1px solid var(--idh-line);border-radius:12px;padding:14px;cursor:pointer;text-align:center;
transition:all .15s ease;background:#fff;
}
html.idh-order .choice-group .choice.selected,
html.idh-order .choice-group .choice:has(input:checked),
html.idh-order .choice-account-type .choice.selected,
html.idh-order .choice-account-type .choice:has(input:checked){
border-color:var(--idh-brand);background:var(--idh-brand-50);box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
/* Sub-heading strip between sections in viewcart */
html.idh-order .sub-heading{
display:flex;align-items:center;gap:10px;margin:22px 0 10px;color:var(--idh-ink);font-weight:600;font-size:13px;
text-transform:uppercase;letter-spacing:.05em;
}
/* ==============================================================
PAGE TITLES / SECTION HEADERS
============================================================== */
html.idh-order .page-header,
html.idh-order .section-header{
border:0;margin:0 0 12px;padding:0;
}
html.idh-order .section-title,
html.idh-order .page-title{
font-size:22px;font-weight:700;margin:0;color:var(--idh-ink);
}
/* ==============================================================
FOCUS / ACCESSIBILITY
============================================================== */
html.idh-order a:focus-visible,
html.idh-order button:focus-visible,
html.idh-order .btn:focus-visible,
html.idh-order input:focus-visible,
html.idh-order select:focus-visible{
outline:3px solid rgba(37,99,235,.35);outline-offset:2px;
}
/* ==============================================================
MOBILE TWEAKS
============================================================== */
@media (max-width:768px){
html.idh-order .panel-body{padding:18px}
html.idh-order .package{padding:22px 18px}
html.idh-order .section.products .row > [class*="col-"]{margin-bottom:14px}
html.idh-order .btn-lg{padding:12px 18px;font-size:14.5px}
}
/* ==============================================================
UTILITY: top-right trust chips (injected next to step indicator)
============================================================== */
.idh-trust-chips{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.idh-trust-chips .idh-chip{
display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
background:var(--idh-line-2);color:var(--idh-ink-2);font-size:12px;font-weight:500;
}
/* ==============================================================
BACKWARD COMPAT — avoid white-on-white from hard-coded CSS vars
============================================================== */
html.idh-order{--primary-color:var(--idh-brand);--secondary-color:var(--idh-brand-600)}
/* ==============================================================
SECTION 14: DARK MODE
--------------------------------------------------------------
Auto-activates when Lagom2 dark mode is on ().
Re-overrides design tokens AND inline-color rules from earlier sections
that hard-code white/light backgrounds.
Triggers (any one matches):
- html.lagom-dark-mode.idh-order → auto follow Lagom toggle
- html.idh-order-force-dark.idh-order → manual force dark
To force light even in Lagom dark, add idh-order-force-light to .
============================================================== */
/* 14a. Token overrides --------------------------------------------- */
/* Navy palette sampled from the live Lagom dark-mode rendering on this
site (set via Lagom theme settings, NOT the gray defaults in core).
These hex values match the original screenshots 1–6 the user shared. */
html.lagom-dark-mode.idh-order,
html.idh-order-force-dark.idh-order{
--idh-ink: #ffffff;
--idh-ink-2: #c5cfe0;
--idh-muted: #94a3b8;
--idh-muted-2: #64748b;
--idh-line: #2a3650; /* card border (subtle navy) */
--idh-line-2: #1f2a42;
--idh-bg: #0f1729; /* page body navy */
--idh-card: #1a2438; /* card / panel bg navy */
--idh-brand-50: rgba(37,99,235,0.16);
--idh-shadow-sm: 0 1px 2px rgba(0,0,0,0.45);
--idh-shadow: 0 4px 14px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.40);
--idh-shadow-lg: 0 12px 32px rgba(0,0,0,0.65);
}
/* 14b. Force the page background so it's consistent with the rest
of the dark theme. */
html.lagom-dark-mode.idh-order body,
html.idh-order-force-dark.idh-order body{
background:#0f1729 !important;color:var(--idh-ink);
}
/* 14c. Buttons — hard-coded white bg in section 5 ----------------- */
html.lagom-dark-mode.idh-order .btn-secondary,
html.idh-order-force-dark.idh-order .btn-secondary,
html.lagom-dark-mode.idh-order .btn-default,
html.idh-order-force-dark.idh-order .btn-default{
background:#1a2438 !important;color:var(--idh-ink) !important;border-color:var(--idh-line) !important;
}
html.lagom-dark-mode.idh-order .btn-secondary:hover,
html.idh-order-force-dark.idh-order .btn-secondary:hover,
html.lagom-dark-mode.idh-order .btn-default:hover,
html.idh-order-force-dark.idh-order .btn-default:hover{
background:#22304a !important;color:var(--idh-ink) !important;border-color:var(--idh-muted) !important;
}
/* 14d. Cycle toggle (Monthly / Yearly / 2-year pills) ------------- */
html.lagom-dark-mode.idh-order .idh-cycle-toggle,
html.idh-order-force-dark.idh-order .idh-cycle-toggle{
background:#141d30;
}
html.lagom-dark-mode.idh-order .idh-cycle-toggle button.is-active,
html.idh-order-force-dark.idh-order .idh-cycle-toggle button.is-active{
background:#22304a;color:var(--idh-ink);
}
/* 14e. Cycle pill cards / panel-check / addons / payment radios --- */
html.lagom-dark-mode.idh-order .panel-check,
html.idh-order-force-dark.idh-order .panel-check,
html.lagom-dark-mode.idh-order .checkbox-styled,
html.idh-order-force-dark.idh-order .checkbox-styled,
html.lagom-dark-mode.idh-order .panel-check-secondary,
html.idh-order-force-dark.idh-order .panel-check-secondary{
background:#1a2438 !important;border-color:var(--idh-line) !important;
}
html.lagom-dark-mode.idh-order .panel-check.checked,
html.idh-order-force-dark.idh-order .panel-check.checked{
border-color:var(--idh-brand) !important;
background:rgba(37,99,235,0.10) !important;
}
/* 14f. Section panel headers / footers (#fafbfc → dark) ----------- */
html.lagom-dark-mode.idh-order .panel-heading,
html.idh-order-force-dark.idh-order .panel-heading,
html.lagom-dark-mode.idh-order .panel-footer,
html.idh-order-force-dark.idh-order .panel-footer{
background:#141d30;border-color:var(--idh-line);
}
/* 14g. Form fields — inputs, selects, textareas ------------------- */
html.lagom-dark-mode.idh-order .form-control,
html.idh-order-force-dark.idh-order .form-control,
html.lagom-dark-mode.idh-order input[type="text"],
html.idh-order-force-dark.idh-order input[type="text"],
html.lagom-dark-mode.idh-order input[type="email"],
html.idh-order-force-dark.idh-order input[type="email"],
html.lagom-dark-mode.idh-order input[type="tel"],
html.idh-order-force-dark.idh-order input[type="tel"],
html.lagom-dark-mode.idh-order input[type="password"],
html.idh-order-force-dark.idh-order input[type="password"],
html.lagom-dark-mode.idh-order input[type="number"],
html.idh-order-force-dark.idh-order input[type="number"],
html.lagom-dark-mode.idh-order select,
html.idh-order-force-dark.idh-order select,
html.lagom-dark-mode.idh-order textarea,
html.idh-order-force-dark.idh-order textarea{
background:#0c1322 !important;color:var(--idh-ink) !important;
border-color:var(--idh-line) !important;
}
html.lagom-dark-mode.idh-order .form-control::placeholder,
html.idh-order-force-dark.idh-order .form-control::placeholder,
html.lagom-dark-mode.idh-order input::placeholder,
html.idh-order-force-dark.idh-order input::placeholder{
color:var(--idh-muted-2) !important;opacity:1;
}
html.lagom-dark-mode.idh-order .form-control:focus,
html.idh-order-force-dark.idh-order .form-control:focus{
background:#0c1322 !important;border-color:var(--idh-brand) !important;
box-shadow:0 0 0 3px rgba(37,99,235,0.20) !important;
}
/* 14h. Alerts (info / warn / danger) — section 5 hard-codes light */
html.lagom-dark-mode.idh-order .alert-lagom.alert-danger,
html.idh-order-force-dark.idh-order .alert-lagom.alert-danger{
background:rgba(239,68,68,0.12);border-color:rgba(239,68,68,0.30);color:#fca5a5;
}
html.lagom-dark-mode.idh-order .alert-lagom.alert-warning,
html.idh-order-force-dark.idh-order .alert-lagom.alert-warning{
background:rgba(245,158,11,0.12);border-color:rgba(245,158,11,0.30);color:#fcd34d;
}
html.lagom-dark-mode.idh-order .alert-lagom.alert-info,
html.idh-order-force-dark.idh-order .alert-lagom.alert-info{
background:rgba(37,99,235,0.16);border-color:rgba(37,99,235,0.30);color:#93c5fd;
}
/* 14i. Domain search results (section 8) -------------------------- */
html.lagom-dark-mode.idh-order .domain-result-item,
html.idh-order-force-dark.idh-order .domain-result-item,
html.lagom-dark-mode.idh-order .panel-domain-results .domain-row,
html.idh-order-force-dark.idh-order .panel-domain-results .domain-row{
background:var(--idh-card);border-color:var(--idh-line);
}
html.lagom-dark-mode.idh-order .domain-card-wrapper,
html.idh-order-force-dark.idh-order .domain-card-wrapper{
background:var(--idh-card) !important;border-color:var(--idh-line) !important;
}
html.lagom-dark-mode.idh-order .idh-domain-hero,
html.idh-order-force-dark.idh-order .idh-domain-hero{
background:#1a2438 !important;
border-color:var(--idh-line) !important;
color:var(--idh-ink) !important;
box-shadow:var(--idh-shadow-sm) !important;
}
html.lagom-dark-mode.idh-order .idh-domain-hero__title,
html.idh-order-force-dark.idh-order .idh-domain-hero__title{
color:var(--idh-ink) !important;
-webkit-text-fill-color:var(--idh-ink) !important;
}
html.lagom-dark-mode.idh-order .idh-domain-hero__sub,
html.idh-order-force-dark.idh-order .idh-domain-hero__sub{
color:var(--idh-muted) !important;
-webkit-text-fill-color:var(--idh-muted) !important;
}
html.lagom-dark-mode.idh-order .panel-choose-domain,
html.idh-order-force-dark.idh-order .panel-choose-domain,
html.lagom-dark-mode.idh-order .panel-choose-domain > .panel-body,
html.idh-order-force-dark.idh-order .panel-choose-domain > .panel-body,
html.lagom-dark-mode.idh-order .panel-domain-search,
html.idh-order-force-dark.idh-order .panel-domain-search{
background:#1a2438 !important;
border-color:var(--idh-line) !important;
color:var(--idh-ink) !important;
}
/* 14j. Package cards (section 6) ---------------------------------- */
html.lagom-dark-mode.idh-order .package,
html.idh-order-force-dark.idh-order .package{
background:var(--idh-card);
}
/* 14k. Order summary panels (section 10/11) ----------------------- */
html.lagom-dark-mode.idh-order .summary-content,
html.idh-order-force-dark.idh-order .summary-content,
html.lagom-dark-mode.idh-order .ordersummary-checkout,
html.idh-order-force-dark.idh-order .ordersummary-checkout,
html.lagom-dark-mode.idh-order .order-summary,
html.idh-order-force-dark.idh-order .order-summary{
background:var(--idh-card);
}
/* 14l. Payment gateway radios (section 12) ------------------------ */
html.lagom-dark-mode.idh-order .payment-method-radio,
html.idh-order-force-dark.idh-order .payment-method-radio,
html.lagom-dark-mode.idh-order .gateway-card,
html.idh-order-force-dark.idh-order .gateway-card{
background:var(--idh-card) !important;border-color:var(--idh-line) !important;
}
/* 14m. Step indicator container ----------------------------------- */
html.lagom-dark-mode.idh-order .idh-steps,
html.idh-order-force-dark.idh-order .idh-steps{
background:var(--idh-card);border-color:var(--idh-line);
}
/* 14o. Selectize dropdown (TLD .dk picker, country, etc.) --------- */
/* Sizing fix: when Selectize wraps a .input-sm select (e.g. domain
period switcher: "99.99DKK / 1årligt"), the inner .selectize-input
inherits the tight fixed height and clips descenders. Allow it to
grow to fit text with proper line-height. */
html.idh-order .selectize-control.single .selectize-input,
html.idh-order .selectize-input,
html.idh-order .selectize-control.input-sm .selectize-input,
html.idh-order .form-control.input-sm + .selectize-control .selectize-input{
height:auto !important;
min-height:38px;
padding:8px 30px 8px 12px !important;
line-height:1.5 !important;
font-size:13px;
border-radius:9px;
display:flex !important;align-items:center;
}
html.lagom-dark-mode.idh-order .selectize-input,
html.idh-order-force-dark.idh-order .selectize-input,
html.lagom-dark-mode.idh-order .selectize-control .selectize-input,
html.idh-order-force-dark.idh-order .selectize-control .selectize-input{
background:#0c1322 !important;color:var(--idh-ink) !important;
border-color:var(--idh-line) !important;box-shadow:none !important;
}
html.lagom-dark-mode.idh-order .selectize-control.single .selectize-input,
html.idh-order-force-dark.idh-order .selectize-control.single .selectize-input,
html.lagom-dark-mode.idh-order .selectize-control.single .selectize-input.input-active,
html.idh-order-force-dark.idh-order .selectize-control.single .selectize-input.input-active,
html.lagom-dark-mode.idh-order .selectize-control.single .selectize-input.dropdown-active,
html.idh-order-force-dark.idh-order .selectize-control.single .selectize-input.dropdown-active{
background:#0c1322 !important;
color:var(--idh-ink) !important;
border-color:var(--idh-line) !important;
}
html.lagom-dark-mode.idh-order .selectize-control,
html.idh-order-force-dark.idh-order .selectize-control,
html.lagom-dark-mode.idh-order .selectize-input > *,
html.idh-order-force-dark.idh-order .selectize-input > *,
html.lagom-dark-mode.idh-order .selectize-input .item,
html.idh-order-force-dark.idh-order .selectize-input .item,
html.lagom-dark-mode.idh-order .selectize-input input,
html.idh-order-force-dark.idh-order .selectize-input input{
background:transparent !important;
color:var(--idh-ink) !important;
-webkit-text-fill-color:var(--idh-ink) !important;
}
html.lagom-dark-mode.idh-order .selectize-input:before,
html.idh-order-force-dark.idh-order .selectize-input:before{
background:transparent !important;
}
html.lagom-dark-mode.idh-order .selectize-control.single .selectize-input:after,
html.idh-order-force-dark.idh-order .selectize-control.single .selectize-input:after{
border-color:var(--idh-muted) transparent transparent transparent !important;
}
html.lagom-dark-mode.idh-order .domain-search-input-group .selectize-control,
html.idh-order-force-dark.idh-order .domain-search-input-group .selectize-control,
html.lagom-dark-mode.idh-order .domain-search-input-group .selectize-input,
html.idh-order-force-dark.idh-order .domain-search-input-group .selectize-input,
html.lagom-dark-mode.idh-order .domain-search-input-group .selectize-control.single .selectize-input,
html.idh-order-force-dark.idh-order .domain-search-input-group .selectize-control.single .selectize-input{
background:#0c1322 !important;
background-image:none !important;
color:var(--idh-ink) !important;
border-color:var(--idh-line) !important;
box-shadow:none !important;
}
html.lagom-dark-mode.idh-order .selectize-dropdown,
html.idh-order-force-dark.idh-order .selectize-dropdown,
html.lagom-dark-mode.idh-order .selectize-dropdown .option,
html.idh-order-force-dark.idh-order .selectize-dropdown .option{
background:#0c1322 !important;color:var(--idh-ink) !important;
border-color:var(--idh-line) !important;
}
html.lagom-dark-mode.idh-order .selectize-dropdown,
html.idh-order-force-dark.idh-order .selectize-dropdown,
html.lagom-dark-mode.idh-order .selectize-dropdown.single,
html.idh-order-force-dark.idh-order .selectize-dropdown.single,
html.lagom-dark-mode.idh-order .selectize-dropdown.form-control,
html.idh-order-force-dark.idh-order .selectize-dropdown.form-control{
display:block;
z-index:99999 !important;
margin-top:4px !important;
background:#0c1322 !important;
border:1px solid var(--idh-line) !important;
border-radius:10px !important;
box-shadow:0 14px 32px rgba(0,0,0,0.45) !important;
overflow:hidden !important;
}
html.lagom-dark-mode.idh-order .selectize-dropdown .selectize-dropdown-content,
html.idh-order-force-dark.idh-order .selectize-dropdown .selectize-dropdown-content{
background:#0c1322 !important;
color:var(--idh-ink) !important;
max-height:240px !important;
}
html.lagom-dark-mode.idh-order .selectize-dropdown .option.active,
html.idh-order-force-dark.idh-order .selectize-dropdown .option.active,
html.lagom-dark-mode.idh-order .selectize-dropdown .active,
html.idh-order-force-dark.idh-order .selectize-dropdown .active{
background:#22304a !important;color:var(--idh-ink) !important;
}
html.lagom-dark-mode.idh-order .inline-form [data-dropdown-select] .dropdown-toggle,
html.idh-order-force-dark.idh-order .inline-form [data-dropdown-select] .dropdown-toggle,
html.lagom-dark-mode.idh-order .inline-form [data-dropdown-select] .tld-select,
html.idh-order-force-dark.idh-order .inline-form [data-dropdown-select] .tld-select{
background:#0c1322 !important;
background-image:none !important;
border-color:var(--idh-line) !important;
color:var(--idh-ink) !important;
box-shadow:none !important;
}
html.lagom-dark-mode.idh-order .inline-form [data-dropdown-select] .tld-select span,
html.idh-order-force-dark.idh-order .inline-form [data-dropdown-select] .tld-select span,
html.lagom-dark-mode.idh-order .inline-form [data-dropdown-select] [data-dropdown-select-value-view],
html.idh-order-force-dark.idh-order .inline-form [data-dropdown-select] [data-dropdown-select-value-view]{
background:transparent !important;
color:var(--idh-ink) !important;
-webkit-text-fill-color:var(--idh-ink) !important;
}
html.lagom-dark-mode.idh-order .inline-form [data-dropdown-select] .caret,
html.idh-order-force-dark.idh-order .inline-form [data-dropdown-select] .caret{
border-top-color:var(--idh-muted) !important;
}
html.lagom-dark-mode.idh-order .inline-form [data-dropdown-select] .dropdown-menu,
html.idh-order-force-dark.idh-order .inline-form [data-dropdown-select] .dropdown-menu,
html.lagom-dark-mode.idh-order .inline-form [data-dropdown-select] .dropdown-menu-search,
html.idh-order-force-dark.idh-order .inline-form [data-dropdown-select] .dropdown-menu-search,
html.lagom-dark-mode.idh-order .inline-form [data-dropdown-select] .dropdown-menu-items,
html.idh-order-force-dark.idh-order .inline-form [data-dropdown-select] .dropdown-menu-items{
background:#0c1322 !important;
border-color:var(--idh-line) !important;
color:var(--idh-ink) !important;
}
html.lagom-dark-mode.idh-order .inline-form [data-dropdown-select] .dropdown-header,
html.idh-order-force-dark.idh-order .inline-form [data-dropdown-select] .dropdown-header,
html.lagom-dark-mode.idh-order .inline-form [data-dropdown-select] .dropdown-header .form-control,
html.idh-order-force-dark.idh-order .inline-form [data-dropdown-select] .dropdown-header .form-control{
background:#10192b !important;
border-color:var(--idh-line) !important;
color:var(--idh-ink) !important;
-webkit-text-fill-color:var(--idh-ink) !important;
}
html.lagom-dark-mode.idh-order .inline-form [data-dropdown-select] .dropdown-menu-item,
html.idh-order-force-dark.idh-order .inline-form [data-dropdown-select] .dropdown-menu-item,
html.lagom-dark-mode.idh-order .inline-form [data-dropdown-select] .dropdown-menu-item a,
html.idh-order-force-dark.idh-order .inline-form [data-dropdown-select] .dropdown-menu-item a{
background:transparent !important;
color:var(--idh-ink) !important;
-webkit-text-fill-color:var(--idh-ink) !important;
}
html.lagom-dark-mode.idh-order .inline-form [data-dropdown-select] .dropdown-menu-item:hover,
html.idh-order-force-dark.idh-order .inline-form [data-dropdown-select] .dropdown-menu-item:hover,
html.lagom-dark-mode.idh-order .inline-form [data-dropdown-select] .dropdown-menu-item.active,
html.idh-order-force-dark.idh-order .inline-form [data-dropdown-select] .dropdown-menu-item.active,
html.lagom-dark-mode.idh-order .inline-form [data-dropdown-select] .dropdown-menu-item:hover a,
html.idh-order-force-dark.idh-order .inline-form [data-dropdown-select] .dropdown-menu-item:hover a,
html.lagom-dark-mode.idh-order .inline-form [data-dropdown-select] .dropdown-menu-item.active a,
html.idh-order-force-dark.idh-order .inline-form [data-dropdown-select] .dropdown-menu-item.active a{
background:#22304a !important;
color:var(--idh-ink) !important;
-webkit-text-fill-color:var(--idh-ink) !important;
}
html.lagom-dark-mode.idh-order .panel-choose-domain,
html.idh-order-force-dark.idh-order .panel-choose-domain,
html.lagom-dark-mode.idh-order .domain-card-wrapper,
html.idh-order-force-dark.idh-order .domain-card-wrapper,
html.lagom-dark-mode.idh-order #domainregister.inline-form,
html.idh-order-force-dark.idh-order #domainregister.inline-form,
html.lagom-dark-mode.idh-order #domaintransfer.inline-form,
html.idh-order-force-dark.idh-order #domaintransfer.inline-form,
html.lagom-dark-mode.idh-order #domainsubdomain.inline-form,
html.idh-order-force-dark.idh-order #domainsubdomain.inline-form,
html.lagom-dark-mode.idh-order #domainregister [domain-search-standard],
html.idh-order-force-dark.idh-order #domainregister [domain-search-standard],
html.lagom-dark-mode.idh-order #domaintransfer [domain-search-standard],
html.idh-order-force-dark.idh-order #domaintransfer [domain-search-standard]{
overflow:visible !important;
}
html.lagom-dark-mode.idh-order #domainregister,
html.idh-order-force-dark.idh-order #domainregister,
html.lagom-dark-mode.idh-order #domaintransfer,
html.idh-order-force-dark.idh-order #domaintransfer,
html.lagom-dark-mode.idh-order #domainsubdomain,
html.idh-order-force-dark.idh-order #domainsubdomain,
html.lagom-dark-mode.idh-order .inline-form [data-dropdown-select],
html.idh-order-force-dark.idh-order .inline-form [data-dropdown-select]{
position:relative !important;
z-index:50 !important;
}
html.lagom-dark-mode.idh-order .inline-form [data-dropdown-select].open,
html.idh-order-force-dark.idh-order .inline-form [data-dropdown-select].open,
html.lagom-dark-mode.idh-order .inline-form [data-dropdown-select].show,
html.idh-order-force-dark.idh-order .inline-form [data-dropdown-select].show{
z-index:100000 !important;
}
html.lagom-dark-mode.idh-order .inline-form [data-dropdown-select] .dropdown-menu,
html.idh-order-force-dark.idh-order .inline-form [data-dropdown-select] .dropdown-menu{
position:absolute !important;
top:100% !important;
bottom:auto !important;
right:0 !important;
left:auto !important;
transform:none !important;
z-index:100001 !important;
min-width:220px !important;
max-height:none !important;
margin-top:6px !important;
overflow:visible !important;
}
html.lagom-dark-mode.idh-order .inline-form [data-dropdown-select] .dropdown-menu-items,
html.idh-order-force-dark.idh-order .inline-form [data-dropdown-select] .dropdown-menu-items{
max-height:260px !important;
overflow-y:auto !important;
overflow-x:hidden !important;
}
/* 14p. TLD cards / domain pricing rows (white .btn fallbacks) ----- */
html.lagom-dark-mode.idh-order .tld-card,
html.idh-order-force-dark.idh-order .tld-card,
html.lagom-dark-mode.idh-order .domains-tlds .tld,
html.idh-order-force-dark.idh-order .domains-tlds .tld,
html.lagom-dark-mode.idh-order .tld-suggestions .tld,
html.idh-order-force-dark.idh-order .tld-suggestions .tld{
background:#1a2438 !important;border-color:var(--idh-line) !important;
}
html.lagom-dark-mode.idh-order .tld-card .btn,
html.idh-order-force-dark.idh-order .tld-card .btn,
html.lagom-dark-mode.idh-order .tld .btn,
html.idh-order-force-dark.idh-order .tld .btn,
html.lagom-dark-mode.idh-order .domain-pricing-table .btn,
html.idh-order-force-dark.idh-order .domain-pricing-table .btn,
html.lagom-dark-mode.idh-order .tld-pricing-list .btn,
html.idh-order-force-dark.idh-order .tld-pricing-list .btn{
background:#1a2438 !important;color:var(--idh-ink) !important;
border-color:var(--idh-line) !important;
}
html.lagom-dark-mode.idh-order .tld-card input,
html.idh-order-force-dark.idh-order .tld-card input,
html.lagom-dark-mode.idh-order .tld input,
html.idh-order-force-dark.idh-order .tld input{
background:#0c1322 !important;color:var(--idh-ink) !important;
border-color:var(--idh-line) !important;
}
/* 14q. Featured ribbon (light gradient by default) ---------------- */
html.lagom-dark-mode.idh-order .package .featured-ribbon,
html.idh-order-force-dark.idh-order .package .featured-ribbon,
html.lagom-dark-mode.idh-order .featured-corner-ribbon,
html.idh-order-force-dark.idh-order .featured-corner-ribbon,
html.lagom-dark-mode.idh-order .panel-featured,
html.idh-order-force-dark.idh-order .panel-featured{
background:var(--idh-brand);color:#fff;
}
/* 14r. Catch-all: anything paying white bg via inline/computed ---- */
html.lagom-dark-mode.idh-order .panel-body,
html.idh-order-force-dark.idh-order .panel-body,
html.lagom-dark-mode.idh-order .panel-bodyless,
html.idh-order-force-dark.idh-order .panel-bodyless,
html.lagom-dark-mode.idh-order .well,
html.idh-order-force-dark.idh-order .well{
background:transparent !important;
}
html.lagom-dark-mode.idh-order .panel-summary .panel-heading,
html.idh-order-force-dark.idh-order .panel-summary .panel-heading,
html.lagom-dark-mode.idh-order .panel-ordersummary .panel-heading,
html.idh-order-force-dark.idh-order .panel-ordersummary .panel-heading{
background:transparent !important;color:var(--idh-ink) !important;
border-bottom:1px solid var(--idh-line) !important;
}
/* 14s. Summary emergency dark reset ------------------------------- */
html.lagom-dark-mode.idh-order .panel-summary,
html.idh-order-force-dark.idh-order .panel-summary,
html.lagom-dark-mode.idh-order .panel-summary-configuration,
html.idh-order-force-dark.idh-order .panel-summary-configuration,
html.lagom-dark-mode.idh-order .panel-summary-secondary,
html.idh-order-force-dark.idh-order .panel-summary-secondary,
html.lagom-dark-mode.idh-order .panel-ordersummary,
html.idh-order-force-dark.idh-order .panel-ordersummary{
background:#1a2438 !important;
border-color:var(--idh-line) !important;
color:var(--idh-ink) !important;
}
html.lagom-dark-mode.idh-order .panel-summary .panel-heading,
html.idh-order-force-dark.idh-order .panel-summary .panel-heading,
html.lagom-dark-mode.idh-order .panel-summary-configuration .panel-heading,
html.idh-order-force-dark.idh-order .panel-summary-configuration .panel-heading,
html.lagom-dark-mode.idh-order .panel-summary-secondary .panel-heading,
html.idh-order-force-dark.idh-order .panel-summary-secondary .panel-heading,
html.lagom-dark-mode.idh-order .panel-ordersummary .panel-heading,
html.idh-order-force-dark.idh-order .panel-ordersummary .panel-heading,
html.lagom-dark-mode.idh-order .panel-summary .panel-body,
html.idh-order-force-dark.idh-order .panel-summary .panel-body,
html.lagom-dark-mode.idh-order .panel-summary-configuration .panel-body,
html.idh-order-force-dark.idh-order .panel-summary-configuration .panel-body,
html.lagom-dark-mode.idh-order .panel-summary-secondary .panel-body,
html.idh-order-force-dark.idh-order .panel-summary-secondary .panel-body,
html.lagom-dark-mode.idh-order .panel-ordersummary .panel-body,
html.idh-order-force-dark.idh-order .panel-ordersummary .panel-body,
html.lagom-dark-mode.idh-order .panel-summary .panel-footer,
html.idh-order-force-dark.idh-order .panel-summary .panel-footer,
html.lagom-dark-mode.idh-order .panel-summary-configuration .panel-footer,
html.idh-order-force-dark.idh-order .panel-summary-configuration .panel-footer,
html.lagom-dark-mode.idh-order .panel-summary-secondary .panel-footer,
html.idh-order-force-dark.idh-order .panel-summary-secondary .panel-footer,
html.lagom-dark-mode.idh-order .panel-ordersummary .panel-footer,
html.idh-order-force-dark.idh-order .panel-ordersummary .panel-footer,
html.lagom-dark-mode.idh-order .panel-summary #producttotal,
html.idh-order-force-dark.idh-order .panel-summary #producttotal,
html.lagom-dark-mode.idh-order .panel-summary-configuration #producttotal,
html.idh-order-force-dark.idh-order .panel-summary-configuration #producttotal{
background:#1a2438 !important;
border-color:var(--idh-line) !important;
color:var(--idh-ink) !important;
-webkit-text-fill-color:var(--idh-ink) !important;
}
/* 14n. Light-force escape hatch (re-asserts light tokens) --------- */
html.idh-order-force-light.idh-order{
--idh-ink: #0b1220;
--idh-ink-2: #1f2937;
--idh-muted: #6b7280;
--idh-muted-2: #9ca3af;
--idh-line: #e5e7eb;
--idh-line-2: #f1f2f4;
--idh-bg: #f7f8fb;
--idh-card: #ffffff;
--idh-brand-50: #eff6ff;
--idh-shadow-sm: 0 1px 2px rgba(16,24,40,.05);
--idh-shadow: 0 6px 24px -8px rgba(16,24,40,.12), 0 2px 6px -2px rgba(16,24,40,.06);
--idh-shadow-lg: 0 18px 40px -14px rgba(16,24,40,.18);
}