/* ==================================================================== Configure-product + domain step — make it blend into the rest of the site. Selector-scoped to #order-standard_cart / #frmConfigureProduct (inert elsewhere); centring is JS-gated via .tc-cp-centered. Uses --tc-* theme tokens so it tracks light/dark automatically. ==================================================================== */ /* ---- Centre the content: drop the empty categories sidebar and centre the cart body. Gated on .tc-cp-centered (added by JS only when the sidebar is empty and there is no product grid) so listings/cart pages are untouched. ---- */ #order-standard_cart.tc-cp-centered .cart-sidebar{display:none!important;} #order-standard_cart.tc-cp-centered{max-width:1340px!important;} #order-standard_cart.tc-cp-centered .cart-body{flex:1 1 100%!important;width:100%!important;max-width:1320px!important;margin:0 auto!important;float:none!important;} #order-standard_cart.tc-cp-centered .row{margin-left:0;margin-right:0;} #frmConfigureProduct{max-width:none;} #frmConfigureProduct .header-lined h1{font-family:Montserrat,sans-serif;font-weight:700;letter-spacing:-.4px;color:var(--tc-text,#1f2329);} body.tc-dark #frmConfigureProduct .header-lined h1{color:#e9f1f8;} #frmConfigureProduct .secondary-cart-body > p:first-of-type{font-family:Montserrat,sans-serif;font-size:14px;line-height:1.55;color:var(--tc-text-2,#5b6573);margin:2px 0 20px;} body.tc-dark #frmConfigureProduct .secondary-cart-body > p:first-of-type{color:#9fb0c0;} /* ---- One card language: product summary + each form section ---- */ #frmConfigureProduct .product-info, #frmConfigureProduct .field-container, #frmConfigureProduct #productConfigurableOptions{ background:var(--tc-surface,#fff);border:1px solid var(--tc-border,#e6eaf0); border-radius:var(--tc-r-xl,18px);box-shadow:var(--tc-shadow,0 10px 30px rgba(15,32,55,.06)); padding:22px 24px;margin:0 0 18px; } /* beat the theme's `body #order-standard_cart .product-info` (2-id) rule */ #order-standard_cart #frmConfigureProduct .product-info{border-radius:var(--tc-r-xl,18px)!important;box-shadow:var(--tc-shadow,0 10px 30px rgba(15,32,55,.06))!important;border:1px solid var(--tc-border,#e6eaf0)!important;background:var(--tc-surface,#fff)!important;padding:22px 24px!important;} #frmConfigureProduct .product-info .product-title{font-family:Montserrat,sans-serif;font-weight:700;font-size:21px;line-height:1.22;color:var(--tc-text,#1f2329);margin:0 0 12px;} body.tc-dark #frmConfigureProduct .product-info .product-title{color:#e9f1f8;} /* ---- Section sub-headings (Configurable Options, custom fields…) ---- */ #frmConfigureProduct .sub-heading{margin:26px 0 14px!important;border:0!important;background:transparent!important;padding:0!important;} #frmConfigureProduct .sub-heading span{background:transparent!important;color:var(--tc-text,#1f2329)!important;font-family:Montserrat,sans-serif!important;font-weight:700!important;font-size:15px!important;letter-spacing:.2px;padding:0!important;display:inline-flex;align-items:center;gap:9px;} #frmConfigureProduct .sub-heading span::before{content:"";width:4px;height:17px;border-radius:3px;background:linear-gradient(180deg,#1B77C9,#44A8DA);display:inline-block;} body.tc-dark #frmConfigureProduct .sub-heading span{color:#e9f1f8!important;} /* ---- Labels ---- */ #frmConfigureProduct label{font-family:Montserrat,sans-serif;font-weight:700;font-size:13px;color:var(--tc-text,#2b3440);margin:0 0 9px;display:block;} body.tc-dark #frmConfigureProduct label{color:#cdd8e6;} /* ---- Form controls — match the rest of the site ---- */ #frmConfigureProduct .form-control, #frmConfigureProduct select, #frmConfigureProduct input[type=text], #frmConfigureProduct input[type=email], #frmConfigureProduct input[type=number], #frmConfigureProduct input[type=tel], #frmConfigureProduct textarea{ font-family:Montserrat,sans-serif;font-size:14px;color:var(--tc-text,#1f2329); background:var(--tc-surface,#fff);border:1px solid var(--tc-border,#dfe5ee);border-radius:10px; padding:11px 14px;height:auto;width:100%;box-shadow:none;transition:border-color .15s,box-shadow .15s; } #frmConfigureProduct textarea{min-height:84px;line-height:1.5;} #frmConfigureProduct .form-control:focus, #frmConfigureProduct select:focus, #frmConfigureProduct input:focus, #frmConfigureProduct textarea:focus{ border-color:var(--tc-accent,#44A8DA);box-shadow:0 0 0 3px rgba(68,168,218,.22);outline:none; } #frmConfigureProduct select,#frmConfigureProduct select.custom-select{ -webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231B77C9' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;padding-right:40px; } body.tc-dark #frmConfigureProduct .form-control, body.tc-dark #frmConfigureProduct select, body.tc-dark #frmConfigureProduct input[type=text], body.tc-dark #frmConfigureProduct input[type=email], body.tc-dark #frmConfigureProduct input[type=number], body.tc-dark #frmConfigureProduct textarea{background:#0f161d;border-color:#2a3744;color:#e9f1f8;} body.tc-dark #frmConfigureProduct select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2344A8DA' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");} /* ---- Checkboxes (e.g. the optional setup add-on) ---- */ #frmConfigureProduct input[type=checkbox],#frmConfigureProduct input[type=radio]{width:19px;height:19px;accent-color:#1B77C9;cursor:pointer;vertical-align:-3px;} /* ==================================================================== Ion.RangeSlider v1 (the per-seat quantity slider) — branded upgrade. The handle is .irs-slider (NOT v2's .irs-handle). Line + bar + handle share a consistent vertical centre (line centre 28px ≈ handle centre 16+12=28px) so nothing misaligns. ==================================================================== */ #frmConfigureProduct .irs{font-family:Montserrat,sans-serif;height:56px;margin-top:8px;} #frmConfigureProduct .irs-line,#frmConfigureProduct .irs-line-mid,#frmConfigureProduct .irs-line-left,#frmConfigureProduct .irs-line-right{height:8px!important;top:24px!important;background:var(--tc-border,#e6eaf0)!important;border:0!important;border-radius:99px!important;box-shadow:none!important;} #frmConfigureProduct .irs-bar{height:8px!important;top:24px!important;background:linear-gradient(90deg,#1B77C9,#44A8DA)!important;border:0!important;border-radius:99px 0 0 99px!important;box-shadow:none!important;} #frmConfigureProduct .irs-bar-edge{height:8px!important;top:24px!important;width:13px;background:#1B77C9!important;border:0!important;border-radius:99px 0 0 99px!important;box-shadow:none!important;} #frmConfigureProduct .irs-shadow{display:none!important;} #frmConfigureProduct .irs-slider,#frmConfigureProduct .irs-handle{top:16px!important;width:24px!important;height:24px!important;background:#fff!important;border:3px solid #1B77C9!important;border-radius:50%!important;box-shadow:0 5px 14px rgba(27,119,201,.40)!important;cursor:grab;transition:transform .12s,box-shadow .12s;} #frmConfigureProduct .irs-slider:hover,#frmConfigureProduct .irs-handle:hover{transform:scale(1.08);} #frmConfigureProduct .irs-slider.state_hover,#frmConfigureProduct .irs-slider:active{cursor:grabbing;transform:scale(1.02);} #frmConfigureProduct .irs-slider>i,#frmConfigureProduct .irs-handle>i{display:none!important;} #frmConfigureProduct .irs-single,#frmConfigureProduct .irs-from,#frmConfigureProduct .irs-to{ background:linear-gradient(135deg,#1B77C9,#44A8DA)!important;color:#fff!important;font-weight:700;font-size:12px; border-radius:8px;padding:4px 10px;text-shadow:none!important;box-shadow:0 4px 10px rgba(27,119,201,.28); } #frmConfigureProduct .irs-single::before,#frmConfigureProduct .irs-from::before,#frmConfigureProduct .irs-to::before, #frmConfigureProduct .irs-single:after,#frmConfigureProduct .irs-from:after,#frmConfigureProduct .irs-to:after{border-top-color:#1B77C9!important;} #frmConfigureProduct .irs-min,#frmConfigureProduct .irs-max{background:var(--tc-bg,#f1f4f8)!important;color:var(--tc-text-3,#8a94a3)!important;font-size:11px;font-weight:700;border-radius:6px;text-shadow:none!important;} #frmConfigureProduct .irs-grid-text{color:var(--tc-text-3,#9aa4b2)!important;font-size:10px;font-weight:600;} #frmConfigureProduct .irs-grid-pol{background:var(--tc-border,#cfd8e3)!important;} body.tc-dark #frmConfigureProduct .irs-line,body.tc-dark #frmConfigureProduct .irs-line-mid{background:#222c37!important;} body.tc-dark #frmConfigureProduct .irs-slider,body.tc-dark #frmConfigureProduct .irs-handle{background:#0f161d!important;} body.tc-dark #frmConfigureProduct .irs-min,body.tc-dark #frmConfigureProduct .irs-max{background:#1a232d!important;} /* ==================================================================== Order-summary panel (right column) — premium card ==================================================================== */ #frmConfigureProduct .secondary-cart-sidebar{padding-left:8px;} #frmConfigureProduct .secondary-cart-sidebar .order-summary, #frmConfigureProduct .secondary-cart-sidebar > div, #frmConfigureProduct #scrollingPanelContainer > div{ background:var(--tc-surface,#fff);border:1px solid var(--tc-border,#e6eaf0); border-radius:var(--tc-r-xl,18px);box-shadow:var(--tc-shadow,0 10px 30px rgba(15,32,55,.06)); padding:20px 22px; } #frmConfigureProduct .secondary-cart-sidebar h2, #frmConfigureProduct .secondary-cart-sidebar h3, #frmConfigureProduct .secondary-cart-sidebar .summary-title{ font-family:Montserrat,sans-serif!important;font-weight:700!important;font-size:16px!important;color:var(--tc-text,#1f2329)!important;margin:0 0 14px!important; } #frmConfigureProduct .secondary-cart-sidebar .total, #frmConfigureProduct .secondary-cart-sidebar .summary-total, #frmConfigureProduct .secondary-cart-sidebar .cart-total{font-weight:700;color:var(--tc-accent-2,#1B77C9);} body.tc-dark #frmConfigureProduct .secondary-cart-sidebar h2, body.tc-dark #frmConfigureProduct .secondary-cart-sidebar h3, body.tc-dark #frmConfigureProduct .secondary-cart-sidebar .summary-title{color:#e9f1f8!important;} body.tc-dark #frmConfigureProduct .secondary-cart-sidebar .total, body.tc-dark #frmConfigureProduct .secondary-cart-sidebar .summary-total{color:#44A8DA;} /* ---- Primary "Continue" button — brand gradient CTA ---- */ #frmConfigureProduct .btn-primary, #frmConfigureProduct button[type=submit].btn{ font-family:Montserrat,sans-serif!important;font-weight:700!important;font-size:15px!important;color:#fff!important; background:linear-gradient(135deg,#1B77C9 0%,#44A8DA 100%)!important;border:0!important;border-radius:12px!important; padding:13px 32px!important;box-shadow:0 10px 22px rgba(27,119,201,.30)!important;transition:transform .15s,box-shadow .15s!important; } #frmConfigureProduct .btn-primary:hover,#frmConfigureProduct button[type=submit].btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(27,119,201,.40)!important;} /* ---- Alerts ---- */ #frmConfigureProduct .alert{border-radius:12px;font-family:Montserrat,sans-serif;font-size:13px;border:1px solid transparent;} #frmConfigureProduct .alert-warning{background:rgba(255,176,32,.12);border-color:rgba(255,176,32,.30);color:#8a5a00;} body.tc-dark #frmConfigureProduct .alert-warning{background:rgba(255,176,32,.10);color:#e9c37a;} /* ---- Responsive: stack the summary under the form on small screens ---- */ @media(max-width:880px){ #frmConfigureProduct .secondary-cart-body,#frmConfigureProduct .secondary-cart-sidebar{flex:0 0 100%!important;max-width:100%!important;} #frmConfigureProduct .secondary-cart-sidebar{padding-left:0;margin-top:6px;} } /* ---- Product add-ons as an ACCORDION (configure page): each collapses to its logo + name + a chevron; clicking the bar expands its options. Keeps the native add-on images + radios; JS (tcAddonAccordion) toggles the .tc-open class. ---- */ #order-standard_cart .addon-promo-container{position:relative;padding:15px 46px 15px 16px;margin:0 0 10px;border:1px solid var(--tc-border,#e6eaf0);border-radius:14px;box-shadow:0 2px 8px rgba(15,32,55,.04);background:var(--tc-surface,#fff);cursor:pointer;transition:box-shadow .15s,border-color .15s;} #order-standard_cart .addon-promo-container:hover{border-color:#cfdeeb;} #order-standard_cart .addon-promo-container.tc-open{cursor:default;box-shadow:0 8px 22px rgba(15,32,55,.09);} #order-standard_cart .addon-promo-container .description{display:flex;align-items:center;gap:13px;margin:0;} #order-standard_cart .addon-promo-container .description .logo{flex:0 0 auto;margin:0;display:flex;align-items:center;} #order-standard_cart .addon-promo-container .description .logo img{max-width:54px;max-height:38px;width:auto;height:auto;} #order-standard_cart .addon-promo-container .description h3{font-family:Montserrat,sans-serif;font-size:14.5px;font-weight:700;margin:0;line-height:1.25;color:var(--tc-text,#1f2329);} #order-standard_cart .addon-promo-container .description p{font-size:12.5px;line-height:1.5;margin:11px 0 0;color:var(--tc-text-2,#5b6573);width:100%;} #order-standard_cart .addon-promo-container .description p br{display:none;} /* the toggle chevron */ #order-standard_cart .addon-promo-container .tc-addon-chevron{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:#9aa6b4;font-size:13px;transition:transform .25s,color .15s;pointer-events:none;} #order-standard_cart .addon-promo-container.tc-open .tc-addon-chevron{transform:translateY(-50%) rotate(180deg);color:#1B77C9;} /* collapsed: hide the description text + the option radios + spacers */ #order-standard_cart .addon-promo-container:not(.tc-open) .description p, #order-standard_cart .addon-promo-container:not(.tc-open) label.radio-inline, #order-standard_cart .addon-promo-container:not(.tc-open) > br, #order-standard_cart .addon-promo-container:not(.tc-open) .clearfix{display:none!important;} /* expanded: options as a tidy vertical list, price pushed right */ #order-standard_cart .addon-promo-container > br{display:none;} #order-standard_cart .addon-promo-container label.radio-inline{display:flex;align-items:center;gap:9px;margin:9px 0 0;font-size:12.5px;font-weight:600;color:var(--tc-text,#2b3440);cursor:pointer;} #order-standard_cart .addon-promo-container label.radio-inline .pull-right,#order-standard_cart .addon-promo-container label.radio-inline .float-right{float:none;margin-left:auto;font-weight:700;color:#1B77C9;} body.tc-dark #order-standard_cart:not(#__tc) .addon-promo-container{background:#141b22!important;border-color:#222c37!important;} body.tc-dark #order-standard_cart:not(#__tc) .addon-promo-container .description h3{color:#e9f1f8!important;} /* ---- Domains Configuration page (confdomains): each domain a collapsible card, nameservers section open, branded inputs. ---- */ #frmConfigureDomains{max-width:1020px;margin:0 auto;} #frmConfigureDomains > p{font-family:Montserrat,sans-serif;font-size:14px;color:var(--tc-text-2,#5b6573);margin:2px 0 18px;} #order-standard_cart .tc-cd-card{border:1px solid var(--tc-border,#e6eaf0);border-radius:14px;background:var(--tc-surface,#fff);box-shadow:0 2px 8px rgba(15,32,55,.04);margin:0 0 12px;} #order-standard_cart .tc-cd-card .sub-heading{margin:0!important;border:0!important;background:transparent!important;text-align:left!important;} #order-standard_cart .tc-cd-card .sub-heading::before,#order-standard_cart .tc-cd-card .sub-heading::after{display:none!important;} #order-standard_cart .tc-cd-card .sub-heading span{background:transparent!important;font-family:Montserrat,sans-serif!important;font-weight:700!important;font-size:15px!important;color:var(--tc-text,#1f2329)!important;padding:0!important;} #order-standard_cart .tc-cd-card .sub-heading.tc-cd-head{position:relative;padding:15px 46px 15px 18px!important;cursor:pointer;} #order-standard_cart .tc-cd-card.tc-cd-ns .sub-heading{padding:15px 18px 4px!important;cursor:default;} #order-standard_cart .tc-cd-card .tc-cd-body{padding:4px 18px 16px;} #order-standard_cart .tc-cd-card:not(.tc-open) .tc-cd-body{display:none;} #order-standard_cart .tc-cd-card .tc-addon-chevron{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:#9aa6b4;font-size:13px;transition:transform .25s,color .15s;pointer-events:none;} #order-standard_cart .tc-cd-card.tc-open .tc-cd-head .tc-addon-chevron{transform:translateY(-50%) rotate(180deg);color:#1B77C9;} #order-standard_cart .tc-cd-body label{font-family:Montserrat,sans-serif;font-weight:700;font-size:12.5px;color:var(--tc-text-2,#5b6573);} #order-standard_cart .tc-cd-body .form-control{font-family:Montserrat,sans-serif;font-size:14px;border:1px solid var(--tc-border,#dfe5ee);border-radius:10px;padding:11px 14px;height:auto;box-shadow:none;} #order-standard_cart .tc-cd-body .form-control:focus{border-color:#44A8DA;box-shadow:0 0 0 3px rgba(68,168,218,.22);outline:none;} #order-standard_cart .tc-cd-body .panel-addon{border:1px solid var(--tc-border,#e6eaf0);border-radius:12px;box-shadow:none;} #order-standard_cart #frmConfigureDomains button[type=submit]{font-family:Montserrat,sans-serif!important;font-weight:700!important;color:#fff!important;background:linear-gradient(135deg,#1B77C9,#44A8DA)!important;border:0!important;border-radius:12px!important;padding:13px 34px!important;box-shadow:0 10px 22px rgba(27,119,201,.30)!important;} body.tc-dark #order-standard_cart:not(#__tc) .tc-cd-card{background:#141b22!important;border-color:#222c37!important;} body.tc-dark #order-standard_cart:not(#__tc) .tc-cd-card .sub-heading span{color:#e9f1f8!important;} body.tc-dark #order-standard_cart:not(#__tc) .tc-cd-body .form-control{background:#0f161d!important;border-color:#2a3744!important;color:#e9f1f8!important;} /* Chosen domain + its config injected at the TOP of the configure page. */ #order-standard_cart #tc-domain-config{margin:0 0 18px;padding:18px 20px 16px;background:var(--tc-surface,#fff);border:1px solid var(--tc-border,#e6eaf0);border-radius:var(--tc-r-xl,18px);box-shadow:var(--tc-shadow,0 10px 30px rgba(15,32,55,.06));} #order-standard_cart #tc-domain-config > .tc-config-head{font-family:Montserrat,sans-serif;font-weight:700;font-size:16px;color:var(--tc-text,#1f2329);margin:0 0 12px;display:flex;align-items:center;gap:9px;} #order-standard_cart #tc-domain-config > .tc-config-head i{color:#1B77C9;} #order-standard_cart #tc-domain-config .tc-config-loading{font-family:Montserrat,sans-serif;color:var(--tc-text-2,#5b6573);padding:8px 0;font-weight:600;} #order-standard_cart #tc-confdomains-form .tc-cd-card{margin:0 0 10px;} /* ===== Inline one-page checkout section (below the add-ons) ===== */ #order-standard_cart #tc-inline-checkout{max-width:1320px;margin:30px auto 0;padding:0;} #order-standard_cart #tc-inline-checkout .tc-inco-head{display:flex;align-items:center;justify-content:center;gap:10px;font-family:Montserrat,sans-serif;font-weight:700;font-size:22px;letter-spacing:-.2px;color:var(--tc-text,#1f2329);margin:0 0 4px;} #order-standard_cart #tc-inline-checkout .tc-inco-head i{color:#ABC441;} #order-standard_cart #tc-inline-checkout .tc-inco-head::after{content:"";display:block;} #order-standard_cart #tc-inline-checkout .tc-inco-body{margin-top:10px;} #order-standard_cart #tc-inline-checkout .tc-inco-loading{font-family:Montserrat,sans-serif;font-weight:600;color:var(--tc-text-2,#5b6573);text-align:center;padding:40px 0;} /* Existing-Login / Create-Account choice (radio-with-reveal) at the top of the checkout */ #order-standard_cart #tc-signin{background:var(--tc-surface,#fff);border:1px solid var(--tc-border,#e6eaf0);border-radius:var(--tc-r-xl,18px);box-shadow:0 3px 12px rgba(15,32,55,.04);margin:0 0 26px;overflow:hidden;} #order-standard_cart #tc-signin .tc-signin-opt{padding:20px 24px;} #order-standard_cart #tc-signin .tc-signin-opt + .tc-signin-opt{border-top:1px solid var(--tc-border,#e6eaf0);} #order-standard_cart #tc-signin .tc-signin-label{display:flex;align-items:center;gap:12px;cursor:pointer;font-family:Montserrat,sans-serif;font-weight:700;font-size:16px;color:var(--tc-text,#1f2329);user-select:none;} #order-standard_cart #tc-signin .tc-signin-dot{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid #c2cedd;background:#fff;transition:border-color .15s,box-shadow .15s;position:relative;} #order-standard_cart #tc-signin .tc-signin-opt.tc-on .tc-signin-dot{border-color:#1B77C9;box-shadow:inset 0 0 0 4px #1B77C9;} /* smooth vertical open/close via grid-template-rows (0fr→1fr animates to auto height) */ #order-standard_cart #tc-signin .tc-signin-body{display:grid;grid-template-rows:0fr;opacity:0;margin:0;transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1),opacity .24s ease,margin .28s cubic-bezier(.4,0,.2,1);} #order-standard_cart #tc-signin .tc-signin-body > *{overflow:hidden;min-height:0;} #order-standard_cart #tc-signin .tc-signin-opt.tc-on .tc-signin-body{grid-template-rows:1fr;opacity:1;margin:18px 0 2px;} @media(prefers-reduced-motion:reduce){#order-standard_cart #tc-signin .tc-signin-body{transition:none;}} #order-standard_cart #tc-signin #containerExistingUserSignin{margin:0;} body.tc-dark #order-standard_cart #tc-signin{background:#141b22;border-color:#222c37;box-shadow:none;} body.tc-dark #order-standard_cart #tc-signin .tc-signin-opt + .tc-signin-opt{border-top-color:#222c37;} body.tc-dark #order-standard_cart #tc-signin .tc-signin-label{color:#e9f1f8;} body.tc-dark #order-standard_cart #tc-signin .tc-signin-dot{background:#0f161d;border-color:#2a3744;} /* Payment method cards (radio + name left, official logo right) */ #order-standard_cart #tc-inline-checkout #paymentGatewaysContainer .tc-pm-list{display:block!important;text-align:left!important;border:1px solid var(--tc-border,#e6eaf0);border-radius:var(--tc-r-xl,18px);overflow:hidden;background:var(--tc-surface,#fff);} #order-standard_cart #tc-inline-checkout .tc-pm-card{display:flex!important;align-items:center;gap:14px;width:100%;margin:0!important;padding:16px 22px!important;cursor:pointer;font-family:Montserrat,sans-serif;font-weight:700;font-size:15px;color:var(--tc-text,#1f2329);transition:background .15s;} #order-standard_cart #tc-inline-checkout .tc-pm-card + .tc-pm-card{border-top:1px solid var(--tc-border,#e6eaf0);} #order-standard_cart #tc-inline-checkout .tc-pm-card:hover{background:var(--tc-bg,#f6f8fb);} #order-standard_cart #tc-inline-checkout .tc-pm-card input[name=paymentmethod]{position:absolute;opacity:0;width:0;height:0;margin:0;} #order-standard_cart #tc-inline-checkout .tc-pm-dot{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid #c2cedd;background:#fff;transition:border-color .15s,box-shadow .15s;} #order-standard_cart #tc-inline-checkout .tc-pm-card.tc-on .tc-pm-dot{border-color:#1B77C9;box-shadow:inset 0 0 0 4px #1B77C9;} /* selected payment method → clean left accent bar + tint (inset, so the list's overflow:hidden never clips it into ugly top/bottom lines) */ #order-standard_cart #tc-inline-checkout .tc-pm-card.tc-on{background:rgba(27,119,201,.06);box-shadow:inset 4px 0 0 0 #1B77C9;} /* keyboard focus → recolour the LEFT bar only. A full inset ring (the old :focus-within) clips to ugly blue top/bottom lines in the edge-to-edge list, and mouse-clicks triggered it. */ #order-standard_cart #tc-inline-checkout .tc-pm-card:has(input:focus-visible){box-shadow:inset 4px 0 0 0 #44A8DA;} #order-standard_cart #tc-inline-checkout .tc-pm-card.tc-on:has(input:focus-visible){box-shadow:inset 4px 0 0 0 #1B77C9;} #order-standard_cart #tc-inline-checkout .tc-pm-name{flex:1 1 auto;} #order-standard_cart #tc-inline-checkout .tc-pm-logowrap{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;} #order-standard_cart #tc-inline-checkout .tc-pm-logo{height:26px;width:auto;display:block;} #order-standard_cart #tc-inline-checkout .tc-pm-logo-paypal{height:22px;} #order-standard_cart #tc-inline-checkout .tc-pm-ico{font-size:22px;color:#1B77C9;line-height:1;} body.tc-dark #order-standard_cart #tc-inline-checkout #paymentGatewaysContainer .tc-pm-list{background:#141b22;border-color:#222c37;} body.tc-dark #order-standard_cart #tc-inline-checkout .tc-pm-card{color:#e9f1f8;} body.tc-dark #order-standard_cart #tc-inline-checkout .tc-pm-card + .tc-pm-card{border-top-color:#222c37;} body.tc-dark #order-standard_cart #tc-inline-checkout .tc-pm-card:hover{background:#0f161d;} body.tc-dark #order-standard_cart #tc-inline-checkout .tc-pm-dot{background:#0f161d;border-color:#2a3744;} /* "Join our mailing list" → toggle switch */ #order-standard_cart #tc-inline-checkout .marketing-email-optin .tc-mail-switch{display:inline-flex;align-items:center;gap:14px;margin:6px 0 0;padding:14px 20px;border:1px solid var(--tc-border,#e6eaf0);border-radius:14px;background:var(--tc-surface,#fff);cursor:pointer;font-family:Montserrat,sans-serif;} #order-standard_cart #tc-inline-checkout .tc-mail-switch .tc-mail-cb{position:absolute;opacity:0;width:0;height:0;} #order-standard_cart #tc-inline-checkout .tc-mail-switch .tc-mail-label{font-weight:700;font-size:15px;color:var(--tc-text,#1f2329);} #order-standard_cart #tc-inline-checkout .tc-mail-switch .tc-mail-track{position:relative;width:48px;height:26px;border-radius:999px;background:#cfd8e3;transition:background .2s;flex:0 0 auto;} #order-standard_cart #tc-inline-checkout .tc-mail-switch .tc-mail-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .2s;} #order-standard_cart #tc-inline-checkout .tc-mail-switch.tc-on .tc-mail-track{background:#ABC441;} #order-standard_cart #tc-inline-checkout .tc-mail-switch.tc-on .tc-mail-knob{left:25px;} #order-standard_cart #tc-inline-checkout .tc-mail-switch .tc-mail-state{font-weight:700;font-size:12px;letter-spacing:.06em;color:var(--tc-text-3,#7a8694);min-width:26px;} body.tc-dark #order-standard_cart #tc-inline-checkout .marketing-email-optin .tc-mail-switch{background:#141b22;border-color:#222c37;} body.tc-dark #order-standard_cart #tc-inline-checkout .tc-mail-switch .tc-mail-label{color:#e9f1f8;} body.tc-dark #order-standard_cart #tc-inline-checkout .tc-mail-switch .tc-mail-track{background:#2a3744;} /* Checkout fields: clean label-above-input layout, no prepend icons, professional inputs */ #order-standard_cart #tc-inline-checkout .form-group.prepend-icon{position:static!important;padding:0!important;margin-bottom:18px!important;} #order-standard_cart #tc-inline-checkout .form-group.prepend-icon label.field-icon{display:none!important;} #order-standard_cart #tc-inline-checkout .form-group.prepend-icon .field-icon i{display:none!important;} #order-standard_cart #tc-inline-checkout .tc-fld-label{position:static!important;display:block!important;float:none!important;width:auto!important;height:auto!important;background:none!important;border:0!important;box-shadow:none!important;text-align:left!important;line-height:1.4!important;font-family:Montserrat,sans-serif!important;font-weight:600!important;font-size:13.5px!important;letter-spacing:.01em;color:var(--tc-text-2,#5b6573)!important;margin:0 0 7px!important;padding:0!important;cursor:default;} #order-standard_cart #tc-inline-checkout .tc-fld-label .tc-fld-req{color:#e23b3b!important;font-weight:700;margin-left:2px;} #order-standard_cart #tc-inline-checkout .tc-fld-label .tc-fld-opt{color:var(--tc-text-3,#9aa6b3)!important;font-weight:500;font-size:12.5px;} #order-standard_cart #tc-inline-checkout .form-group.prepend-icon .field, #order-standard_cart #tc-inline-checkout .tc-fld-input{display:block!important;width:100%!important;height:auto!important;padding:11px 14px!important;border:1.5px solid var(--tc-border,#e6eaf0)!important;border-radius:12px!important;background:var(--tc-surface,#fff)!important;box-shadow:none!important;font-family:Montserrat,sans-serif!important;font-size:14.5px!important;line-height:1.4!important;color:var(--tc-text,#1f2329)!important;transition:border-color .15s,box-shadow .15s;} #order-standard_cart #tc-inline-checkout .form-group.prepend-icon select.field{appearance:auto;} #order-standard_cart #tc-inline-checkout .form-group.prepend-icon .field:focus, #order-standard_cart #tc-inline-checkout .tc-fld-input:focus{border-color:#44A8DA!important;box-shadow:0 0 0 3px rgba(68,168,218,.18)!important;outline:none!important;} body.tc-dark #order-standard_cart #tc-inline-checkout .tc-fld-label{color:#a9bccd!important;} body.tc-dark #order-standard_cart #tc-inline-checkout .form-group.prepend-icon .field, body.tc-dark #order-standard_cart #tc-inline-checkout .tc-fld-input{background:#141b22!important;border:1.5px solid #222c37!important;color:#e9f1f8!important;} body.tc-dark #order-standard_cart #tc-inline-checkout .form-group.prepend-icon .field:focus, body.tc-dark #order-standard_cart #tc-inline-checkout .tc-fld-input:focus{border-color:#44A8DA!important;box-shadow:0 0 0 3px rgba(68,168,218,.22)!important;} /* Generic smooth vertical reveal (domain-registrant fields, etc.) */ #order-standard_cart #tc-inline-checkout .tc-reveal{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1),opacity .24s ease;} #order-standard_cart #tc-inline-checkout .tc-reveal > *{overflow:hidden;min-height:0;} #order-standard_cart #tc-inline-checkout .tc-reveal.tc-open{grid-template-rows:1fr;opacity:1;} @media(prefers-reduced-motion:reduce){#order-standard_cart #tc-inline-checkout .tc-reveal{transition:none;}} /* Domain Registrant "Add New Contact" dropdown → full form width + gap before its fields */ #order-standard_cart #tc-inline-checkout .tc-dc-fullwidth{width:100%!important;max-width:100%!important;flex:0 0 100%!important;margin-left:0!important;} #order-standard_cart #tc-inline-checkout .row:has(#inputDomainContact){margin-bottom:20px!important;} /* Additional Notes (and any) textarea → same field border/treatment as the inputs */ #order-standard_cart #tc-inline-checkout textarea.field,#order-standard_cart #tc-inline-checkout textarea.form-control{width:100%!important;border:1.5px solid var(--tc-border,#e6eaf0)!important;border-radius:12px!important;padding:12px 14px!important;font-family:'Montserrat',sans-serif!important;font-size:14.5px!important;line-height:1.5!important;color:var(--tc-text,#1f2329)!important;background:var(--tc-surface,#fff)!important;box-shadow:none!important;} #order-standard_cart #tc-inline-checkout textarea.field:focus,#order-standard_cart #tc-inline-checkout textarea.form-control:focus{border-color:#44A8DA!important;box-shadow:0 0 0 3px rgba(68,168,218,.18)!important;outline:none!important;} body.tc-dark #order-standard_cart #tc-inline-checkout textarea.field,body.tc-dark #order-standard_cart #tc-inline-checkout textarea.form-control{background:#141b22!important;border-color:#222c37!important;color:#e9f1f8!important;} /* WHMCS secure-environment / IP-logged notice at the bottom of the checkout */ #order-standard_cart #tc-inline-checkout .tc-ipnote{margin:22px 0 4px;} #order-standard_cart #tc-inline-checkout .tc-ipnote .checkout-security-msg{position:relative;margin:0;border:1px solid #f3d9a8;background:#fdf3e2;color:#8a5a16;border-radius:14px;padding:14px 18px 14px 52px;font-family:Montserrat,sans-serif;font-size:13.5px;line-height:1.5;overflow:hidden;} #order-standard_cart #tc-inline-checkout .tc-ipnote .checkout-security-msg i.fa-lock,#order-standard_cart #tc-inline-checkout .tc-ipnote .checkout-security-msg .fa-lock{position:absolute!important;left:18px!important;top:50%!important;transform:translateY(-50%)!important;float:none!important;margin:0!important;font-size:20px!important;line-height:1!important;color:#c8881f!important;} #order-standard_cart #tc-inline-checkout .tc-ipnote .checkout-security-msg .clearfix{display:none!important;} body.tc-dark #order-standard_cart #tc-inline-checkout .tc-ipnote .checkout-security-msg{background:#2a2113;border-color:#4a3b1c;color:#e8c98a;} /* Apply-Promo widget moved into the Order Summary sidebar, above Complete Order */ #order-standard_cart .summary-container .view-cart-tabs.tc-promo-moved{margin:6px 0 16px;padding-top:16px;border-top:1px solid var(--tc-border,#e6eaf0);} #order-standard_cart .summary-container .view-cart-tabs.tc-promo-moved .nav-tabs{margin-bottom:12px;} #order-standard_cart .summary-container .view-cart-tabs.tc-promo-moved .tab-content{padding:0;} body.tc-dark #order-standard_cart .summary-container .view-cart-tabs.tc-promo-moved{border-top-color:#222c37;} /* "Continue Shopping" + "Empty Cart" → professional outlined buttons with right-side icons */ #order-standard_cart .empty-cart.tc-cart-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;} #order-standard_cart .empty-cart.tc-cart-actions #continueShopping, #order-standard_cart .empty-cart.tc-cart-actions #btnEmptyCart{display:inline-flex!important;align-items:center;gap:9px;margin:0!important;padding:10px 18px!important;min-height:42px;border:1.5px solid var(--tc-border,#e6eaf0)!important;border-radius:11px!important;background:var(--tc-surface,#fff)!important;box-shadow:none!important;font-family:'Montserrat',sans-serif!important;font-weight:700!important;font-size:13px!important;line-height:1.2!important;color:var(--tc-text-2,#5b6573)!important;text-decoration:none!important;cursor:pointer;transition:border-color .15s,color .15s,background .15s;} #order-standard_cart .empty-cart.tc-cart-actions #continueShopping .tc-btn-ico, #order-standard_cart .empty-cart.tc-cart-actions #btnEmptyCart i{order:2;font-size:13px;margin:0!important;} #order-standard_cart .empty-cart.tc-cart-actions #continueShopping:hover{border-color:#1B77C9!important;color:#1B77C9!important;background:rgba(27,119,201,.06)!important;} #order-standard_cart .empty-cart.tc-cart-actions #btnEmptyCart:hover{border-color:#e23b3b!important;color:#e23b3b!important;background:rgba(226,59,59,.06)!important;} #order-standard_cart .empty-cart.tc-cart-actions #continueShopping:focus-visible, #order-standard_cart .empty-cart.tc-cart-actions #btnEmptyCart:focus-visible{outline:2px solid #44A8DA!important;outline-offset:2px!important;} body.tc-dark #order-standard_cart .empty-cart.tc-cart-actions #continueShopping, body.tc-dark #order-standard_cart .empty-cart.tc-cart-actions #btnEmptyCart{background:#141b22!important;border-color:#222c37!important;color:#a9bccd!important;} body.tc-dark #order-standard_cart .empty-cart.tc-cart-actions #continueShopping:hover{border-color:#44A8DA!important;color:#44A8DA!important;background:rgba(68,168,218,.08)!important;} body.tc-dark #order-standard_cart .empty-cart.tc-cart-actions #btnEmptyCart:hover{border-color:#ff6b6b!important;color:#ff6b6b!important;background:rgba(255,107,107,.1)!important;} /* Terms-of-Service row moved under the Complete Order button in the sidebar */ #order-standard_cart .summary-container .tc-tos-side{margin:12px 0 2px;padding:0 4px;text-align:center;font-family:Montserrat,sans-serif;} #order-standard_cart .summary-container .tc-tos-side label{font-size:13px;color:var(--tc-text-2,#5b6573);margin:0;font-weight:600;cursor:pointer;} #order-standard_cart .summary-container .tc-tos-side input[type=checkbox]{margin-right:7px;vertical-align:middle;} #order-standard_cart .summary-container .tc-tos-side a{color:#1B77C9;font-weight:700;text-decoration:underline;} #order-standard_cart .summary-container .tc-tos-side.tc-tos-warn{border:1.5px solid #e23b3b;border-radius:12px;padding:10px 8px;background:rgba(226,59,59,.06);animation:tcDomIn .25s ease both;} /* warning shown just below the Complete Order button when ToS not accepted */ #order-standard_cart .summary-container .tc-tos-warning{margin:12px 0 2px;padding:11px 13px;border-radius:12px;background:rgba(226,59,59,.09);border:1px solid rgba(226,59,59,.4);color:#c0392b;font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:700;line-height:1.45;text-align:center;animation:tcDomIn .25s ease both;} #order-standard_cart .summary-container .tc-tos-warning i{margin-right:6px;} body.tc-dark #order-standard_cart .summary-container .tc-tos-warning{background:rgba(226,59,59,.16);border-color:rgba(255,120,105,.45);color:#ff9b8f;} body.tc-dark #order-standard_cart .summary-container .tc-tos-side label{color:#a9bccd;} body.tc-dark #order-standard_cart .summary-container .tc-tos-side a{color:#44A8DA;} /* ===================== Cart page (a=view) brand polish ===================== */ /* 1. Montserrat across the whole order form (was Open Sans); icon fonts preserved */ #order-standard_cart, #order-standard_cart *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.glyphicon):not([class*="fa-"]){font-family:'Montserrat','Segoe UI',sans-serif !important;} /* 2. Section sub-headings → clean uppercase brand labels with a masked divider line */ #order-standard_cart .sub-heading{position:relative;text-align:center;margin:30px 0 20px;overflow:visible;} #order-standard_cart .sub-heading::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--tc-border,#e6eaf0);z-index:0;} #order-standard_cart .sub-heading span.primary-bg-color{position:relative;z-index:1;display:inline-block;background:#fff!important;padding:0 16px;font-weight:700;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:#1B77C9!important;} body.tc-dark #order-standard_cart .sub-heading::before{background:#222c37;} body.tc-dark #order-standard_cart .sub-heading span.primary-bg-color{background:#141b22!important;color:#44A8DA!important;} body.tc-dark #order-standard_cart #frmConfigureProduct .sub-heading span.primary-bg-color,body.tc-dark #order-standard_cart #frmConfigureDomains .sub-heading span.primary-bg-color{background:#141b22!important;color:#44A8DA!important;} /* match a=view sub-heading SIZE (a 2-id nexus rule forces 15px) + lift summary breakdown sub-lines */ #order-standard_cart #frmConfigureProduct .sub-heading span.primary-bg-color,#order-standard_cart #frmConfigureDomains .sub-heading span.primary-bg-color{font-size:12.5px!important;letter-spacing:.09em!important;padding:0 16px!important;} /* kill the nexus blue gradient accent bar (span::before) so confproduct headings match a=view */ #order-standard_cart #frmConfigureProduct .sub-heading span::before,#order-standard_cart #frmConfigureProduct .sub-heading span::after,#order-standard_cart #frmConfigureDomains .sub-heading span::before,#order-standard_cart #frmConfigureDomains .sub-heading span::after{display:none!important;content:none!important;} #order-standard_cart #producttotal span:not(.product-name):not(.amt){font-size:12.5px!important;} /* confproduct summary: drop the product-breakdown section dividers (the .summary-totals top/bottom lines) so only ONE clean divider sits above the total, like a=view. */ #order-standard_cart #producttotal .summary-totals{border-top:0!important;border-bottom:0!important;margin-top:10px!important;padding-top:0!important;} /* confproduct form: force configurable options to a single column (one long form, like a=view) */ #order-standard_cart #frmConfigureProduct .product-configurable-options [class*="col-sm-"]{width:100%!important;max-width:100%!important;flex:0 0 100%!important;} /* confproduct: ONE continuous white card behind the whole form (like a=view's .secondary-cart-body), instead of separate section cards with grey gaps. */ #order-standard_cart #frmConfigureProduct .secondary-cart-body{background:var(--tc-surface,#fff)!important;border:1px solid var(--tc-border,#e6eaf0)!important;border-radius:var(--tc-r-xl,18px)!important;box-shadow:0 1px 2px rgba(19,32,45,.05)!important;padding:22px 26px!important;flex:1 1 0!important;min-width:0!important;margin-right:26px!important;} /* confproduct: the Order Summary sits in an EXTRA #orderSummary wrapper card (double grey border). On a=view #orderSummary IS the card; here, strip the wrapper so .order-summary is the single card (also restores its full width to match a=view's 330px). */ #order-standard_cart #frmConfigureProduct #orderSummary{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;} /* match a=view's content width (1170) so the form + summary columns are the same on both pages (scoped to confproduct via :has so a=view + store/domain pages are untouched) */ #order-standard_cart:has(#frmConfigureProduct){max-width:1170px!important;margin-left:auto!important;margin-right:auto!important;} #order-standard_cart #frmConfigureProduct .secondary-cart-body > .product-info, #order-standard_cart #frmConfigureProduct .secondary-cart-body > .tc-domain-config, #order-standard_cart #frmConfigureProduct .secondary-cart-body > .field-container{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;margin:0!important;} /* subtle divider + spacing between the sections inside the one card */ #order-standard_cart #frmConfigureProduct .secondary-cart-body > .tc-domain-config, #order-standard_cart #frmConfigureProduct .secondary-cart-body > .field-container, #order-standard_cart #frmConfigureProduct .secondary-cart-body > #productAddonsContainer{margin:26px 0 0!important;padding-top:24px!important;border-top:1px solid var(--tc-border,#e6eaf0)!important;} /* addon upsell cards: subtle grey so they read against the white card */ #order-standard_cart #frmConfigureProduct .addon-promo-container{background:var(--tc-bg,#f4f6f9)!important;} body.tc-dark #order-standard_cart #frmConfigureProduct .secondary-cart-body{background:#141b22!important;border-color:#222c37!important;} body.tc-dark #order-standard_cart #frmConfigureProduct .secondary-cart-body > .tc-domain-config, body.tc-dark #order-standard_cart #frmConfigureProduct .secondary-cart-body > .field-container, body.tc-dark #order-standard_cart #frmConfigureProduct .secondary-cart-body > #productAddonsContainer{border-top-color:#222c37!important;} body.tc-dark #order-standard_cart #frmConfigureProduct .addon-promo-container{background:#0f161d!important;} /* confproduct CTA moved inside the summary card → full-width, like a=view's Complete Order */ #order-standard_cart .order-summary .tc-confproduct-cta{margin:18px 0 0!important;padding:0!important;} #order-standard_cart .order-summary .tc-confproduct-cta .btn-primary{display:block;width:100%;padding:14px 26px!important;font-size:14.5px!important;white-space:nowrap!important;} /* Configure-product page (a=confproduct) → match the a=view field treatment */ #order-standard_cart #frmConfigureProduct .form-control,#order-standard_cart #frmConfigureProduct select,#order-standard_cart #frmConfigureProduct input[type=text],#order-standard_cart #frmConfigureProduct input[type=email],#order-standard_cart #frmConfigureProduct input[type=number],#order-standard_cart #frmConfigureProduct textarea{border:1.5px solid var(--tc-border,#e6eaf0)!important;border-radius:12px!important;background:var(--tc-surface,#fff)!important;color:var(--tc-text,#1f2329)!important;box-shadow:none!important;font-family:'Montserrat',sans-serif!important;} #order-standard_cart #frmConfigureProduct .form-control:focus,#order-standard_cart #frmConfigureProduct select:focus,#order-standard_cart #frmConfigureProduct input:focus,#order-standard_cart #frmConfigureProduct textarea:focus{border-color:#44A8DA!important;box-shadow:0 0 0 3px rgba(68,168,218,.18)!important;outline:none!important;} body.tc-dark #order-standard_cart #frmConfigureProduct .form-control,body.tc-dark #order-standard_cart #frmConfigureProduct select,body.tc-dark #order-standard_cart #frmConfigureProduct input[type=text],body.tc-dark #order-standard_cart #frmConfigureProduct input[type=email],body.tc-dark #order-standard_cart #frmConfigureProduct input[type=number],body.tc-dark #order-standard_cart #frmConfigureProduct textarea{background:#141b22!important;border-color:#222c37!important;color:#e9f1f8!important;} /* 3. Promo widget: input → field system, Validate → branded outline button, tab spacing */ #order-standard_cart .view-cart-tabs .nav-tabs{gap:18px;border-bottom:1px solid var(--tc-border,#e6eaf0);margin-bottom:14px;} #order-standard_cart .view-cart-tabs .nav-tabs .nav-link{padding:6px 2px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:0;border-bottom:2px solid transparent;color:var(--tc-text-3,#9aa6b3);background:none;} #order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active{color:#1B77C9;border-bottom-color:#1B77C9;background:none;} #order-standard_cart #inputPromotionCode{border:1.5px solid var(--tc-border,#e6eaf0)!important;border-radius:12px!important;padding:11px 14px!important;height:auto!important;font-size:14px!important;color:var(--tc-text,#1f2329)!important;background:var(--tc-surface,#fff)!important;box-shadow:none!important;} #order-standard_cart #inputPromotionCode:focus{border-color:#44A8DA!important;box-shadow:0 0 0 3px rgba(68,168,218,.18)!important;outline:none!important;} #order-standard_cart .view-cart-tabs .btn{display:block;width:100%;margin-top:10px;border-radius:12px!important;border:1.5px solid #1B77C9!important;background:transparent!important;color:#1B77C9!important;font-weight:700!important;font-size:14px!important;padding:10px 16px!important;box-shadow:none!important;transition:background .15s,color .15s;} #order-standard_cart .view-cart-tabs .btn:hover{background:#ABC441!important;border-color:#ABC441!important;color:#16210a!important;} body.tc-dark #order-standard_cart .view-cart-tabs .nav-tabs{border-bottom-color:#222c37;} body.tc-dark #order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active{color:#44A8DA;border-bottom-color:#44A8DA;} body.tc-dark #order-standard_cart #inputPromotionCode{background:#141b22!important;border-color:#222c37!important;color:#e9f1f8!important;} body.tc-dark #order-standard_cart .view-cart-tabs .btn{border-color:#44A8DA!important;color:#44A8DA!important;} body.tc-dark #order-standard_cart .view-cart-tabs .btn:hover{background:#ABC441!important;border-color:#ABC441!important;color:#16210a!important;} /* promo validation message relocated into the sidebar widget (below Apply Promo Code) */ #order-standard_cart .summary-container .view-cart-tabs .tc-promo-msg{display:block!important;margin:0 0 12px!important;padding:10px 12px!important;border-radius:10px!important;border-width:1px!important;font-family:'Montserrat',sans-serif!important;font-size:12.5px!important;font-weight:600!important;line-height:1.4!important;text-align:center!important;} /* 4. Inner summary block radius → match the card language */ #order-standard_cart .summary-container{border-radius:14px;} /* 4a. Identical Order Summary dividers on a=view AND a=confproduct (#producttotal also carries .summary-container): same inner padding → same divider inset, same divider colour. */ #order-standard_cart .order-summary .summary-container{padding:16px!important;} #order-standard_cart .order-summary .summary-container > *{border-color:var(--tc-border,#e6eaf0)!important;} body.tc-dark #order-standard_cart .order-summary .summary-container > *{border-color:#222c37!important;} /* 4b. Readable type scale — lift the cart's undersized text (was 9-11px in places) */ #order-standard_cart .small,#order-standard_cart small,#order-standard_cart .text-muted{font-size:13px!important;line-height:1.55!important;} #order-standard_cart .view-cart-items-header [class*="col-"]{font-size:12px!important;letter-spacing:.02em;} #order-standard_cart .secondary-cart-body .renewal-price,#order-standard_cart .secondary-cart-body .cycle{font-size:12.5px!important;} #order-standard_cart .summary-container .subtotal,#order-standard_cart .summary-container .bordered-totals{font-size:13.5px!important;} #order-standard_cart .summary-container .recurring-totals{font-size:13px!important;} #order-standard_cart .summary-container .recurring-totals .cost{font-size:13px!important;} #order-standard_cart .summary-container .recurring-totals .cycle{font-size:12px!important;} #order-standard_cart .summary-container .total-due-today span:not(.amt){font-size:12.5px!important;letter-spacing:.04em;text-transform:uppercase!important;} /* total-due block: amount ON TOP of the label, right-aligned, on BOTH pages (confproduct's markup lists the label first, so use flex order to force amount-first regardless of DOM). */ #order-standard_cart .order-summary .total-due-today{display:flex!important;flex-direction:column;align-items:flex-end;margin-top:20px!important;} #order-standard_cart .total-due-today .amt{font-size:30px!important;letter-spacing:0;line-height:1.15;float:none!important;order:0!important;} #order-standard_cart .order-summary .total-due-today span:not(.amt){float:none!important;order:1!important;} #order-standard_cart .label.label-info{font-size:11px!important;padding:.32em .6em!important;} #order-standard_cart .view-cart-tabs .nav-tabs .nav-link{font-size:11.5px!important;} /* 5. qty "Update" control → legible small brand link (was a 9px grey button) */ #order-standard_cart .item-qty .btn, #order-standard_cart .item-qty button.btn-xs{margin-top:7px!important;padding:5px 10px!important;font-size:12px!important;font-weight:700!important;line-height:1.2!important;color:#1B77C9!important;background:none!important;border:0!important;border-radius:8px!important;min-height:26px;} #order-standard_cart .item-qty .btn:hover{background:rgba(27,119,201,.08)!important;text-decoration:none!important;} body.tc-dark #order-standard_cart .item-qty .btn,body.tc-dark #order-standard_cart .item-qty button.btn-xs{color:#44A8DA!important;} /* Neutralise the browser autofill background (otherwise a washed yellow/white fill in dark) */ #order-standard_cart input:-webkit-autofill,#order-standard_cart input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #fff inset!important;-webkit-text-fill-color:#1f2329!important;caret-color:#1f2329;} body.tc-dark #order-standard_cart input:-webkit-autofill,body.tc-dark #order-standard_cart input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #141b22 inset!important;-webkit-text-fill-color:#e9f1f8!important;caret-color:#e9f1f8;} /* 6. Accessible, visible keyboard focus across the whole order form (WCAG 2.4.11/2.4.13) */ #order-standard_cart a:focus-visible,#order-standard_cart button:focus-visible,#order-standard_cart input:focus-visible,#order-standard_cart select:focus-visible,#order-standard_cart textarea:focus-visible,#order-standard_cart .tc-signin-opt:focus-visible,#order-standard_cart [tabindex]:focus-visible{outline:2px solid #44A8DA!important;outline-offset:2px!important;border-radius:8px;} /* Cart qty auto-update: dim the qty cell while the page refreshes */ #order-standard_cart .item-qty.tc-qty-updating{opacity:.5;pointer-events:none;transition:opacity .15s;} #order-standard_cart #tc-inline-checkout .tc-inco-fallback{display:inline-block;font-weight:700;color:#fff;background:linear-gradient(135deg,#1B77C9,#44A8DA);border-radius:12px;padding:13px 28px;text-decoration:none;} /* the injected real checkout form already inherits the theme's checkout styling */ body.tc-dark #order-standard_cart:not(#__tc) #tc-inline-checkout .tc-inco-head{color:#e9f1f8;} /* ===== Choose-your-domain search on the configure page ===== */ #order-standard_cart #tc-domreg{margin:0 0 18px;padding:20px 22px;background:var(--tc-surface,#fff);border:1px solid var(--tc-border,#e6eaf0);border-radius:var(--tc-r-xl,18px);box-shadow:var(--tc-shadow,0 10px 30px rgba(15,32,55,.06));} #order-standard_cart #tc-domreg .tc-domreg-head{font-family:Montserrat,sans-serif;font-weight:700;font-size:18px;color:var(--tc-text,#1f2329);display:flex;align-items:center;gap:10px;letter-spacing:-.2px;} #order-standard_cart #tc-domreg .tc-domreg-head i{color:#1B77C9;} #order-standard_cart #tc-domreg .tc-domreg-sub{font-family:Montserrat,sans-serif;font-weight:600;font-size:13px;color:var(--tc-text-2,#5b6573);margin:6px 0 14px;} #order-standard_cart #tc-domreg .tc-domreg-search{display:flex;gap:10px;} #order-standard_cart #tc-domreg .tc-domreg-input{flex:1 1 auto;min-width:0;font-family:Montserrat,sans-serif;font-size:14px;color:var(--tc-text,#1f2329);background:var(--tc-surface,#fff);border:1px solid var(--tc-border,#e6eaf0);border-radius:11px;padding:12px 15px;} #order-standard_cart #tc-domreg .tc-domreg-input:focus{outline:none;border-color:#44A8DA;box-shadow:0 0 0 3px rgba(68,168,218,.18);} #order-standard_cart #tc-domreg .tc-domreg-check{flex:0 0 auto;font-family:Montserrat,sans-serif;font-weight:700;font-size:14px;color:#fff;background:linear-gradient(135deg,#ABC441,#8fa82f);border:0;border-radius:11px;padding:12px 22px;cursor:pointer;white-space:nowrap;transition:filter .15s;} #order-standard_cart #tc-domreg .tc-domreg-check:hover{filter:brightness(1.05);} #order-standard_cart #tc-domreg .tc-domreg-msg{font-family:Montserrat,sans-serif;font-weight:600;font-size:13px;color:var(--tc-text-2,#5b6573);margin:12px 0 0;} #order-standard_cart #tc-domreg .tc-domreg-msg.is-err{color:#c0392b;} #order-standard_cart #tc-domreg .tc-domreg-results{margin:12px 0 0;display:flex;flex-direction:column;gap:8px;} #order-standard_cart #tc-domreg .tc-domreg-result{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;border:1px solid var(--tc-border,#e6eaf0);border-radius:12px;background:var(--tc-bg,#f4f6f9);} #order-standard_cart #tc-domreg .tc-domreg-result.is-avail{border-color:rgba(171,196,65,.5);background:rgba(171,196,65,.07);} #order-standard_cart #tc-domreg .tc-domreg-result.is-taken{opacity:.6;} #order-standard_cart #tc-domreg .tc-domreg-rdom{font-family:Montserrat,sans-serif;font-weight:700;font-size:15px;color:var(--tc-text,#1f2329);word-break:break-all;} #order-standard_cart #tc-domreg .tc-domreg-ravail{font-weight:700;font-size:12px;color:#5a7d12;margin-left:10px;white-space:nowrap;} #order-standard_cart #tc-domreg .tc-domreg-rtaken{font-weight:700;font-size:12px;color:var(--tc-text-2,#5b6573);} #order-standard_cart #tc-domreg .tc-domreg-rright{display:flex;align-items:center;gap:12px;white-space:nowrap;} #order-standard_cart #tc-domreg .tc-domreg-rprice{font-family:Montserrat,sans-serif;font-weight:700;font-size:14px;color:var(--tc-text,#1f2329);} #order-standard_cart #tc-domreg .tc-domreg-rprice small{font-weight:600;color:var(--tc-text-2,#5b6573);} #order-standard_cart #tc-domreg .tc-domreg-add{font-family:Montserrat,sans-serif;font-weight:700;font-size:13px;color:#fff;background:linear-gradient(135deg,#1B77C9,#44A8DA);border:0;border-radius:10px;padding:9px 18px;cursor:pointer;white-space:nowrap;} #order-standard_cart #tc-domreg .tc-domreg-add:hover{filter:brightness(1.05);} #order-standard_cart #tc-domreg .tc-domreg-empty{font-family:Montserrat,sans-serif;font-weight:600;font-size:13px;color:var(--tc-text-2,#5b6573);padding:8px 0;} /* mandatory gate: Continue disabled until a domain is chosen */ #order-standard_cart .tc-btn-disabled,#order-standard_cart button.tc-btn-disabled[disabled]{opacity:.5!important;cursor:not-allowed!important;filter:grayscale(.3);} body.tc-dark #order-standard_cart:not(#__tc) #tc-domreg{background:#141b22!important;border-color:#222c37!important;} body.tc-dark #order-standard_cart:not(#__tc) #tc-domreg .tc-domreg-head,body.tc-dark #order-standard_cart:not(#__tc) #tc-domreg .tc-domreg-rdom{color:#e9f1f8!important;} body.tc-dark #order-standard_cart:not(#__tc) #tc-domreg .tc-domreg-input,body.tc-dark #order-standard_cart:not(#__tc) #tc-domreg .tc-domreg-result{background:#0f161d!important;border-color:#222c37!important;color:#e9f1f8!important;} /* a=view: hide the "My Account" left nav; the cart content (flex:1) reclaims the space. Also hide its now-dead collapse toggle (the ☰ next to the heading). */ #order-standard_cart.tc-noaccountnav .cart-sidebar.tc-has-nav{display:none!important;} #order-standard_cart.tc-noaccountnav [onclick*="tcToggleCollapse"]{display:none!important;} /* One-page grid: configure (main) + checkout stacked in the left column, the Order Summary in the right column spanning both rows → it stays sticky all the way down past the checkout. */ @media (min-width:992px){ #order-standard_cart .cart-body.tc-1page{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"main side" "checkout side";column-gap:24px;align-items:start;} #order-standard_cart .cart-body.tc-1page > form#frmConfigureProduct{grid-area:main;min-width:0;} #order-standard_cart .cart-body.tc-1page > #tc-inline-checkout{grid-area:checkout;min-width:0;max-width:none;margin:30px 0 0;} #order-standard_cart .cart-body.tc-1page > #scrollingPanelContainer{grid-area:side;} #order-standard_cart .cart-body.tc-1page form#frmConfigureProduct .secondary-cart-body{flex:1 1 100%!important;max-width:100%!important;} } /* Sticky Order Summary sidebar on the configure page — rises to the top of the page (the "Your domain" panel now sits in the left column) and follows the scroll. Needs !important to beat the addon's trinico-theme-vars rule that forces the sidebar position:static (it neutralised WHMCS's native scrolling panel). This footer CSS loads after that head rule, so equal-specificity + !important wins. */ @media (min-width:992px){ #order-standard_cart #scrollingPanelContainer{position:sticky!important;top:20px!important;align-self:flex-start!important;} } /* chosen-domain row */ #order-standard_cart #tc-domain-config .tc-dc-domain{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:11px 14px;border:1px solid var(--tc-border,#e6eaf0);border-radius:12px;background:var(--tc-bg,#f4f6f9);margin:0 0 16px;} #order-standard_cart #tc-domain-config .tc-dc-name{font-family:Montserrat,sans-serif;font-weight:700;font-size:17px;color:#1B77C9;word-break:break-all;} #order-standard_cart #tc-domain-config .tc-dc-tag{font-family:Montserrat,sans-serif;font-weight:600;font-size:12px;color:var(--tc-text-2,#5b6573);background:var(--tc-surface,#fff);border:1px solid var(--tc-border,#e6eaf0);border-radius:999px;padding:2px 10px;} /* nameservers block */ #order-standard_cart #tc-domain-config .tc-dc-ns-title{font-family:Montserrat,sans-serif;font-weight:700;font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:var(--tc-text-2,#5b6573);margin:0 0 8px;} #order-standard_cart #tc-domain-config .tc-dc-ns-opt{display:flex;align-items:flex-start;gap:9px;font-family:Montserrat,sans-serif;font-weight:600;font-size:14px;color:var(--tc-text,#1f2329);margin:0 0 8px;cursor:pointer;} #order-standard_cart #tc-domain-config .tc-dc-ns-opt input{margin:2px 0 0;accent-color:#1B77C9;width:16px;height:16px;flex:0 0 auto;} #order-standard_cart #tc-domain-config .tc-dc-ns-opt small{font-weight:600;color:var(--tc-text-2,#5b6573);} #order-standard_cart #tc-domain-config .tc-dc-ns-fields{margin:6px 0 2px;padding:12px 14px;border:1px solid var(--tc-border,#e6eaf0);border-radius:12px;background:var(--tc-bg,#f4f6f9);display:flex;flex-direction:column;gap:8px;} #order-standard_cart #tc-domain-config .tc-dc-ns-input{font-family:Montserrat,sans-serif;font-size:14px;color:var(--tc-text,#1f2329);background:var(--tc-surface,#fff);border:1px solid var(--tc-border,#e6eaf0);border-radius:9px;padding:9px 12px;width:100%;transition:border-color .15s,box-shadow .15s;} #order-standard_cart #tc-domain-config .tc-dc-ns-input:focus{outline:none;border-color:#44A8DA;box-shadow:0 0 0 3px rgba(68,168,218,.18);} #order-standard_cart #tc-domain-config .tc-dc-ns-more{align-self:flex-start;background:none;border:0;padding:2px 0;font-family:Montserrat,sans-serif;font-weight:700;font-size:13px;color:#1B77C9;cursor:pointer;} #order-standard_cart #tc-domain-config .tc-dc-ns-more:hover{text-decoration:underline;} body.tc-dark #order-standard_cart:not(#__tc) #tc-domain-config{background:#141b22!important;border-color:#222c37!important;} body.tc-dark #order-standard_cart:not(#__tc) #tc-domain-config > .tc-config-head{color:#e9f1f8!important;} body.tc-dark #order-standard_cart:not(#__tc) #tc-domain-config .tc-dc-domain,body.tc-dark #order-standard_cart:not(#__tc) #tc-domain-config .tc-dc-ns-fields{background:#0f161d!important;border-color:#222c37!important;} body.tc-dark #order-standard_cart:not(#__tc) #tc-domain-config .tc-dc-tag,body.tc-dark #order-standard_cart:not(#__tc) #tc-domain-config .tc-dc-ns-input{background:#141b22!important;border-color:#222c37!important;color:#e9f1f8!important;} body.tc-dark #order-standard_cart:not(#__tc) #tc-domain-config .tc-dc-ns-opt{color:#e9f1f8!important;} /* Transfer EPP/Auth code field (merged from the Domains Configuration step) */ #order-standard_cart #tc-domain-config .tc-dc-epp{margin:0 0 16px;} #order-standard_cart #tc-domain-config .tc-dc-epp-input{font-family:Montserrat,sans-serif;font-size:14px;color:var(--tc-text,#1f2329);background:var(--tc-surface,#fff);border:1px solid var(--tc-border,#e6eaf0);border-radius:9px;padding:9px 12px;width:100%;transition:border-color .15s,box-shadow .15s;} #order-standard_cart #tc-domain-config .tc-dc-epp-input:focus{outline:none;border-color:#44A8DA;box-shadow:0 0 0 3px rgba(68,168,218,.18);} #order-standard_cart #tc-domain-config .tc-dc-epp-help{font-family:Montserrat,sans-serif;font-size:12px;line-height:1.5;color:var(--tc-text-3,#7a8694);margin:6px 0 0;} body.tc-dark #order-standard_cart:not(#__tc) #tc-domain-config .tc-dc-epp-input{background:#141b22!important;border-color:#222c37!important;color:#e9f1f8!important;} /* "Preparing checkout" veil while the (skipped) Domains Configuration step auto-submits */ #tc-skip-overlay{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:rgba(244,246,249,.96);backdrop-filter:blur(2px);} body.tc-dark #tc-skip-overlay{background:rgba(12,17,22,.96);} #tc-skip-overlay .tc-skip-card{display:flex;flex-direction:column;align-items:center;gap:14px;font-family:Montserrat,sans-serif;font-weight:700;font-size:16px;color:#1B77C9;} #tc-skip-overlay .tc-skip-card i{font-size:30px;color:#44A8DA;} body.tc-dark #tc-skip-overlay .tc-skip-card{color:#69c0ec;} /* ===== One-page cart extras in the configure-page Order Summary ===== */ /* on the configure page (class added by JS) hide WHMCS's product-only totals; our combined total replaces them */ #order-standard_cart.tc-cartextra-on .order-summary .summary-container .summary-totals, #order-standard_cart.tc-cartextra-on .order-summary .summary-container .total-due-today{display:none!important;} #order-standard_cart #tc-cart-extra{font-family:Montserrat,sans-serif;} #order-standard_cart #tc-cart-extra .tc-cx-divider{height:1px;background:var(--tc-border,#e6eaf0);margin:14px 0;} #order-standard_cart #tc-cart-extra .tc-cx-item{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:0 0 4px;} #order-standard_cart #tc-cart-extra .tc-cx-item-main{display:flex;flex-direction:column;min-width:0;} #order-standard_cart #tc-cart-extra .tc-cx-item-name{font-weight:700;font-size:14px;color:var(--tc-text,#1f2329);} #order-standard_cart #tc-cart-extra .tc-cx-item-sub{font-weight:600;font-size:12px;color:var(--tc-text-2,#5b6573);word-break:break-all;} #order-standard_cart #tc-cart-extra .tc-cx-item-right{display:flex;flex-direction:column;align-items:flex-end;gap:1px;white-space:nowrap;} #order-standard_cart #tc-cart-extra .tc-cx-item-price{font-weight:700;font-size:14px;color:var(--tc-text,#1f2329);} #order-standard_cart #tc-cart-extra .tc-cx-item-price.tc-cx-free{color:#2b7a3e;font-size:13px;} body.tc-dark #order-standard_cart #tc-cart-extra .tc-cx-item-price.tc-cx-free{color:#9fd3ab!important;} #order-standard_cart #tc-cart-extra .tc-cx-change{font-weight:700;font-size:11.5px;color:#1B77C9;text-decoration:none;} #order-standard_cart #tc-cart-extra .tc-cx-change:hover{text-decoration:underline;} /* native-style "Apply Promo Code" widget */ #order-standard_cart #tc-cart-extra .tc-cx-promo-widget{margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--tc-border,#e6eaf0);} #order-standard_cart #tc-cart-extra .tc-cx-promo-head{font-weight:700;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--tc-text-2,#5b6573);margin:0 0 9px;} #order-standard_cart #tc-cart-extra .tc-cx-promo-field{position:relative;margin:0 0 9px;} #order-standard_cart #tc-cart-extra .tc-cx-promo-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#9aa6b4;font-size:14px;pointer-events:none;} #order-standard_cart #tc-cart-extra .tc-cx-promo-input{width:100%;font-family:Montserrat,sans-serif;font-size:13px;color:var(--tc-text,#1f2329);background:var(--tc-surface,#fff);border:1px solid var(--tc-border,#e6eaf0);border-radius:10px;padding:10px 12px 10px 34px;} #order-standard_cart #tc-cart-extra .tc-cx-promo-input:focus{outline:none;border-color:#44A8DA;box-shadow:0 0 0 3px rgba(68,168,218,.18);} #order-standard_cart #tc-cart-extra .tc-cx-promo-apply{display:block;width:100%;font-family:Montserrat,sans-serif;font-weight:700;font-size:13px;color:#1B77C9;background:transparent;border:1px solid var(--tc-border,#e6eaf0);border-radius:10px;padding:10px 14px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;} #order-standard_cart #tc-cart-extra .tc-cx-promo-apply:hover{background:#1B77C9;border-color:#1B77C9;color:#fff;} #order-standard_cart #tc-cart-extra .tc-cx-promo-msg{font-weight:600;font-size:12px;margin:8px 0 0;} #order-standard_cart #tc-cart-extra .tc-cx-promo-msg.is-ok{color:#5a7d12;} #order-standard_cart #tc-cart-extra .tc-cx-promo-msg.is-err{color:#c0392b;} /* inset #tc-cart-extra by 16px to match #producttotal's padding, so the total + its divider line up vertically with the product-breakdown rows (uniform left/right guides). */ #order-standard_cart #tc-cart-extra{padding-left:16px!important;padding-right:16px!important;} /* total → identical to a=view: amount (30px blue) ABOVE the uppercase label, right-aligned */ #order-standard_cart #tc-cart-extra .tc-cx-total{display:flex!important;flex-direction:column;align-items:flex-end;margin:20px 0 2px;padding-top:16px;border-top:1px solid var(--tc-border,#e6eaf0);} #order-standard_cart #tc-cart-extra .tc-cx-total-label{order:1;display:block;text-align:right;font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:#8b9aa8;} #order-standard_cart #tc-cart-extra .tc-cx-total-amt{order:0;display:block;margin:0;text-align:right;font-weight:700;font-size:30px;letter-spacing:-.6px;line-height:1.15;color:#1B77C9;white-space:nowrap;} body.tc-dark #order-standard_cart:not(#__tc) #tc-cart-extra .tc-cx-item-name,body.tc-dark #order-standard_cart:not(#__tc) #tc-cart-extra .tc-cx-item-price{color:#e9f1f8!important;} body.tc-dark #order-standard_cart:not(#__tc) #tc-cart-extra .tc-cx-promo-input{background:#0f161d!important;border-color:#222c37!important;color:#e9f1f8!important;} body.tc-dark #order-standard_cart:not(#__tc) #tc-cart-extra .tc-cx-divider,body.tc-dark #order-standard_cart:not(#__tc) #tc-cart-extra .tc-cx-total,body.tc-dark #order-standard_cart:not(#__tc) #tc-cart-extra .tc-cx-promo-widget,body.tc-dark #order-standard_cart:not(#__tc) #tc-cart-extra .tc-cx-promo-apply{border-color:#222c37!important;} /* ---- Existing: rebuilt product description (logo + green-tick list) ---- */ .trinico-cp-desc{margin:6px 0 2px;} .trinico-cp-brand{display:block;max-height:40px;width:auto;margin:2px 0 16px;} .trinico-cp-feats{list-style:none;margin:0;padding:0;} .trinico-cp-feats li{position:relative;padding-left:28px;margin:0 0 11px;font-family:Montserrat,sans-serif;font-size:13.5px;line-height:1.5;color:var(--tc-text,#2b3440);} .trinico-cp-feats li:last-child{margin-bottom:0;} .trinico-cp-feats li::before{font-family:"Font Awesome 6 Pro","Font Awesome 6 Free","Font Awesome 5 Pro","Font Awesome 5 Free";font-weight:900;content:"\f00c";position:absolute;left:1px;top:3px;color:#ABC441;font-size:13px;} body.tc-dark .trinico-cp-feats li{color:#c4d0dd;} /* ==================================================================== DOMAIN step (/store//) — plan summary + billing slider ==================================================================== */ .tc-cp-plan{max-width:540px;margin:0 auto 28px;padding:26px 30px 28px;text-align:center;background:var(--tc-surface,#fff);border:1px solid var(--tc-border,#e6eaf0);border-radius:var(--tc-r-xl,18px);box-shadow:var(--tc-shadow,0 12px 32px rgba(15,32,55,.08));font-family:Montserrat,sans-serif;} .tc-cp-plan-logo{max-height:32px;width:auto;margin:0 auto 14px;display:block;} .tc-cp-plan-eyebrow{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--tc-text-3,#9aa6b4);margin:0 0 6px;} .tc-cp-plan-name{font-size:21px;font-weight:700;color:var(--tc-text,#1b2b3a);letter-spacing:-.3px;line-height:1.2;margin:0 0 14px;} .tc-cp-plan-price{display:flex;align-items:baseline;justify-content:center;gap:7px;margin:0;} .tc-cp-plan-amt{font-size:36px;font-weight:700;color:#1B77C9;letter-spacing:-.8px;line-height:1;} .tc-cp-plan-cyc{font-size:15px;font-weight:600;color:var(--tc-text-2,#8a94a3);} .tc-cp-plan-saved{font-size:12.5px;font-weight:700;color:#5C8A1F;margin:9px 0 0;} .tc-cp-plan .trinico-billing-toggle{margin:20px 0 0;} body.tc-dark .tc-cp-plan{background:#141b22;border-color:#222c37;} body.tc-dark .tc-cp-plan-name{color:#e9f1f8;} body.tc-dark .tc-cp-plan-amt{color:#44A8DA;} /* ---- DOMAIN step — brand the domain-selection controls to match the site ---- */ #order-standard_cart .domain-selection-options{max-width:none;margin:0;} /* The Register card spans the full width; the LABEL sits top-left (radio + text) so it lines up vertically with the Transfer / use-your-own option labels. Only the search form + congrats card stay at the original ~760px, centred. */ #order-standard_cart .domain-selection-options .option:has(#selregister) > .domain-input-group{max-width:760px;margin-left:auto;margin-right:auto;} /* The WHMCS container behind the (transparent) option cells is white — make it transparent so the grey page shows through the gaps between cells. 2-id beats the parent-theme rule that loads after this block. */ body #order-standard_cart:not(#__tc) .domain-selection-options{background:transparent!important;} /* Panels: fully transparent (the page shows through, no fill). Only the input CELLS carry a surface. ONLY the cell whose RADIO is checked shows a border (scoped to input[name=domainoption] so the Safe Search checkbox inside the Register panel no longer makes it look selected). Soft light-blue border. */ /* White card INSIDE each cell + a light border on EVERY cell (selected or not); the gaps between cells stay grey (the container is transparent). Selected = soft light-blue border. 2-id + !important beats the parent-theme rule that loads after this block. */ #order-standard_cart:not(#__tc) .domain-selection-options .option{background:var(--tc-surface,#fff)!important;border:1.5px solid var(--tc-border,#e6eaf0)!important;border-radius:var(--tc-r-xl,18px);padding:18px 22px;margin:0 0 14px;box-shadow:0 3px 12px rgba(15,32,55,.04)!important;transition:border-color .2s,box-shadow .2s;} #order-standard_cart:not(#__tc) .domain-selection-options .option:hover{border-color:#cfdeeb!important;} #order-standard_cart:not(#__tc) .domain-selection-options .option:has(input[name="domainoption"]:checked){border-color:#9ecbe8!important;background:var(--tc-surface,#fff)!important;box-shadow:0 10px 26px rgba(27,119,201,.08)!important;} /* All paths (in-cart reuse / register / transfer / use-your-own) render inline as RADIO-WITH-REVEAL cards: the native WHMCS radios toggle each panel (progressive disclosure). No popout, no buttons — strict WHMCS, the domain binds to the product. */ #order-standard_cart .domain-selection-options .option > label{display:flex;align-items:center;gap:12px;} #order-standard_cart .domain-selection-options .option > label .iradio_square-blue{flex:0 0 auto;margin:0 2px 0 0!important;} /* keep every inner wrapper transparent so no white box sits around the form */ #order-standard_cart .domain-selection-options .domain-input-group, #order-standard_cart .domain-selection-options .domain-input-group .row, #order-standard_cart .domain-selection-options .domains-row, #order-standard_cart .domain-selection-options .domain-input-group [class*="col-"], #order-standard_cart .domain-selection-options .btn-group{background:transparent!important;} #order-standard_cart .domain-selection-options .domain-input-group{margin-top:16px;} #order-standard_cart .domain-selection-options .option label{font-family:Montserrat,sans-serif;font-weight:700;font-size:15px;color:var(--tc-text,#2b3440);margin:0;cursor:pointer;} body.tc-dark #order-standard_cart .domain-selection-options .option label{color:#e9f1f8;} #order-standard_cart .domain-selection-options .offset-sm-1,#order-standard_cart .domain-selection-options .col-sm-offset-1{margin-left:0;} #order-standard_cart .domain-selection-options input[type=text]{background:var(--tc-surface,#fff);border:1.5px solid var(--tc-border,#e6eaf0);border-radius:12px;font-family:Montserrat,sans-serif;font-size:14px;color:var(--tc-text,#2b3440);padding:12px 16px;height:auto;box-shadow:none;transition:border-color .15s,box-shadow .15s;} #order-standard_cart .domain-selection-options input[type=text]:focus{border-color:#44A8DA;box-shadow:0 0 0 3px rgba(68,168,218,.20);outline:none;} #order-standard_cart #btnCheckAvailability{background:linear-gradient(135deg,#B9D04D 0%,#ABC441 58%,#9bb539 100%)!important;color:#fff!important;border:0!important;border-radius:14px!important;font-family:Montserrat,sans-serif!important;font-weight:700!important;font-size:14.5px!important;letter-spacing:.3px;padding:12px 24px!important;height:auto!important;box-shadow:0 6px 16px rgba(171,196,65,.35)!important;transition:transform .15s,box-shadow .2s!important;} #order-standard_cart #btnCheckAvailability:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(171,196,65,.45)!important;} #order-standard_cart .domain-selection-options button.multiselect{background:#f2f6fb!important;color:#2b4257!important;border:1px solid #e6eaf0!important;border-radius:999px!important;font-family:Montserrat,sans-serif!important;font-weight:600!important;font-size:12.5px!important;padding:8px 16px!important;box-shadow:none!important;} #order-standard_cart .domain-selection-options button.multiselect:hover{border-color:#44A8DA!important;color:#1B77C9!important;} #order-standard_cart .domain-selection-options select[name=currency],#order-standard_cart select[name=currency]{border:1px solid var(--tc-border,#e6eaf0);border-radius:10px;font-family:Montserrat,sans-serif;font-weight:600;padding:9px 34px 9px 13px;} /* ==================================================================== Transfer / Use-existing-domain rows — line up www. + input + TLD + button on ONE clean 50px row. Stock markup is a nested Bootstrap grid (.col-sm-8[.domains-row:.col-xs-9(.input-group www.+input)+.col-xs-3(TLD)] + .col-sm-2 button); the input-group was stacking (the register input rule forced width:100%) and the button stretched to ~96px. Scoped to the two panels by id so the register AI-search textarea + Check stay as-is. ==================================================================== */ /* Flatten the nested Bootstrap grid with display:contents so www.+input | TLD | button become true siblings in ONE flex row with uniform 16px gaps (the nested cols were overlapping the button against the dropdown). */ #order-standard_cart #domaintransfer > .row,#order-standard_cart #domainowndomain > .row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:0;} #order-standard_cart #domaintransfer > .row > .col-sm-8,#order-standard_cart #domainowndomain > .row > .col-sm-8, #order-standard_cart #domaintransfer > .row > .col-sm-2,#order-standard_cart #domainowndomain > .row > .col-sm-2, #order-standard_cart #domaintransfer .domains-row,#order-standard_cart #domainowndomain .domains-row, #order-standard_cart #domaintransfer .domains-row > [class*="col-"],#order-standard_cart #domainowndomain .domains-row > [class*="col-"]{display:contents;} /* www. + input as one joined 50px control */ #order-standard_cart #domaintransfer .input-group,#order-standard_cart #domainowndomain .input-group{display:flex;align-items:stretch;flex-wrap:nowrap;flex:1 1 0;width:auto!important;min-width:140px;height:50px;border:1.5px solid var(--tc-border,#e6eaf0);border-radius:12px;overflow:hidden;background:var(--tc-surface,#fff);transition:border-color .15s,box-shadow .15s;} #order-standard_cart #domaintransfer .input-group:focus-within,#order-standard_cart #domainowndomain .input-group:focus-within{border-color:#44A8DA;box-shadow:0 0 0 3px rgba(68,168,218,.18);} #order-standard_cart #domaintransfer .input-group .input-group-addon,#order-standard_cart #domaintransfer .input-group .input-group-prepend,#order-standard_cart #domaintransfer .input-group .input-group-text,#order-standard_cart #domainowndomain .input-group .input-group-addon,#order-standard_cart #domainowndomain .input-group .input-group-prepend,#order-standard_cart #domainowndomain .input-group .input-group-text{display:flex;align-items:center;height:auto;margin:0;padding:0 13px;background:#f2f6fb;color:#8a94a3;font-family:Montserrat,sans-serif;font-weight:600;font-size:13px;border:0;border-right:1px solid var(--tc-border,#e6eaf0);border-radius:0;white-space:nowrap;} #order-standard_cart #domaintransfer .input-group input[type=text],#order-standard_cart #domainowndomain .input-group input[type=text]{flex:1 1 auto!important;width:auto!important;min-width:0;height:auto!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:0 14px!important;font-size:14px;} /* TLD control (select#transfertld OR input#owndomaintld) — same 50px height */ #order-standard_cart #transfertld,#order-standard_cart #owndomaintld{flex:0 0 auto;height:50px!important;min-width:118px;width:auto!important;border:1.5px solid var(--tc-border,#e6eaf0)!important;border-radius:12px!important;background:var(--tc-surface,#fff)!important;font-family:Montserrat,sans-serif!important;font-weight:600!important;font-size:13.5px!important;color:var(--tc-text,#2b3440)!important;padding:0 14px!important;box-shadow:none!important;} /* Transfer / Use buttons — 50px, brand cobalt gradient, aligned (not the 96px stretch) */ #order-standard_cart #domaintransfer .col-sm-2 button,#order-standard_cart #domainowndomain .col-sm-2 button{flex:0 0 auto;margin:0!important;height:50px!important;min-height:50px!important;max-height:50px!important;min-width:132px;width:auto!important;padding:0 28px!important;border:0!important;border-radius:12px!important;background:linear-gradient(135deg,#1B77C9 0%,#44A8DA 100%)!important;color:#fff!important;font-family:Montserrat,sans-serif!important;font-weight:700!important;font-size:14px!important;letter-spacing:.3px;box-shadow:0 6px 16px rgba(27,119,201,.30)!important;transition:transform .15s,box-shadow .2s!important;} #order-standard_cart #domaintransfer .col-sm-2 button:hover,#order-standard_cart #domainowndomain .col-sm-2 button:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(27,119,201,.40)!important;} /* Smooth entrance when a panel opens */ @keyframes tcDomIn{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:translateY(0);}} #order-standard_cart .domain-selection-options .option:has(input[name="domainoption"]:checked) .domain-input-group{animation:tcDomIn .3s cubic-bezier(.4,0,.2,1) both;} @media(prefers-reduced-motion:reduce){#order-standard_cart .domain-selection-options .option:has(input[name="domainoption"]:checked) .domain-input-group{animation:none;}} /* Helper note inside the transfer / use-your-own panels (eligibility + nameservers) */ #order-standard_cart .tc-domain-note{display:flex;gap:12px;align-items:flex-start;margin:16px 0 2px;padding:14px 16px;background:#f3f8fd;border:1px solid #dcebf5;border-left:3px solid #44A8DA;border-radius:12px;font-family:Montserrat,sans-serif;} #order-standard_cart .tc-domain-note > i{color:#1B77C9;font-size:15px;margin-top:2px;flex:0 0 auto;} #order-standard_cart .tc-domain-note strong{display:block;font-size:13.5px;font-weight:700;color:#1b3a57;margin:0 0 5px;} #order-standard_cart .tc-domain-note p{font-size:12.5px;line-height:1.5;color:#48586a;margin:0 0 7px;} #order-standard_cart .tc-domain-note ul{margin:0 0 7px;padding-left:18px;} #order-standard_cart .tc-domain-note li{font-size:12.5px;line-height:1.55;color:#48586a;margin:0 0 3px;} #order-standard_cart .tc-domain-note .tc-note-foot{display:block;font-size:12px;font-weight:600;color:#2b7a3e;} #order-standard_cart .tc-domain-note .tc-ns{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;} #order-standard_cart .tc-domain-note .tc-ns code{font-family:'SFMono-Regular',Consolas,'Liberation Mono',monospace;font-size:13px;font-weight:700;color:#1B77C9;background:#fff;border:1px solid #cfe0ef;border-radius:8px;padding:7px 12px;} body.tc-dark #order-standard_cart .tc-domain-note{background:#101a24;border-color:#22384c;border-left-color:#44A8DA;} body.tc-dark #order-standard_cart .tc-domain-note strong{color:#dbe9f6;} body.tc-dark #order-standard_cart .tc-domain-note p,body.tc-dark #order-standard_cart .tc-domain-note li{color:#a9bccd;} body.tc-dark #order-standard_cart .tc-domain-note .tc-note-foot{color:#9fd3ab;} body.tc-dark #order-standard_cart .tc-domain-note .tc-ns code{background:#0c1116;border-color:#2a3744;color:#69c0ec;} /* Mobile: stack the input full-width, TLD + button share the next row */ @media(max-width:575.98px){ #order-standard_cart #domaintransfer > .row,#order-standard_cart #domainowndomain > .row{gap:10px;} #order-standard_cart #domaintransfer .input-group,#order-standard_cart #domainowndomain .input-group{flex:1 1 100%;} #order-standard_cart #transfertld,#order-standard_cart #owndomaintld{flex:1 1 auto;} #order-standard_cart #domaintransfer .col-sm-2 button,#order-standard_cart #domainowndomain .col-sm-2 button{flex:1 1 auto;width:100%!important;} } /* ==================================================================== REGISTER (AI-search) panel — smart layout. Row 1: textarea grows + a COMPACT green Check button (was a chunky 96px block jammed on the cell edge, overlapping the textarea). Row 2: the Include TLDs / Maximum Length dropdowns + Safe Search laid out on one row with real gaps (they were overlapping). Rows matched by :has() so it's robust to markup order. ==================================================================== */ #order-standard_cart #domainregister .row:has(#btnCheckAvailability){display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:0;} #order-standard_cart #domainregister .row:has(#btnCheckAvailability) > .col-sm-8, #order-standard_cart #domainregister .row:has(#btnCheckAvailability) .domains-row, #order-standard_cart #domainregister .row:has(#btnCheckAvailability) > .col-sm-2{display:contents;} #order-standard_cart #domainregister #message{flex:1 1 auto;width:auto!important;min-width:0;min-height:92px!important;height:92px!important;padding:12px 15px!important;line-height:1.5;overflow:hidden!important;resize:none!important;} #order-standard_cart #btnCheckAvailability{flex:0 0 auto;margin:0!important;display:inline-flex!important;align-items:center;justify-content:center;gap:9px;height:52px!important;min-height:52px!important;max-height:52px!important;width:auto!important;min-width:130px;padding:0 26px!important;border-radius:12px!important;font-size:14.5px!important;} #order-standard_cart #btnCheckAvailability i{margin:0!important;font-size:14px;line-height:1;} #order-standard_cart #domainregister .row:has(button.multiselect){margin:0;} #order-standard_cart #domainregister .row:has(button.multiselect) .domains-row{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:14px 0 0;} #order-standard_cart #domainregister .row:has(button.multiselect) .btn-group{margin:0!important;flex:0 0 auto;width:auto!important;display:inline-flex;} /* ==================================================================== STANDALONE "Register Domain" page (cart.php?a=add&domain=register): its AI search sits in a BLUE GRADIENT HERO (.domain-checker-container, styled in the mod_trinico_theme.custom_css DB setting). Flatten that into the SAME clean WHITE CARD as the store order-form's "Register a new domain" search (input + green Check button side-by-side, filter controls on the row below). Scoped #order-standard_cart so it outranks the unscoped DB rules. ==================================================================== */ #order-standard_cart .domain-checker-container{background:transparent!important;background-image:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;max-width:900px!important;margin:0 auto!important;overflow:visible!important;} #order-standard_cart .domain-checker-container::after{display:none!important;} #order-standard_cart .domain-checker-container .row{margin:0!important;} #order-standard_cart .domain-checker-container .row>[class*="col-md-8"]{flex:0 0 100%!important;max-width:100%!important;width:100%!important;margin-left:0!important;padding:0!important;} /* the WHITE CARD (matches the store .option card) */ #order-standard_cart .domain-checker-container .input-group-box{background:var(--tc-surface,#fff)!important;border:1px solid var(--tc-border,#e6eaf0)!important;border-radius:var(--tc-r-xl,18px)!important;box-shadow:0 10px 30px rgba(15,32,55,.07)!important;padding:22px 24px 18px!important;display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;gap:14px!important;position:relative!important;} /* the AI textarea -> themed grey field that grows, leaving room for the button beside it */ #order-standard_cart .domain-checker-container #message{flex:1 1 300px!important;width:auto!important;min-width:240px!important;background:var(--tc-surface-2,#f4f6f9)!important;border:1px solid var(--tc-border,#e6eaf0)!important;border-radius:12px!important;padding:14px 16px!important;color:var(--tc-text,#21364a)!important;min-height:84px!important;height:84px!important;margin:0!important;resize:none!important;box-shadow:none!important;} #order-standard_cart .domain-checker-container #message:focus{border-color:var(--tc-accent,#44A8DA)!important;box-shadow:0 0 0 3px rgba(68,168,218,.18)!important;} #order-standard_cart .domain-checker-container #message::placeholder{color:var(--tc-text-3,#9fb0c0)!important;} /* green Check button -> in-flow beside the input (was position:absolute top-right), shorter than the tall input + vertically centred, like the store. */ #order-standard_cart .domain-checker-container #btnCheckAvailability{position:static!important;top:auto!important;right:auto!important;left:auto!important;bottom:auto!important;flex:0 0 auto!important;align-self:center!important;border-radius:12px!important;} /* force the filter controls (Include TLDs / Max Length / Safe Search) onto their own row below */ #order-standard_cart .domain-checker-container .input-group-box::after{content:"";flex:0 0 100%!important;height:0!important;order:1!important;margin:0!important;} #order-standard_cart .domain-checker-container .input-group-box>.btn-group,#order-standard_cart .domain-checker-container .input-group-box>label{order:2!important;align-self:center!important;} #order-standard_cart .domain-checker-container .input-group-box>label{margin:0!important;display:inline-flex!important;align-items:center;gap:6px;} /* dark mode: the DB blob hardcoded the filter pills + Safe Search label light — re-tint them */ body.tc-dark #order-standard_cart .domain-checker-container .multiselect.btn,body.tc-dark #order-standard_cart .domain-checker-container .btn-group>.btn,body.tc-dark #order-standard_cart .domain-checker-container .btn-group>.multiselect{background:var(--tc-surface-2,#0f161d)!important;background-image:none!important;border-color:var(--tc-border,#222c37)!important;color:var(--tc-text-2,#aebccd)!important;} body.tc-dark #order-standard_cart .domain-checker-container .btn-group>.btn:hover,body.tc-dark #order-standard_cart .domain-checker-container .multiselect.btn:hover{border-color:var(--tc-accent,#44A8DA)!important;color:var(--tc-accent,#44A8DA)!important;} body.tc-dark #order-standard_cart .domain-checker-container label{color:var(--tc-text-2,#aebccd)!important;} body.tc-dark #order-standard_cart .domain-checker-container .input-group-box{box-shadow:0 10px 30px rgba(0,0,0,.35)!important;} #order-standard_cart #domainregister .row:has(button.multiselect) .btn-group>button.multiselect{margin:0!important;} #order-standard_cart #domainregister .row:has(button.multiselect) .domains-row>label{display:inline-flex;align-items:center;gap:8px;margin:0;font-family:Montserrat,sans-serif;font-weight:600;font-size:13px;color:var(--tc-text-2,#5b6573);cursor:pointer;white-space:nowrap;} #order-standard_cart #domainregister .row:has(button.multiselect) .domains-row>label input[type=checkbox]{width:17px;height:17px;accent-color:#1B77C9;margin:0;cursor:pointer;vertical-align:middle;} body.tc-dark #order-standard_cart:not(#__tc) #domainregister .row:has(button.multiselect) .domains-row>label{color:#9fb0c0;} /* "Use a domain already in my shopping cart" (#domainincart): a domain