/* ============================================================== Hostigan — 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{ /* === Hostigan brand and dark surface tokens === */ --idh-brand:#0098FF; /* primary accent sampled from hostigan.com */ --idh-brand-600:#0079CC; /* darker hover/active state */ --idh-brand-50:rgba(0,152,255,.14); --idh-ink:#f5f7fb; --idh-ink-2:#d8dee8; --idh-muted:#a3acb8; --idh-muted-2:#747e8b; --idh-line:#2B2D2F; --idh-line-2:#24272B; --idh-bg:#181B1F; --idh-card:#1B1D1F; --idh-ok:#10b981; --idh-warn:#f59e0b; --idh-err:#ef4444; --idh-radius:14px; --idh-radius-sm:10px; --idh-shadow-sm:0 1px 2px rgba(0,0,0,.35); --idh-shadow:0 8px 28px -12px rgba(0,0,0,.62), 0 2px 8px -3px rgba(0,0,0,.42); --idh-shadow-lg:0 22px 46px -18px rgba(0,0,0,.72); --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(24,99,220,.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(24,99,220,.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:center;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:center;color:var(--idh-ink); } html.idh-order .package .package-price{margin-top:10px;text-align:center} html.idh-order .package .package-price .price{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-align:center; } html.idh-order .package .package-price .price-starting-from{ display:block;color:var(--idh-muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em; width:100%;margin:0;font-weight:500;line-height:1.2; } 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{ display:block;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{display:block;width:100%;color:var(--idh-muted);font-size:13px;line-height:1.35} 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; } /* IMPORTANT: use block + INLINE ::before check (NOT flex, NOT absolute). - Flex on
  • turned each text node + into its own flex item that wrapped word-by-word in narrow columns. - Absolute ::before at left:0 detached the check from the feature text and pinned it to the card's inner edge with a big gap. So we use a "hanging indent" pattern: padding-left + negative text-indent make the FIRST line start at the LI's left edge (with the inline check right next to the feature icon and text), while wrapped lines align neatly under the text. */ html.idh-order .package-content ul li, html.idh-order .package-features li{ display:block;border:0;margin:0; padding:0 0 0 24px; text-indent:-24px; word-break:normal;overflow-wrap:break-word; } html.idh-order .package-content ul li::before, html.idh-order .package-features li::before{ content:"";display:inline-block; width:16px;height:16px; vertical-align:-3px;margin-right:8px; text-indent:0; background:no-repeat center/contain url("data:image/svg+xml;utf8,"); } /* Keep Lagom feature category icon inline with the text */ html.idh-order .package-features li > i, html.idh-order .package-features li .features-icon, html.idh-order .package-content ul li > i{ display:inline-block;vertical-align:-2px;margin-right:4px; text-indent:0; } html.idh-order .package-features li strong, html.idh-order .package-content ul li strong{ display:inline;margin-right:2px;text-indent:0; } /* Section dividers inside the features list — Lagom uses .premium-divider and .features-heading. Reset our default check-icon padding and center. */ html.idh-order .premium-divider, html.idh-order .package-features > li.premium-divider, html.idh-order .package-features > li.features-heading, html.idh-order .package-features-condensed > li.premium-divider, html.idh-order .package-features-condensed > li.features-heading{ display:flex;align-items:center;justify-content:center; gap:10px; max-width:none;width:100%; margin:10px auto;padding:0 !important; text-align:center;color:var(--idh-brand);font-weight:600; position:relative;text-indent:0 !important; } html.idh-order .premium-divider::before, html.idh-order .package-features > li.premium-divider::before, html.idh-order .package-features > li.features-heading::before, html.idh-order .package-features-condensed > li.premium-divider::before, html.idh-order .package-features-condensed > li.features-heading::before{ content:none !important;display:none !important; background:none !important; } html.idh-order .premium-divider > span, html.idh-order .package-features > li.premium-divider > span, html.idh-order .package-features > li.features-heading > span{ display:inline-flex;align-items:center;justify-content:center; padding:0 8px;color:var(--idh-brand); font-size:13px;font-weight:600;letter-spacing:.02em; white-space:nowrap; } /* Decorative lines on both sides of the divider */ html.idh-order .premium-divider::after, html.idh-order .package-features > li.premium-divider::after, html.idh-order .package-features > li.features-heading::after{ content:none !important; } html.idh-order .premium-divider{ --line:rgba(255,255,255,.10); } html.lagom-dark-mode.idh-order .premium-divider, html.idh-order-force-dark.idh-order .premium-divider{ --line:rgba(255,255,255,.10); } html.idh-order .premium-divider{ background:linear-gradient(to right, var(--line) 0, var(--line) calc(50% - 70px), transparent calc(50% - 70px), transparent calc(50% + 70px), var(--line) calc(50% + 70px), var(--line) 100%) center / 100% 1px no-repeat; } 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 .panel-sidebar > .panel-heading, html.idh-order .categories-collapsed .panel > .panel-heading, html.idh-order .sidebar-categories .panel-heading{ background:transparent !important; border:0 !important; border-radius:0 !important; padding:0 0 12px !important; margin:0 !important; } html.idh-order .main-sidebar .panel-sidebar > .panel-heading .panel-title, html.idh-order .categories-collapsed .panel > .panel-heading .panel-title, html.idh-order .sidebar-categories .panel-heading .panel-title{ margin:0 !important; line-height:1.25; } html.idh-order .main-sidebar .panel-sidebar > .list-group, html.idh-order .sidebar-categories .list-group{ background:transparent !important; border:0 !important; margin:0 !important; } 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; display:flex !important;flex-direction:column; } html.idh-order .domain-card-wrapper .domain-card-header{flex:0 0 auto} html.idh-order .domain-card-wrapper .inline-form{margin-top:auto !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, html.idh-order .domain-transfer-bar{ max-width:460px !important;width:100% !important;box-sizing:border-box !important; } html.idh-order .domain-transfer-bar{ padding:12px 14px !important; display:flex !important;flex-direction:column;align-items:stretch;gap:10px; } html.idh-order .domain-transfer-hint{ margin:0 !important;text-align:center; white-space:normal;word-break:normal;overflow-wrap:anywhere; } html.idh-order .domain-transfer-link .btn, html.idh-order .domain-transfer-btn{ border-radius:10px; display:inline-flex !important;align-items:center;justify-content:center;gap:8px; width:100% !important;max-width:100% !important;box-sizing:border-box !important; padding:10px 14px !important; white-space:normal !important;word-break:normal;overflow-wrap:anywhere; line-height:1.25; } html.idh-order .domain-transfer-btn svg{margin:0 !important} /* 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; } /* ============================================================== YES/NO TOGGLE CARD — single-option .panel-check-group (e.g. "Premium Support 24/7", "Managed VPS" addons) Tagged with .idh-yesno by JS (tagYesNoOptions). ============================================================== */ html.idh-order .panel-check-group.idh-yesno{ display:block !important;margin-top:0 !important; } html.idh-order .panel-check-group.idh-yesno > [class*="col-"]{ width:100% !important;flex:0 0 100% !important;max-width:100% !important; } html.idh-order .panel-check-group.idh-yesno .panel-check{ padding:0 !important;min-height:0; cursor:pointer;overflow:hidden; border-radius:14px !important; background:rgba(255,255,255,.035) !important; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease; } html.idh-order .panel-check-group.idh-yesno .panel-check:hover{ border-color:rgba(24,99,220,.55) !important; transform:translateY(-1px); } html.idh-order .panel-check-group.idh-yesno .panel-check.checked{ border-color:var(--idh-brand) !important; background:linear-gradient(135deg, rgba(37,99,235,.16), rgba(37,99,235,.045)) !important; box-shadow:0 0 0 1px rgba(37,99,235,.30) inset, 0 12px 28px -22px rgba(37,99,235,.70) !important; padding:0 !important; } html.idh-order .panel-check-group.idh-yesno .panel-check label{ display:flex !important;align-items:center;justify-content:space-between;gap:18px; width:100%;margin:0;cursor:pointer;padding:16px 18px !important; } html.idh-order .panel-check-group.idh-yesno .panel-check .check{ width:100%;padding:0 !important;margin:0 !important; } html.idh-order .panel-check-group.idh-yesno .panel-check .check-content{ flex:1;min-width:0; display:grid !important; grid-template-columns:40px minmax(0,1fr); grid-template-rows:auto auto; column-gap:12px;row-gap:2px; align-items:center; } html.idh-order .panel-check-group.idh-yesno .panel-check .check-content::before{ content:"+"; grid-row:1 / span 2; width:40px;height:40px;border-radius:12px; display:inline-flex;align-items:center;justify-content:center; background:rgba(37,99,235,.12); color:var(--idh-brand); font-size:22px;font-weight:800;line-height:1; box-shadow:inset 0 0 0 1px rgba(37,99,235,.16); transition:all .18s ease; } html.idh-order .panel-check-group.idh-yesno .panel-check.checked .check-content::before{ content:"✓"; background:var(--idh-brand); color:#fff; box-shadow:0 8px 18px -10px rgba(37,99,235,.85); } html.idh-order .panel-check-group.idh-yesno .panel-check .check-title{ grid-column:2;margin:0 !important; font-size:0 !important;line-height:1 !important; color:var(--idh-muted) !important; } html.idh-order .panel-check-group.idh-yesno .panel-check .check-title::after{ content:"Optional add-on"; font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--idh-muted); } html.idh-order .panel-check-group.idh-yesno .panel-check.checked .check-title::after{ content:"Selected add-on"; color:#93b4ff; } html.idh-order .panel-check-group.idh-yesno .panel-check .check-subtitle{ grid-column:2;margin:0 !important; font-size:18px !important;font-weight:700 !important; color:var(--idh-ink) !important;letter-spacing:-.01em; line-height:1.2; } html.idh-order .panel-check-group.idh-yesno .panel-check label::after{ content:"Add"; flex:none;display:inline-flex;align-items:center;justify-content:center; min-width:78px;height:34px;padding:0 14px;border-radius:999px; border:1px solid var(--idh-line); background:rgba(255,255,255,.045); color:var(--idh-ink); font-size:13px;font-weight:800;letter-spacing:.01em; transition:all .18s ease; } html.idh-order .panel-check-group.idh-yesno .panel-check:hover label::after{ border-color:rgba(24,99,220,.55); } html.idh-order .panel-check-group.idh-yesno .panel-check.checked label::after{ content:"Added"; border-color:var(--idh-brand); background:var(--idh-brand); color:#fff; box-shadow:0 8px 18px -12px rgba(37,99,235,.85); } html.idh-order .panel-check-group.idh-yesno .panel-check::after{ content:none !important;display:none !important; } html.idh-order .panel-check-group.idh-yesno .panel-check::before{ content:none !important;display:none !important; } /* Dark-mode tweaks for the toggle card */ html.lagom-dark-mode.idh-order .panel-check-group.idh-yesno .panel-check, html.idh-order-force-dark.idh-order .panel-check-group.idh-yesno .panel-check{ background:#172238 !important; } html.lagom-dark-mode.idh-order .panel-check-group.idh-yesno .panel-check.checked, html.idh-order-force-dark.idh-order .panel-check-group.idh-yesno .panel-check.checked{ background:linear-gradient(135deg, rgba(37,99,235,.20), rgba(37,99,235,.055)) !important; } html.lagom-dark-mode.idh-order .panel-check-group.idh-yesno .panel-check .check-subtitle, html.idh-order-force-dark.idh-order .panel-check-group.idh-yesno .panel-check .check-subtitle{ color:var(--idh-ink) !important; } @media (max-width:520px){ html.idh-order .panel-check-group.idh-yesno .panel-check label{ align-items:stretch;flex-direction:column;gap:14px; } html.idh-order .panel-check-group.idh-yesno .panel-check label::after{ width:100%; } } /* 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)} html.idh-order .intl-tel-input{ display:block; width:100%; } html.idh-order .intl-tel-input input, html.idh-order .intl-tel-input input[type="tel"], html.idh-order .intl-tel-input input.form-control{ width:100%; } html.idh-order .intl-tel-input.separate-dial-code.allow-dropdown .selected-flag{ width:86px !important; } html.idh-order .intl-tel-input.separate-dial-code.allow-dropdown input, html.idh-order .intl-tel-input.separate-dial-code.allow-dropdown input[type="tel"], html.idh-order .intl-tel-input.separate-dial-code.allow-dropdown input.form-control{ padding-left:98px !important; } html.idh-order .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 .selected-flag{width:96px !important} html.idh-order .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input, html.idh-order .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type="tel"], html.idh-order .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input.form-control{padding-left:108px !important} html.idh-order .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 .selected-flag{width:106px !important} html.idh-order .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input, html.idh-order .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type="tel"], html.idh-order .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input.form-control{padding-left:118px !important} html.idh-order .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 .selected-flag{width:116px !important} html.idh-order .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input, html.idh-order .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type="tel"], html.idh-order .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input.form-control{padding-left:128px !important} /* .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-order--configuredomains .idh-steps{ display:none; } html.idh-order.idh-order--configuredomains .idh-domain-hero, html.idh-order.idh-order--configuredomains .idh-domain-config__header{ display:none !important; } html.idh-order.idh-order--configuredomains .idh-domain-config{ max-width:760px; margin:0 auto 96px; } html.idh-order.idh-order--configuredomains .idh-domain-config__header{ margin:0 0 14px; } html.idh-order.idh-order--configuredomains .idh-domain-config__title{ margin:0; color:var(--idh-ink); font-size:24px; line-height:1.15; font-weight:800; letter-spacing:0; } html.idh-order.idh-order--configuredomains .idh-domain-config__domains, html.idh-order.idh-order--configuredomains .idh-domain-config__nameservers{ margin:0; } html.idh-order.idh-order--configuredomains .panel-domain-info{ overflow:hidden; margin:0; border:1px solid rgba(148,163,184,.26); border-radius:6px; background:rgba(26,36,56,.88); box-shadow:none; } html.idh-order.idh-order--configuredomains .panel-domain-info + .panel-domain-info{ margin-top:16px; } html.idh-order.idh-order--configuredomains .panel-domain-info > .panel-body:first-child{ padding:16px; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info{ display:flex; align-items:center; gap:14px; min-width:0; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-icon{ flex:0 0 auto; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-icon .graphic-item{ display:grid; place-items:center; width:34px; height:34px; border-radius:8px; background:rgba(37,99,235,.14); color:#c7d2fe; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-icon svg, html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-icon i{ width:18px; height:18px; font-size:18px; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-body{ width:100%; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px 12px; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-top{ display:contents; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-title{ min-width:0; color:var(--idh-ink); font-size:16px; line-height:1.25; font-weight:800; letter-spacing:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-bottom{ grid-column:1; display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0; color:var(--idh-muted); font-size:12px; line-height:1.35; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-period{ color:var(--idh-muted); } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-top .form-group{ margin:0; } html.idh-order.idh-order--configuredomains .panel-domain-info [data-configuredomains-tld-cycle-switcher]{ min-width:150px; height:36px !important; padding:7px 12px !important; border-radius:6px; background:#0f1729 !important; border-color:rgba(148,163,184,.24) !important; color:var(--idh-ink) !important; font-size:12px; font-weight:700; text-align:center; } html.idh-order.idh-order--configuredomains .panel-domain-info .selectize-control{ min-width:150px; } html.idh-order.idh-order--configuredomains .panel-domain-info .selectize-input{ min-height:36px !important; padding:7px 28px 7px 12px !important; border-radius:6px !important; background:#0f1729 !important; border-color:rgba(148,163,184,.24) !important; color:var(--idh-ink) !important; font-size:12px; font-weight:700; line-height:1.45 !important; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-top .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; padding:0 10px; border-radius:6px; background:transparent; border-color:transparent; color:#fca5a5; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-top .btn:hover{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.28); color:#fecaca; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-top .btn i{ font-size:13px; } html.idh-order.idh-order--configuredomains .panel-domain-info .label{ display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border-radius:999px; font-size:11px; line-height:1; font-weight:700; } html.idh-order.idh-order--configuredomains .panel-domain-info .label-success{ background:rgba(16,185,129,.14) !important; border:1px solid rgba(16,185,129,.30); color:#86efac !important; } html.idh-order.idh-order--configuredomains .domain-info-addons{ margin-top:28px; } html.idh-order.idh-order--configuredomains .domain-info-addons .domain-addons-title{ margin:0 0 12px; color:var(--idh-ink); font-size:17px; line-height:1.25; font-weight:800; letter-spacing:0; } html.idh-order.idh-order--configuredomains .domain-info-addons [data-inputs-container]{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; margin:0; } html.idh-order.idh-order--configuredomains .domain-info-addons [data-inputs-container] > [class*="col-"]{ float:none; width:auto; max-width:none; min-height:0; padding:0; } html.idh-order.idh-order--configuredomains .domain-info-addons .panel-check{ height:100%; min-height:142px; margin:0; border:1px solid rgba(148,163,184,.24); border-radius:6px; background:rgba(26,36,56,.72); transition:border-color .15s ease, background .15s ease, box-shadow .15s ease; } html.idh-order.idh-order--configuredomains .domain-info-addons .panel-check:hover, html.idh-order.idh-order--configuredomains .domain-info-addons .panel-check.checked{ border-color:rgba(37,99,235,.62); background:rgba(31,42,66,.92); } html.idh-order.idh-order--configuredomains .domain-info-addons .panel-check.checked{ box-shadow:0 0 0 1px rgba(37,99,235,.18); } html.idh-order.idh-order--configuredomains .domain-info-addons .panel-check .check, html.idh-order.idh-order--configuredomains .domain-info-addons .panel-check label{ display:flex; flex-direction:column; height:100%; min-height:142px; margin:0; cursor:pointer; } html.idh-order.idh-order--configuredomains .domain-info-addons .panel-check label{ padding:18px; } html.idh-order.idh-order--configuredomains .domain-info-addons .icheck-control, html.idh-order.idh-order--configuredomains .domain-info-addons [class^="icheckbox"], html.idh-order.idh-order--configuredomains .domain-info-addons [class*=" icheckbox"], html.idh-order.idh-order--configuredomains .domain-info-addons [class^="iradio"], html.idh-order.idh-order--configuredomains .domain-info-addons [class*=" iradio"]{ position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; } html.idh-order.idh-order--configuredomains .domain-info-addons .check-content{ display:grid; grid-template-columns:28px minmax(0,1fr); gap:0 12px; align-items:start; padding:0; } html.idh-order.idh-order--configuredomains .domain-info-addons .idh-domain-addon-icon{ grid-row:1 / span 2; display:grid; place-items:center; width:28px; height:28px; color:#c7d2fe; } html.idh-order.idh-order--configuredomains .domain-info-addons .idh-domain-addon-icon i{ font-size:18px; } html.idh-order.idh-order--configuredomains .domain-info-addons .check-title{ margin:1px 0 8px; color:var(--idh-ink-2); font-size:14px; line-height:1.3; font-weight:800; letter-spacing:0; } html.idh-order.idh-order--configuredomains .domain-info-addons .check-title .ls-info-circle, html.idh-order.idh-order--configuredomains .domain-info-addons .check-title > span.ls{ margin-left:6px; color:var(--idh-muted-2); font-size:13px; } html.idh-order.idh-order--configuredomains .domain-info-addons .check-desc{ grid-column:2; margin:0; color:var(--idh-muted); font-size:12px; line-height:1.45; } html.idh-order.idh-order--configuredomains .domain-info-addons .check-subtitle{ margin:auto 0 0; padding-top:14px; border-top:1px solid rgba(148,163,184,.16); color:var(--idh-ink); font-size:16px; line-height:1.2; font-weight:900; letter-spacing:0; } html.idh-order.idh-order--configuredomains .domain-info-addons .check-subtitle span{ color:var(--idh-muted); font-size:11px; font-weight:700; } html.idh-order.idh-order--configuredomains .domain-info-addons .panel-check .btn{ align-self:flex-end; width:auto; min-width:112px; height:34px; margin-top:12px; padding:0 12px; border-radius:4px; background:rgba(37,99,235,.20); border-color:rgba(148,163,184,.20); color:var(--idh-ink); font-size:12px; font-weight:800; } html.idh-order.idh-order--configuredomains .domain-info-addons .panel-check.checked .btn{ background:var(--idh-brand); border-color:var(--idh-brand); color:#fff; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-additional{ margin:12px 16px 16px; padding:14px 16px !important; border:1px solid rgba(148,163,184,.24) !important; border-radius:6px; background:rgba(15,23,41,.42) !important; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-additional .form-group.row{ display:block; margin:0; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-additional .form-group.row + .form-group.row{ margin-top:12px; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-additional .col-form-label{ display:block; width:auto; max-width:none; float:none; padding:0; margin:0 0 8px; color:var(--idh-muted); font-size:11px; line-height:1.4; font-weight:800; letter-spacing:0; text-transform:none; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-additional .col-checkbox{ width:100%; max-width:none; float:none; padding:0; margin:0; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-additional .form-control, html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-additional select, html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-additional input[type="text"]{ width:100%; min-height:36px; border-radius:4px; background:#0c1322 !important; border-color:rgba(148,163,184,.26) !important; color:var(--idh-ink) !important; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-additional .help-block{ margin-top:8px; color:var(--idh-muted); font-size:12px; line-height:1.45; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-field-checkbox{ display:grid !important; grid-template-columns:1fr; align-items:start; gap:10px; padding:14px; border:1px solid rgba(148,163,184,.18); border-radius:6px; background:rgba(15,23,41,.30); } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-field-checkbox > label{ margin:0; color:var(--idh-ink-2); font-size:13px; line-height:1.35; font-weight:800; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-field-checkbox .col-checkbox{ width:auto; display:grid; grid-template-columns:22px minmax(0,1fr); align-items:start; gap:10px; min-width:0; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-field-checkbox .checkbox-styled{ position:relative !important; display:block !important; width:20px !important; height:20px !important; margin:1px 0 0 !important; border-radius:4px !important; } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-field-checkbox input[type="checkbox"]{ width:20px; height:20px; margin:0; accent-color:var(--idh-brand); } html.idh-order.idh-order--configuredomains .panel-domain-info .domain-field-checkbox .help-block{ grid-column:2; margin:0; color:var(--idh-muted); font-size:12px; line-height:1.45; } html.idh-order.idh-order--configuredomains .idh-domain-config__nameservers{ margin-top:16px; } html.idh-order.idh-order--configuredomains .idh-domain-config__nameservers .panel{ border:1px solid rgba(148,163,184,.24); border-radius:6px; background:rgba(26,36,56,.72); } html.idh-order.idh-order--configuredomains .bottom-action-sticky{ background:#090E14; border-top:1px solid rgba(148,163,184,.18); box-shadow:0 -12px 32px rgba(0,0,0,.28); } html.idh-order.idh-order--configuredomains .bottom-action-sticky .container{ max-width:760px; min-height:74px; padding-left:0; padding-right:0; } html.idh-order.idh-order--configuredomains .bottom-action-sticky .sticky-content{ display:none; } html.idh-order.idh-order--configuredomains .bottom-action-sticky .sticky-actions{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; } html.idh-order.idh-order--configuredomains .bottom-action-sticky .btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; border-radius:4px; letter-spacing:0; } html.idh-order.idh-order--configuredomains .bottom-action-sticky .btn > span{ display:inline-flex; align-items:center; gap:8px; } html.idh-order.idh-order--configuredomains .bottom-action-sticky .idh-domain-config__back{ min-width:96px; padding:0 10px; background:transparent !important; border-color:transparent !important; color:var(--idh-muted) !important; box-shadow:none !important; } html.idh-order.idh-order--configuredomains .bottom-action-sticky .idh-domain-config__back:hover{ color:var(--idh-ink) !important; } html.idh-order.idh-order--configuredomains .bottom-action-sticky .btn-primary{ min-width:250px; padding:0 22px; } @media (max-width:820px){ html.idh-order.idh-order--configuredomains .idh-domain-config{max-width:none;margin-bottom:118px} html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info{align-items:flex-start} html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-body{grid-template-columns:1fr} html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-bottom{grid-column:1} html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-top .form-group, html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-top .btn, html.idh-order.idh-order--configuredomains .panel-domain-info .selectize-control, html.idh-order.idh-order--configuredomains .panel-domain-info [data-configuredomains-tld-cycle-switcher]{width:100%;min-width:0} html.idh-order.idh-order--configuredomains .bottom-action-sticky .container{padding-left:16px;padding-right:16px} } @media (max-width:560px){ html.idh-order.idh-order--configuredomains .idh-domain-config__title{font-size:22px} html.idh-order.idh-order--configuredomains .panel-domain-info > .panel-body:first-child{padding:14px} html.idh-order.idh-order--configuredomains .domain-info-addons [data-inputs-container]{grid-template-columns:1fr} html.idh-order.idh-order--configuredomains .panel-domain-info .domain-info-additional{margin:10px 14px 14px} html.idh-order.idh-order--configuredomains .bottom-action-sticky .sticky-actions{align-items:stretch} html.idh-order.idh-order--configuredomains .bottom-action-sticky .btn-primary{flex:1;min-width:0} } 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-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-heading{ padding:18px 24px !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; } /* Place Order CTA — force solid, high-contrast primary even when Lagom summaryStyle outputs btn-primary-faded (which is illegible on dark bg). */ html.idh-order .summary-actions .btn-checkout, html.idh-order .summary-actions .btn-checkout.btn-primary, html.idh-order .summary-actions .btn-checkout.btn-primary-faded, html.idh-order #orderSummary .btn-checkout, html.idh-order #orderSummary .btn-primary-faded.btn-checkout{ background:var(--idh-brand) !important; border-color:var(--idh-brand) !important; color:#fff !important; box-shadow:0 8px 22px -10px rgba(37,99,235,.65) !important; } html.idh-order .summary-actions .btn-checkout:hover, html.idh-order .summary-actions .btn-checkout:focus, html.idh-order .summary-actions .btn-checkout:active, html.idh-order .summary-actions .btn-checkout.btn-primary-faded:hover, html.idh-order #orderSummary .btn-checkout:hover, html.idh-order #orderSummary .btn-checkout:focus, html.idh-order #orderSummary .btn-primary-faded.btn-checkout:hover{ background:var(--idh-brand-600) !important; border-color:var(--idh-brand-600) !important; color:#fff !important; } html.idh-order .summary-actions .btn-checkout > span, html.idh-order .summary-actions .btn-checkout i, html.idh-order #orderSummary .btn-checkout > span, html.idh-order #orderSummary .btn-checkout i{ color:#fff !important; } /* Hide checkout billing fields we don't want to collect: Company Name, VAT Number (tax_id), Street Address 2. Inputs remain in the DOM so WHMCS form submission stays valid; we just hide the surrounding column wrapper. */ html.idh-order .col-sm-6:has(> .form-group > #inputCompanyName), html.idh-order .col-sm-6:has(> .form-group > #inputTaxId), html.idh-order .col-sm-6:has(> .form-group > #inputAddress2), html.idh-order .col-md-6:has(> .form-group > #inputCompanyName), html.idh-order .col-md-6:has(> .form-group > #inputTaxId), html.idh-order .col-md-6:has(> .form-group > #inputAddress2){ display:none !important; } /* Fallback for browsers without :has() — hide the form-group itself */ html.idh-order .form-group:has(> #inputCompanyName), html.idh-order .form-group:has(> #inputTaxId), html.idh-order .form-group:has(> #inputAddress2){ display:none !important; } /* ============================================================== COUNTRY PICKER — custom dropdown for