/* Final shared service presentation; hosting keeps its own final override layer. */
/* jQuery attaches the SMS calendar to body, outside the order wrapper. */
.cv2-order-sms.cv2-order-sms body .ui-datepicker { box-sizing: border-box; display: none; position: absolute; z-index: 9999; width: min(288px,calc(100vw - 24px)); padding: 12px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); color: var(--color-text-primary); font: inherit}
.cv2-order-sms.cv2-order-sms body .ui-datepicker .ui-datepicker-header { position: relative; padding: 4px 30px 12px; text-align: center}
.cv2-order-sms.cv2-order-sms body .ui-datepicker :is(.ui-datepicker-prev,.ui-datepicker-next) { position: absolute; top: 0; display: grid; place-items: center; width: 28px; height: 28px; cursor: pointer; font-size: 0}
.cv2-order-sms.cv2-order-sms body .ui-datepicker .ui-datepicker-prev { left: 0}
.cv2-order-sms.cv2-order-sms body .ui-datepicker .ui-datepicker-next { right: 0}
.cv2-order-sms.cv2-order-sms body .ui-datepicker .ui-datepicker-prev::before { content: "‹"; font-size: 20px}
.cv2-order-sms.cv2-order-sms body .ui-datepicker .ui-datepicker-next::before { content: "›"; font-size: 20px}
.cv2-order-sms.cv2-order-sms body .ui-datepicker .ui-icon { display: none}
.cv2-order-sms.cv2-order-sms body .ui-datepicker select { width: auto; max-width: 50%; min-height: 32px; padding: 4px; border: 1px solid var(--color-border); background: var(--color-surface); color: inherit}
.cv2-order-sms.cv2-order-sms body .ui-datepicker table { width: 100%; border-collapse: collapse}
.cv2-order-sms.cv2-order-sms body .ui-datepicker :is(th,td) { padding: 3px; text-align: center; font-size: 12px}
.cv2-order-sms.cv2-order-sms body .ui-datepicker td :is(a,span) { display: block; padding: 5px; color: inherit; text-decoration: none}
.cv2-order-sms.cv2-order-sms body .ui-datepicker .ui-state-active { background:var(--cv2-gradient,var(--cv2-primary)); color: var(--cv2-btn-text); border-radius: 4px}
.cv2-order-demo .cv2-dom-dns[hidden] { display: none}
.cv2-order-demo .cv2-brand-native-select{display:none}
.cv2-order-demo .cv2-brand-native-select ~ .cv2-os-trigger{display:none}
.cv2-order-demo .cv2-brand-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.cv2-order-demo .cv2-brand-choice{display:grid;min-width:0;text-align:left}
.cv2-order-demo .cv2-option-brand{object-fit:contain}
.cv2-order-demo .cv2-choice-title{overflow-wrap:anywhere}
.cv2-order-demo .cv2-addon-sub{display:block;margin-top:6px;color:var(--muted-foreground);font-size:11px;font-weight:400}
.cv2-order-demo[data-order-widget="server"] .form-section:has(#service_amounts){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.cv2-order-demo .cv2-preview-dialog::backdrop { background: var(--overlay)}
.cv2-order-demo .cv2-order-fields-table select:not(.cv2-brand-native-select) { padding: 12px; border: 1px solid var(--border); border-radius: var(--cv2-radius-input); background: var(--card); color: var(--foreground)}
@media(max-width:768px) {
.cv2-order-demo .cv2-order-step-pill { min-width: 0; white-space: normal; padding: 9px 10px; line-height: 1.45}
.cv2-order-demo .cv2-order-step-pill-name { min-width: 0; overflow-wrap: anywhere}
.cv2-order-demo .cv2-order-mobile-action { grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); gap: 10px}
}
@media(prefers-reduced-motion:reduce) {
.cv2-order-demo *,.cv2-order-demo *::before,.cv2-order-demo *::after { scroll-behavior: auto; transition: none; animation: none}
}
/* SMS order: demo-aligned section card, 3-column identity grid, sender title rules */
.cv2-order-demo[data-order-widget="sms"] .form-field input.is-invalid { border-color: var(--destructive, #dc2626)}
.cv2-order-demo[data-order-widget="sms"] .btn-primary-action { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 30px; border-radius: 14px; background: var(--foreground); color: var(--background, #fff); text-decoration: none}
.cv2-order-demo[data-order-widget="sms"] .field-feedback { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--destructive, #dc2626) 8%, transparent); color: var(--destructive, #dc2626); font-size: 14px}
.cv2-order-demo .cv2-sms-origin-rules li:has(.fa-check) { color: #15803d; border-color: color-mix(in srgb, #16a34a 30%, transparent); background: color-mix(in srgb, #16a34a 7%, transparent)}
@media(max-width:768px) {
.cv2-order-demo[data-order-widget="sms"] .btn-primary-action { width: 100%}
}
/* Keep long option names and actual prices readable in narrow two-column fields. */
.cv2-order-demo .cv2-brand-choice { grid-template-columns: 38px minmax(0,1fr) auto 18px; grid-template-rows: auto; column-gap: 12px}
.cv2-order-demo .cv2-brand-choice:not(:has(.cv2-option-brand)){grid-template-columns:38px minmax(0,1fr) auto 18px}
.cv2-order-demo .cv2-brand-choice>.cv2-choice-copy{grid-column:2;grid-row:1}
.cv2-order-demo .cv2-brand-choice>.cv2-option-fallback,.cv2-order-demo .cv2-brand-choice>.cv2-option-brand{grid-column:1;grid-row:1;align-self:center}
.cv2-order-demo .cv2-brand-choice > .cv2-choice-price { grid-row: 1; grid-column: 3; justify-self: end; align-self: center}
.cv2-order-demo .cv2-brand-choice::after { grid-column: 4; grid-row: 1; align-self: center}
.cv2-order-demo .cv2-brand-choice:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px}
.cv2-order-demo[data-order-widget="server"] div:has(> input[type="radio"][name^="addons["]) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; position: relative}
.cv2-order-demo[data-order-widget="server"] div:has(> input[type="radio"][name^="addons["]) > br { display: none}
.cv2-order-demo[data-order-widget="server"] input[type="radio"][name^="addons["]:checked + label { border-style: dashed; border-color: var(--primary); background: color-mix(in srgb,var(--primary) 5%,var(--card))}
.cv2-order-demo[data-order-widget="server"] input[type="radio"][name^="addons["]:focus-visible + label {outline: 2px solid var(--primary)}
@media(max-width:640px) {
.cv2-order-demo .cv2-brand-choices{grid-template-columns:minmax(0,1fr)}
.cv2-order-demo[data-order-widget="server"] div:has(> input[type="radio"][name^="addons["]) { grid-template-columns: minmax(0,1fr)}
}
/* Add-ons: siparis-demo-v2-tam form-section + addon-panel + support-choice look.
   Presentation only; native inputs stay in place and keep keyboard focus. */
.cv2-order-demo [data-cv2-addon-group] { display: grid; gap: 12px; margin: 0 0 18px; padding: clamp(16px,2.2vw,26px); border: 0; border-radius: 26px; background: color-mix(in oklab, var(--foreground) 4%, var(--card))}
.cv2-order-demo [data-cv2-addon-group] > div:not([data-cv2-addon-row]):not(.cv2-addon-group-title):not(:has([name^="addons["])) { display: none}
/* Each add-on = one addon-panel card. */
.cv2-order-demo [data-cv2-addon-design] { display: grid; grid-template-columns: minmax(0,1fr); gap: 15px; margin: 0; padding: 18px; border: 1px dashed var(--border); border-radius: 14px; background: var(--card);  min-width: 0}
.cv2-order-demo [data-cv2-addon-design] > * { width: auto; max-width: none; margin: 0; padding: 0; border: 0; background: transparent; min-width: 0}
.cv2-order-demo [data-cv2-addon-design] > [data-cv2-addon-head] { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px}
.cv2-order-demo [data-cv2-addon-design] [data-cv2-addon-head] > label { display: grid; gap: 3px; margin: 0; line-height: 1.45}
.cv2-order-demo [data-cv2-addon-design] [data-cv2-addon-head] > label > strong { font-size: 15px; font-weight: 700; color: var(--foreground)}
.cv2-order-demo [data-cv2-addon-design] [data-cv2-addon-head] > label > br { display: none}
.cv2-order-demo [data-cv2-addon-design] [data-cv2-addon-head] > label > span { font-size: 12.5px; line-height: 1.55; color: var(--muted-foreground)}
/* Options = support-choice grid. */
.cv2-order-demo [data-cv2-addon-design] > [data-cv2-addon-options] { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,190px),1fr)); gap: 9px; position: relative}
.cv2-order-demo [data-cv2-addon-design] [data-cv2-addon-options] > br { display: none}
.cv2-order-demo [data-cv2-addon-design] [data-cv2-addon-options] > input[type=radio],
.cv2-order-demo [data-cv2-addon-design] [data-cv2-addon-options] > input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none}
.cv2-order-demo [data-cv2-addon-design] [data-cv2-addon-options] > input + label { position: relative; display: block; box-sizing: border-box; min-height: 58px; margin: 0; padding: 12px 12px 12px 40px; border: 1px dashed var(--border); border-radius: 11px; background: var(--muted); color: var(--foreground); font-size: 13px; line-height: 1.5; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease}
.cv2-order-demo [data-cv2-addon-design] [data-cv2-addon-options] > input + label::before { content: ""; position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; margin: -9px 0 0; box-sizing: border-box; border: 1.5px solid var(--border); border-radius: 50%; background: var(--card)}
.cv2-order-demo [data-cv2-addon-design] [data-cv2-addon-options] > input + label::after { content: none}
.cv2-order-demo [data-cv2-addon-design] [data-cv2-addon-options] > input:checked + label { border-color: color-mix(in oklab, var(--primary) 48%, var(--border)); background: color-mix(in oklab, var(--primary) 5%, var(--card))}
.cv2-order-demo [data-cv2-addon-design] [data-cv2-addon-options] > input:checked + label::before { border: 5px solid var(--primary); background: var(--card)}
.cv2-order-demo [data-cv2-addon-design] [data-cv2-addon-options] > input:focus-visible + label {outline: 1px dashed color-mix(in srgb, var(--primary) 50%, transparent)}
.cv2-order-demo [data-cv2-addon-design] [data-cv2-addon-options] label strong { font-weight: 700; color: var(--foreground)}
.cv2-order-demo [data-cv2-addon-design] [data-cv2-addon-options] select { box-sizing: border-box; width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--muted); color: var(--foreground); font: inherit}
/* Tables (software / special): let rows behave as cards. */
.cv2-order-demo table:has([data-cv2-addon-design]), .cv2-order-demo table:has([data-cv2-addon-design]) > tbody { display: grid; gap: 12px; width: 100%}
.cv2-order-demo table:has([data-cv2-addon-design]) > tbody > tr:not([data-cv2-addon-row]):not(:has([name^="addons["])) { display: none}
.cv2-order-demo .cv2-addon-toggle { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--muted-foreground); cursor: pointer; transition: background .2s ease, color .2s ease}
.cv2-order-demo .cv2-addon-toggle:hover { background: var(--muted); color: var(--foreground)}
.cv2-order-demo .cv2-addon-toggle::before { content: ""; display: block; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(2px) rotate(225deg); transition: transform .2s ease}
.cv2-order-demo .cv2-addon-toggle[aria-expanded="false"]::before { transform: translateY(-2px) rotate(45deg)}
.cv2-order-demo [data-cv2-addon-row]:not([data-cv2-addon-design]) > [data-cv2-addon-head] { position: relative; padding-right: 38px}
.cv2-order-demo [data-cv2-addon-row]:not([data-cv2-addon-design]) .cv2-addon-toggle { position: absolute; top: 0; right: 0}
.cv2-order-demo .cv2-addon-collapsed > [data-cv2-addon-options],
.cv2-order-demo .cv2-addon-collapsed label[for] > strong ~ :is(br,span) { display: none}
@media (max-width: 768px) {
.cv2-order-demo [data-cv2-addon-group] { border-radius: 22px}
.cv2-order-demo [data-cv2-addon-design] { padding: 14px}
.cv2-order-demo [data-cv2-addon-design] > [data-cv2-addon-options] { grid-template-columns: minmax(0,1fr)}
}