/* WISECP's native forms keep their fields and AJAX handlers inside the demo layout. */
.cv2-order-demo,
.cv2-order-demo.dark {
  --background: var(--cv2-bg-page);
  --foreground: var(--cv2-heading, var(--cv2-text-main));
  --card: var(--cv2-bg-card);
  --domain-surface: var(--cv2-bg-card);
  --domain-soft: var(--cv2-bg-panel);
  --primary: var(--cv2-primary);
  --primary-foreground: var(--cv2-btn-text);
  --payment: var(--cv2-btn, var(--cv2-primary));
  --payment-hover: var(--cv2-primary-light, var(--cv2-primary));
  /* Keep the theme palette, while separating panels from white cards. */
  --secondary: color-mix(in srgb, var(--cv2-bg-panel) 96%, var(--cv2-heading));
  --muted: color-mix(in srgb, var(--cv2-bg-panel) 96%, var(--cv2-heading));
  --muted-foreground: var(--cv2-text-main, var(--cv2-text-muted));
  --accent: var(--cv2-primary-light, #e9edf2);
  --border: var(--cv2-border);
  --selected-border: var(--cv2-primary)}
.cv2-order-demo .cv2-order-step-pill { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 38px; padding: 0 16px; color: var(--muted-foreground); font-size: 13px; font-weight: 600; border-radius: var(--cv2-radius-chip); background: transparent; white-space: nowrap}
.cv2-order-demo .cv2-order-step-pill.is-active { color: var(--primary-foreground); background:var(--cv2-gradient,var(--primary)); font-weight: 700}
.cv2-order-demo .cv2-order-step-pill-num { display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; margin: 0 2px 0 0; border-radius: 50%; background: var(--muted); color: var(--muted-foreground); font-size: 10px}
.cv2-order-demo .cv2-order-step-pill.is-active .cv2-order-step-pill-num { background: color-mix(in srgb,var(--primary-foreground) 18%,transparent); color: var(--primary-foreground)}
.cv2-order-demo form[id^="StepForm"] { display: block; width: 100%; margin: 0}
.cv2-order-demo :is(input:not([type=hidden]):not([type=radio]):not([type=checkbox]),select,textarea) { font: inherit; color: var(--foreground); background: var(--card); border: 1px solid var(--border); border-radius: var(--cv2-radius-input); min-height: 42px}
.cv2-order-demo [hidden] { display: none}
.cv2-order-demo [data-existing-domain] #dns_list span:empty { display: none}
.cv2-order-basket .basket-main-list { min-width: 0}
.cv2-order-basket #empty_list.empty-order { min-height: 300px; padding: 42px 24px; border: 1px dashed var(--border); border-radius: var(--cv2-radius-card); background: var(--card); text-align: center}
.cv2-order-basket #empty_list .empty-icon-wrap { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 16px; border-radius: var(--cv2-radius-card); background: var(--muted); color: var(--primary); font-size: 24px}
.cv2-order-basket #empty_list h1 { margin: 0 0 8px; color: var(--foreground); font-size: 20px; font-weight: 750}
.cv2-order-basket #empty_list p { margin: 0 0 18px; color: var(--muted-foreground)}
.cv2-order-basket .summary-ticket .summary-body.summary-closed > :not(.coresepeteim-loading) { display: none}
.cv2-order-basket .coresepeteim-btn-disabled { opacity: .45; cursor: not-allowed}
.cv2-order-demo :is(.sepethosting-radio-label,.sepethosting-checkbox-label,.sepetsms-radio-label,.sepetsms-checkbox-label,.sepetozel-radio-label,.sepetozel-checkbox-label):has(input:checked) { border-color: var(--selected-border); background: color-mix(in srgb,var(--primary) 6%,var(--card))}
/* TSX OrderShell is the only outer card. PHP step markup now supplies its own
   TSX-shaped section surfaces; this reset removes the former nested legacy shell. */
.cv2-order-demo .cv2-order-content-root { display: grid; gap: 16px; min-width: 0; width: 100%}
.cv2-order-demo .cv2-order-content-root > .cv2-order-step-head:has(+ :is(.sepethosting-content,.sepetsunucu-content,.sepetsms-content,.sepetdomain-content,.sepetsoftware-content,.sepetozel-content)) { margin: 0; border: 0; border-radius: 26px 26px 0 0; background: var(--muted)}
.cv2-order-demo .cv2-order-content-root > .cv2-order-step-head:has(+ :is(.sepethosting-content,.sepetsunucu-content,.sepetsms-content,.sepetdomain-content,.sepetsoftware-content,.sepetozel-content)) + :is(.sepethosting-content,.sepetsunucu-content,.sepetsms-content,.sepetdomain-content,.sepetsoftware-content,.sepetozel-content) { padding-top: 12px; border-radius: 0 0 26px 26px}
.cv2-order-demo[data-order-widget="server"][data-order-step="configuration"] .cv2-order-content-root > .cv2-order-step-head:has(+ .sepetsunucu-content),
.cv2-order-demo[data-order-widget="special"] .cv2-order-content-root > .cv2-order-step-head:has(+ .sepetozel-content),
.cv2-order-demo[data-order-widget="hosting"][data-order-step-key="domain"] .cv2-order-content-root > .cv2-order-step-head:has(+ .sepethosting-content),
.cv2-order-demo[data-order-widget="software"][data-order-step-key="domain"] .cv2-order-content-root > .cv2-order-step-head:has(+ .sepetsoftware-content) { padding: 0; border-radius: 0; background: transparent}
/* The title and the native PHP form form one TSX section on selection steps.
   The previous root-level grid gap split that section into two visible panels. */
.cv2-order-demo .cv2-order-content-root:has(> .cv2-order-step-head + :is(.sepethosting-content,.sepetsunucu-content,.sepetsms-content,.sepetdomain-content,.sepetsoftware-content,.sepetozel-content)) { row-gap: 0}
.cv2-order-demo[data-order-widget="server"][data-order-step="configuration"] .cv2-order-content-root,
.cv2-order-demo[data-order-widget="hosting"][data-order-step-key="domain"] .cv2-order-content-root,
.cv2-order-demo[data-order-widget="software"][data-order-step-key="domain"] .cv2-order-content-root,
.cv2-order-demo[data-order-widget="special"] .cv2-order-content-root { row-gap: 16px}
/* WISECP selectors share the consolidated reference styles above. */
.cv2-order-demo[data-order-widget="hosting"][data-order-step-key="domain"]:not(.cv2-domain-mode-existing) [data-existing-domain] {
  display: none}
.cv2-order-demo :is(.sepetdomain-form-input,.sepetdomain-form-select,.sepetsms-form-input,.sepetsms-form-select,.sepetsms-form-textarea,.sepetsoftware-form-input,.sepetsoftware-form-select,.sepetsoftware-form-textarea,.sepetozel-select):focus {outline: 3px solid color-mix(in srgb,var(--primary) 15%,transparent)}
.cv2-order-demo :is(.sepetdomain-button,.sepetsms-button,.sepetsoftware-button,.sepetozel-button,.sepetsunucu-button,.sepetsoftware-domain-button):hover { background: var(--payment-hover); filter: brightness(1.04)}
.cv2-order-demo :is(.sepetdomain-accordion-header.active,.sepetozel-accordion-header.active) { color: var(--primary); background: color-mix(in srgb,var(--primary) 8%,var(--card))}
.cv2-order-demo .sw-cs-option:hover { background: var(--secondary)}
.cv2-order-demo .sepetsunucu-form-group:has(.sepetsunucu-form-select) { padding: 14px; border: 1px solid var(--border); border-radius: var(--cv2-radius-card); background: var(--secondary)}
.cv2-order-demo .sepetsunucu-form-group:has(:is(.sepetsunucu-radio-group,.sepetsunucu-checkbox-group)) { grid-column: 1 / -1}
.cv2-order-demo :is(.sepetsunucu-radio-label,.sepetsunucu-checkbox-label):has(input:checked) { border-color: var(--selected-border); background: color-mix(in srgb,var(--primary) 6%,var(--card))}
.cv2-order-demo :is(.sepetdomain-error,.sepetsms-error,.sepetsoftware-error,.sepetozel-error,.sepetsunucu-error,.sepetdomain-success,.sepetsms-success,.sepetsoftware-success) { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--cv2-radius-input); overflow-wrap: anywhere}
.cv2-order-demo :is(.cs-option,.sw-cs-option):hover { background: var(--secondary); color: var(--primary)}
.cv2-order-demo :is(.sepethosting-file-selected,.sepetsunucu-file-selected,.sepetsms-file-selected,.sepetsoftware-file-selected,.sepetozel-file-selected) { color: var(--primary); font-size: 12px; overflow-wrap: anywhere}
.cv2-order-demo :is(.sepethosting-error,.sepetsunucu-error,.sepetsms-error,.sepetsoftware-error,.sepetozel-error,.cv2-order-danger-ico) { color: var(--destructive,var(--CoreV2-danger))}
.cv2-order-demo :is(.sepethosting-success,.sepetsunucu-success,.sepetsms-success,.sepetsoftware-success,.sepetozel-success) { color: var(--primary)}
.cv2-order-demo .whois-server-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--cv2-radius-chip); background: color-mix(in srgb,var(--primary) 11%,var(--card)); color: var(--primary); font-size: 10px; font-weight: 750}
.cv2-order-demo :is(.whois-owner,.whois-nameservers,.whois-server,.whois-registrar,.whois-expiry,.whois-countdown) { overflow-wrap: anywhere}
/* Keep billing cards at a predictable size, including products with one term. */
/* Expanded option menus must show the active value as clearly as radio cards. */
.cv2-order-demo :is(.cs-option,.sw-cs-option,.dp-custom-option):is(.selected,[aria-selected="true"],[aria-checked="true"]) {
  border-radius: var(--cv2-radius-input);
  background: color-mix(in srgb,var(--primary) 12%,var(--card));
  color: var(--primary);
  font-weight: 700}
.cv2-order-demo :is(.cs-option,.sw-cs-option,.dp-custom-option):focus-visible {
  outline: 1px dashed color-mix(in srgb, var(--primary) 50%, transparent);
  outline-offset: -2px}
/* Site theme + TSX order shell: timer, width, extras, domain results */
.cv2-order-demo {
  --primary: var(--cv2-primary);
  --primary-foreground: var(--cv2-btn-text);
  --payment: var(--cv2-btn, var(--cv2-primary));
  --payment-hover: var(--cv2-primary-light, var(--cv2-primary));
  --selected-border: var(--cv2-primary);
  --gauge-a: color-mix(in srgb, var(--cv2-primary) 65%, #fff);
  --success: var(--cv2-primary)}
.cv2-order-demo .order-workspace .cv2-order-mini-timer {
  --timer-color: var(--CoreV2-success);
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  min-height: 44px; padding: 8px 14px; border: 0; border-radius: 999px;
  background: var(--os-soft); color: var(--foreground); white-space: nowrap}
.cv2-order-demo .order-workspace .cv2-order-mini-timer[data-timer-state="warning"] { --timer-color: var(--CoreV2-warning)}
.cv2-order-demo .order-workspace .cv2-order-mini-timer[data-timer-state="danger"] { --timer-color: var(--CoreV2-danger)}
.cv2-order-demo .order-workspace .cv2-order-mini-timer strong { min-width: 48px; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--timer-color)}
.cv2-order-demo .order-workspace .cv2-order-mini-timer i { color: var(--timer-color); font-size: 18px}
.cv2-order-demo .cv2-order-mini-timer span { font-size: 11px; color: var(--muted-foreground)}
.cv2-order-demo .selected-product-strip {
  display: grid;
  align-items: center;
  overflow: visible;
  min-width: 0}
.cv2-order-demo .selected-product-strip div { min-width: 0}
.cv2-order-demo .selected-product-strip div > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4}
@media (max-width: 768px) {
.cv2-order-demo .order-workspace .progress-row { flex-wrap: wrap}
.cv2-order-demo .order-workspace .order-progress { flex-basis: 100%}
.cv2-order-demo .order-workspace .cv2-order-mini-timer { justify-content: center; width: 100%}
}
/* Standard-size period tiles with a clear CoreV2 active state. */
/* Product summary item: clearer hierarchy and a restrained branded surface. */
/* Use the theme's actual footer payment artwork, centered below the security note. */
/* Match the demo's service-term layout: two columns on laptops/tablets,
   three on wide desktop, and a predictable card width when only one exists. */
/* Security panel uses the same payment artwork configured for the site footer. */
/* Keep the order flow on the same site container and keep period cards compact. */
/* Make the complete term card, including its floating popularity badge, one clear radio target. */
/* Mirror the footer payment artwork and the demo's uncluttered summary row. */
/* Tighten the service-period section to the same content width as the cards. */
.cv2-order-demo .cv2-order-content-root > .cv2-order-step-head:has(+ :is(.sepethosting-content,.sepetsunucu-content,.sepetsms-content,.sepetdomain-content,.sepetsoftware-content,.sepetozel-content)) {
  padding: 14px 16px 0}
.cv2-order-demo .cv2-order-content-root > .cv2-order-step-head:has(+ :is(.sepethosting-content,.sepetsunucu-content,.sepetsms-content,.sepetdomain-content,.sepetsoftware-content,.sepetozel-content)) + :is(.sepethosting-content,.sepetsunucu-content,.sepetsms-content,.sepetdomain-content,.sepetsoftware-content,.sepetozel-content) {
  padding: 10px 16px 18px}
/* Make the selected service summary easier to scan without enlarging the row. */
.cv2-order-demo .selected-product-strip {
  grid-template-columns: 48px minmax(0,1fr) auto;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--cv2-radius-card)}
.cv2-order-demo .selected-product-strip > .product-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--cv2-radius-card);
  background: color-mix(in srgb,var(--primary) 10%,var(--card));
  color: var(--primary)}
.cv2-order-demo .selected-product-strip > .product-icon i { font-size: 22px; line-height: 1}
.cv2-order-demo .selected-product-strip div > strong { font-size: 15px; font-weight: 800}
.cv2-order-demo .selected-product-strip div > span { font-size: 12px}
@media (max-width: 768px) {
.cv2-order-demo .cv2-order-content-root > .cv2-order-step-head:has(+ :is(.sepethosting-content,.sepetsunucu-content,.sepetsms-content,.sepetdomain-content,.sepetsoftware-content,.sepetozel-content)) {
    padding: 12px 12px 0}
.cv2-order-demo .cv2-order-content-root > .cv2-order-step-head:has(+ :is(.sepethosting-content,.sepetsunucu-content,.sepetsms-content,.sepetdomain-content,.sepetsoftware-content,.sepetozel-content)) + :is(.sepethosting-content,.sepetsunucu-content,.sepetsms-content,.sepetdomain-content,.sepetsoftware-content,.sepetozel-content) {
    padding: 9px 12px 14px}
.cv2-order-demo .selected-product-strip {
    grid-template-columns: 42px minmax(0,1fr) auto;
    gap: 10px;
    padding: 13px 12px}
.cv2-order-demo .selected-product-strip > .product-icon { width: 40px; height: 40px}
.cv2-order-demo .selected-product-strip > .product-icon i { font-size: 20px}
}
/* Give the order summary row and first-payment total a clearer hierarchy. */
/* Leave a calm separation between the service-period heading and its choices. */
.cv2-order-demo .cv2-order-content-root > .cv2-order-step-head:has(+ :is(.sepethosting-content,.sepetsunucu-content,.sepetsms-content,.sepetdomain-content,.sepetsoftware-content,.sepetozel-content)) {
  padding-bottom: 12px}
/* Slightly compact the top navigation spacing on the order flow. */
/* Clean term tiles: remove the legacy ticket frame/perforation while keeping
   the selected tile clearly identified by the CoreV2 primary fill. */
/* Order summary line: icon, product copy, divider, then the amount at right. */
/* Match the order flow gutters to the site's centered promo container. */
.cv2-order-demo :is(.sepetsoftware-radio-label,.sepetsoftware-checkbox-label):has(input:checked) {
  border-color: var(--selected-border);
  background: color-mix(in srgb, var(--primary) 6%, var(--card))}
.cv2-order-demo :is(.sepetdomain-custom-select,.sepetsunucu-custom-select,.sw-custom-select):not(.cs-open) > .cs-options { display: none}
.cv2-order-demo :is(.sepetdomain-custom-select,.sepetsunucu-custom-select,.sw-custom-select).cs-open > .cs-options { display: block}
.cv2-order-demo[data-order-widget="hosting"][data-order-step-key="domain"] #DomainCheck input.sepethosting-domain-input::placeholder { color: #98a0ab; opacity: 1}
.cv2-order-demo[data-order-widget="hosting"][data-order-step-key="domain"] :is(#DomainCheck button.sepethosting-domain-button, .sepethosting-domain-results .btn-primary-action, .sepethosting-domain-container [data-existing-domain] a[id^="button"]):hover {
  background: var(--payment-hover)}
.cv2-order-demo[data-order-widget="hosting"][data-order-step-key="domain"] #DomainCheck button.sepethosting-domain-button:hover { background: var(--payment-hover)}
/* Search results are explicitly gated by the successful AJAX response. */
.cv2-order-demo[data-order-widget="hosting"][data-order-step-key="domain"] #available_content:not(.cv2-domain-result--visible),
.cv2-order-demo[data-order-widget="hosting"][data-order-step-key="domain"] #unavailable_content.domain-result.taken-result:not(.cv2-domain-result--visible),
.cv2-order-demo[data-order-widget="hosting"][data-order-step-key="domain"] #unknown_content:not(.cv2-domain-result--visible) {
  display: none}
.cv2-order-demo[data-order-widget="hosting"][data-order-step-key="domain"] #available_content.cv2-domain-result--visible { display: grid}
.cv2-order-demo[data-order-widget="hosting"][data-order-step-key="domain"] #unavailable_content.domain-result.taken-result.cv2-domain-result--visible { display: block}
.cv2-order-demo[data-order-widget="hosting"][data-order-step-key="domain"] #unknown_content.cv2-domain-result--visible { display: block}
.cv2-order-demo[data-order-widget="hosting"][data-order-step-key="domain"] #unavailable_content .whois-expiry {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--domain-border));
  border-radius: var(--cv2-radius-input);
  background: color-mix(in srgb, var(--primary) 5%, var(--card));
  color: var(--domain-ink);
  font-weight: 650;
  line-height: 1.2}
.cv2-order-demo[data-order-widget="hosting"][data-order-step-key="domain"] #unavailable_content .whois-countdown {
  color: var(--cv2-text-muted);
  font-size: 10px;
  line-height: 1.3}

.cv2-order-demo .cv2-brand-choice[aria-checked="true"]::after { content: "✓"; margin-inline-start: auto; color: var(--primary)}
.cv2-order-demo .cv2-brand-choice:disabled { opacity: .5; cursor: not-allowed}
@media (max-width: 768px) {
.cv2-order-demo .mobile-order-action { position: fixed; bottom: var(--cv2-order-nav-height, 0px); left: 0; right: 0; z-index: 10040}
}
/* Period cards follow the supplied order design: badge and perks left-aligned under the divider. */
/* Invalid fields retain visible feedback despite the adapter's important form rules. */
.cv2-order-demo :is(input,select,textarea):is(.is-invalid,.danger,[aria-invalid="true"]) { border-color: var(--destructive, var(--danger)); color: var(--destructive, var(--danger))}
.cv2-order-basket .order-cta > span[aria-hidden="true"] { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px}
.cv2-reference-checkout input:checked ~ .radio-dot { border: 4px solid var(--payment)}
.cv2-reference-checkout #payment_methods > input:checked + label { border-color: var(--selected-border); background: var(--muted)}
/* Basket + account + payment: summary rows and cart footer match the configuration step. */
/* Demo parity: native step submit stays clickable for the summary CTA but is visually hidden like the demo. */
.cv2-order-demo form[id^="StepForm"] a.btn-primary-action.mio-ajax-submit:has(> strong:only-child){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Summary follows the scroll on desktop: grid must not stretch it and no ancestor may clip it. */
/* Polished summary rows: every item price sits right with a divider, like the total. */
/* Demo parity (siparis-demo-v2-tam): order details panel, all steps. */
/* Premium order details panel: sticky, no inner scrollbar. */
/* overflow-x:hidden on html+body turns body into a non-scrolling scroll box and kills sticky; clip keeps the no-horizontal-scroll behaviour. */
html.cv2-root--order:not(cv2-q), body.cv2-page--order { overflow-x: clip; overflow-y: visible}
html.cv2-root--order:not(cv2-q) { overflow-y: auto}
/* Sticky needs a column taller than the panel and a panel that fits the screen. */
/* Flat, shadowless order details panel (user reference designs). */
/* Cut-outs: real holes in page colour, no outline strokes. */
/* Clean section bands like the references. */
.cv2-order-demo .cv2-choice-price.is-free { color: #15803d}
.cv2-order-demo .cv2-brand-choice:not(:has(.cv2-option-brand)) { grid-template-columns: minmax(0,1fr)}
.cv2-order-demo .cv2-brand-choice[aria-checked="true"]::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; margin: 0; border-radius: 50%;
  background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat}

.cv2-order-demo .cv2-choice-price::before { content: "Ücret"; color: var(--muted-foreground); font-size: 11px; font-weight: 500}
.cv2-order-demo .cv2-choice-price::after {
  content: attr(data-label); display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--card)); color: var(--primary); font-size: 12px; font-weight: 800}
.cv2-order-demo .cv2-choice-price.is-free::after { background: color-mix(in srgb, #16a34a 12%, var(--card)); color: #15803d; content: "✓ " attr(data-label)}
@media (max-width: 640px) {
.cv2-order-demo .cv2-choice-price::before { content: none}
}
/* Selected native controls and period tiles share the dashed selection outline. */
.cv2-order-demo [role="radio"][aria-checked="true"],
.cv2-order-demo input:is([type="radio"],[type="checkbox"]):checked + label,
.cv2-order-demo label:has(> input:is([type="radio"],[type="checkbox"]):checked) {
 border-style:dashed;
 border-color:var(--primary)}
@media(max-width:600px) {
.cv2-order-demo .cv2-brand-choices { grid-template-columns:minmax(0,1fr)}
}
.cv2-order-demo .cv2-availability-config[hidden], .cv2-order-demo .cv2-availability-config [hidden] { display:none}
.cv2-order-demo .cv2-availability-config .pill-tabs button.active { background:var(--cv2-gradient,var(--primary)); color:var(--primary-foreground)}
.cv2-order-demo[data-order-widget="hosting"][data-order-step-key="domain"] .cv2-availability-config .pill-tabs button.active { background:var(--card); color:var(--foreground); font-weight:700}
.cv2-order-demo .cv2-availability-config input:focus-visible ~ .switch{outline: 1px dashed color-mix(in srgb, var(--primary) 50%, transparent)} .cv2-order-demo .cv2-availability-config .toggle-row:focus-within { outline-offset:3px}
.cv2-order-demo .cv2-availability-config [data-cart-form] input:not([type=hidden]):not([type=checkbox]), .cv2-order-demo .cv2-availability-config [data-cart-form] select { width:100%; box-sizing:border-box; padding:10px 12px}
.cv2-order-demo .cv2-availability-config [data-cart-form] .tablinks.active { background:var(--cv2-gradient,var(--primary)); color:var(--primary-foreground)}
.cv2-order-demo .cv2-availability-config [data-cart-form] .tabcontent:not([hidden]) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.cv2-order-demo .cv2-availability-config [data-cart-form] .tabcontent[hidden] { display:none}
@media(max-width:600px) {
.cv2-order-demo .cv2-availability-config [data-cart-form] .tabcontent:not([hidden]) { grid-template-columns:minmax(0,1fr)}
}
/* Demo V2 option-chip look for every addon/requirement select tile (icon box, radio dot). */
.cv2-order-demo .cv2-brand-choices { gap: 12px; padding: 0; background: transparent}
.cv2-order-demo .cv2-brand-choice { position: relative; column-gap: 12px; min-height: 68px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--card)}
.cv2-order-demo .cv2-brand-choice::after { content: ""; width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid var(--border); border-radius: 50%; margin: 0; background: var(--card); position: static; inset: auto}
.cv2-order-demo .cv2-brand-choice[aria-checked="true"]::after { border: 5px solid var(--primary)}
.cv2-order-demo .cv2-brand-choice[aria-checked="true"] { border: 1.5px dashed color-mix(in srgb, var(--primary) 50%, transparent); background: color-mix(in srgb, var(--primary) 5%, var(--card))}
.cv2-order-demo .cv2-brand-choice .cv2-option-fallback { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--muted) 60%, var(--card)); color: var(--muted-foreground); margin: 0}
.cv2-order-demo .cv2-brand-choice .cv2-option-fallback svg { width: 18px; height: 18px}
.cv2-order-demo .cv2-brand-choice[aria-checked="true"] .cv2-option-fallback { background: var(--primary); color: var(--primary-foreground)}
.cv2-order-demo .cv2-brand-choice .cv2-option-brand { width: 38px; height: 38px; border-radius: 12px}
.cv2-order-demo .cv2-choice-title { font-size: 14px; font-weight: 600; color: var(--foreground); display: block; text-overflow: ellipsis}
.cv2-order-demo .cv2-choice-sub { font-size: 12px; font-weight: 500; color: var(--muted-foreground)}
.cv2-order-demo .cv2-choice-price { font-weight: 700; color: var(--primary); white-space: nowrap; border: 0; background: none}
.cv2-order-demo .cv2-choice-price.is-free { color: var(--muted-foreground)}
.cv2-order-demo .cv2-choice-heading-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-inline-end: 10px; vertical-align: middle; border-radius: 10px; background: var(--card); border: 1px solid var(--border); color: var(--primary)}
.cv2-order-demo .cv2-choice-heading-icon svg { width: 16px; height: 16px}
.cv2-order-demo .cv2-brand-choice { align-items: center}
.cv2-order-demo .cv2-brand-choice > * { grid-row: 1}
.cv2-order-demo .cv2-choice-copy { padding-right: 0; min-width: 0}
.cv2-order-demo .cv2-choice-price { grid-column: auto; border-top: 0; padding: 0; font-size: 0}
.cv2-order-demo .cv2-choice-price::before { content: none}
.cv2-order-demo .cv2-choice-price::after { padding: 3px 8px; font-size: 11.5px}
.cv2-order-demo .cv2-brand-choices { grid-template-columns: repeat(2, minmax(0,1fr))}
.cv2-order-demo .cv2-choice-title { white-space: normal; overflow: visible; line-height: 1.3}
@media (max-width: 640px) {
.cv2-order-demo .cv2-brand-choices { grid-template-columns: minmax(0,1fr)}
}