/* =============================================================================
   Ingolo Hosting HostBill theme | css/pages.css
   PURPOSE: Page-specific styles: homepage announcements list, error page, and the ingolo_cart order-page steps (plan picker, cycle toggle, add-ons, domain step, cart summary, completion).
   WHERE USED: root.tpl (news list), 404 pages, templates/orderpages/cart_ingolo_cart.tpl and ingolo_cart/*.tpl (wrapped in div.ig.ig-order).
   DEPENDENCIES: css/variables.css, css/components.css (buttons, cards, plan cards).
   SAFE EDITS: Spacing and layout of the order steps; summary column width (--order-side). Keep the sticky summary off on small screens.
   TEST AFTER EDITING: Order flow at 320/768/1280px: plan cards, cycle radios, add-on checkboxes, domain tabs, cart totals, gateway radios, login/signup forms, completion page.
   SCOPE: storefront rules are prefixed with .ig (set on the header/footer chrome and
          <main> of store pages) so they never restyle HostBill's own client-area markup.
   ============================================================================= */

/* Announcements on the homepage (root.tpl) */
.ig .news-list { display: grid; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.ig .news-item { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-3); }
.ig .news-item__date { display: block; font-size: var(--fs-small); color: var(--color-muted); margin-bottom: 4px; }
.ig .news-item__title { font-size: 1.125rem; margin-bottom: 8px; }
.ig .news-item__title a { color: var(--color-ink); }
.ig .news-item__text { color: var(--color-body); margin: 0; }
.ig .news-item__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* Error page */
.ig .error-page { text-align: center; padding: var(--space-10) var(--gutter); }
.ig .error-page__code { font-size: 6rem; font-weight: 800; letter-spacing: -0.04em; color: var(--color-primary); line-height: 1; }

/* ---------------------------------------------------------------------------
   Order pages: templates/orderpages/cart_ingolo_cart.tpl + ingolo_cart/
   --------------------------------------------------------------------------- */
.ig-order { --order-side: 360px; padding: var(--space-6) 0 var(--space-10); background: var(--color-surface); min-height: 60vh; }
.ig-order .order-head { margin-bottom: var(--space-4); }
.ig-order .order-head h1 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); margin-bottom: 8px; }
.ig-order .order-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 var(--space-4); counter-reset: ostep; }
.ig-order .order-steps li { counter-increment: ostep; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--color-border); font-size: var(--fs-small); font-weight: 600; color: var(--color-muted); }
.ig-order .order-steps li::before { content: counter(ostep); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface-2); color: var(--color-muted); font-size: 12px; font-weight: 800; }
.ig-order .order-steps li[aria-current="step"] { color: var(--color-ink); border-color: var(--color-primary); }
.ig-order .order-steps li[aria-current="step"]::before { background: var(--color-primary); color: #fff; }
.ig-order .order-steps li.is-done::before { background: var(--color-success-soft); color: var(--color-success); }
.ig-order .order-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--order-side); gap: var(--space-4); align-items: start; }
.ig-order .order-main > * + * { margin-top: var(--space-4); }
.ig-order .order-side { position: sticky; top: calc(var(--header-h) + 16px); }
.ig-order .order-panel { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-3); box-shadow: var(--shadow-card); }
.ig-order .order-panel > h2, .ig-order .order-panel > h3 { font-size: 1.25rem; margin-bottom: var(--space-2); }
.ig-order .order-panel__lead { color: var(--color-muted); margin-top: -8px; }
.ig-order .plans { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.ig-order .plan-card form { margin-top: auto; }
.ig-order .plan-card .btn { width: 100%; }
.ig-order .plan-card__specs { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; gap: 6px; font-size: .95rem; }
.ig-order .plan-card__specs li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--color-border); padding-bottom: 6px; }
.ig-order .plan-card__specs b { color: var(--color-ink); font-weight: 700; text-align: right; }
.ig-order .cycle-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.ig-order .radio-card { min-height: 44px; }
.ig-order .radio-card__main { display: grid; gap: 2px; flex: 1; }
.ig-order .radio-card__title { font-weight: 700; color: var(--color-ink); }
.ig-order .radio-card__meta { font-size: var(--fs-small); color: var(--color-muted); }
.ig-order .radio-card__price { font-weight: 800; color: var(--color-ink); white-space: nowrap; }
.ig-order .addon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.ig-order .addon-card { display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-card); cursor: pointer; }
.ig-order .addon-card:has(input:checked) { border: 2px solid var(--color-primary); padding: 15px; background: var(--color-primary-soft); }
.ig-order .addon-card input { margin-top: 4px; width: 20px; height: 20px; accent-color: var(--color-primary); flex: none; }
.ig-order .addon-card__name { font-weight: 700; color: var(--color-ink); display: block; }
.ig-order .addon-card__desc { font-size: var(--fs-small); color: var(--color-muted); display: block; margin-top: 2px; }
.ig-order .addon-card__price { font-weight: 700; color: var(--color-ink); display: block; margin-top: 6px; }
.ig-order .form-row { display: grid; gap: 6px; }
.ig-order .form-row + .form-row { margin-top: 14px; }
.ig-order .form-row .input, .ig-order .form-row .select, .ig-order .form-row .textarea,
.ig-order .order-panel input[type="text"], .ig-order .order-panel input[type="email"], .ig-order .order-panel input[type="password"],
.ig-order .order-panel input[type="tel"], .ig-order .order-panel input[type="number"], .ig-order .order-panel select, .ig-order .order-panel textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-input); font: inherit; font-size: 16px; color: var(--color-ink); background: #fff;
}
.ig-order .order-panel textarea { min-height: 120px; }
.ig-order .order-panel input:focus, .ig-order .order-panel select:focus, .ig-order .order-panel textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(32,151,206,.16); outline: none; }
.ig-order .order-panel input[type="checkbox"], .ig-order .order-panel input[type="radio"] { width: 20px; height: 20px; min-height: 0; accent-color: var(--color-primary); }
.ig-order .domain-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-3); }
.ig-order .domain-tabs label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: #fff; font-weight: 700; color: var(--color-ink); cursor: pointer; }
.ig-order .domain-tabs label:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-strong); }
.ig-order .domain-pane[hidden] { display: none; }
.ig-order .domain-pane .field-group { align-items: stretch; }
.ig-order .domain-pane .field-group .input { flex: 1 1 220px; }
.ig-order .domain-pane .field-group .select { flex: 0 0 auto; }
.ig-order .free-domain { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-btn); background: var(--color-success-soft); color: var(--color-success); font-weight: 700; font-size: .95rem; }
.ig-order .free-domain small { color: var(--color-body); font-weight: 500; }
.ig-order .domain-results { display: grid; gap: 8px; margin-top: var(--space-3); }
.ig-order .domain-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-btn); background: #fff; }
.ig-order .domain-result--available { border-color: #b9e3d0; }
.ig-order .domain-result--taken { background: var(--color-surface); }
.ig-order .domain-result--premium { border-color: #f1d9a9; }
.ig-order .domain-result__name { font-weight: 700; color: var(--color-ink); overflow-wrap: anywhere; }
.ig-order .domain-result__side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ig-order .domain-result__price { font-weight: 700; color: var(--color-ink); }
.ig-order .summary-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ig-order .summary-item { display: flex; justify-content: space-between; gap: 12px; font-size: .95rem; }
.ig-order .summary-item__name { color: var(--color-ink); font-weight: 600; overflow-wrap: anywhere; }
.ig-order .summary-item__name small { display: block; color: var(--color-muted); font-weight: 500; }
.ig-order .summary-item__price { white-space: nowrap; font-weight: 700; color: var(--color-ink); }
.ig-order .summary-totals { margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--color-border); display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; }
.ig-order .summary-totals dt { color: var(--color-muted); }
.ig-order .summary-totals dd { margin: 0; text-align: right; font-weight: 700; color: var(--color-ink); }
.ig-order .summary-totals .is-total { font-size: 1.125rem; color: var(--color-ink); font-weight: 800; padding-top: 8px; border-top: 1px solid var(--color-border); }
.ig-order .summary-actions { display: grid; gap: 8px; margin-top: var(--space-3); }
.ig-order .cart-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ig-order .cart-table th, .ig-order .cart-table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.ig-order .cart-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted); background: var(--color-surface); }
.ig-order .cart-table td.num, .ig-order .cart-table th.num { text-align: right; white-space: nowrap; }
.ig-order .cart-table .remove { min-height: 44px; display: inline-flex; align-items: center; color: var(--color-danger); font-weight: 600; }
.ig-order .promo-form { display: flex; gap: 8px; flex-wrap: wrap; }
.ig-order .promo-form input[type="text"] { flex: 1 1 180px; width: auto; }
.ig-order .cross-sell { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.ig-order .cross-sell .card { display: flex; flex-direction: column; gap: 8px; }
.ig-order .cross-sell .card .btn { margin-top: auto; align-self: flex-start; }
.ig-order .gateway-list { display: grid; gap: 8px; }
.ig-order .auth-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-3); }
.ig-order .auth-switch label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: #fff; font-weight: 700; cursor: pointer; }
.ig-order .auth-switch label:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.ig-order .hb-fields .form-group, .ig-order .hb-fields .control-group { margin-bottom: 14px; }
.ig-order .hb-fields label { display: block; font-weight: 700; color: var(--color-ink); font-size: .92rem; margin-bottom: 6px; }
.ig-order .tos-row { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--space-2); font-size: .95rem; }
.ig-order .complete { text-align: center; max-width: 640px; margin: 0 auto; }
.ig-order .complete__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--color-success-soft); color: var(--color-success); display: grid; place-items: center; margin: 0 auto var(--space-3); }
.ig-order .complete__icon svg { width: 30px; height: 30px; }
.ig-order .empty-cart { text-align: center; padding: var(--space-6) var(--space-3); }
.ig-order .hb-errors { margin-bottom: var(--space-3); }
.ig-order .order-panel__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--space-2); }
.ig-order .order-panel__bar h2 { margin: 0; font-size: 1.25rem; }
.ig-order .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ig-order .cart-table tr.is-sub td { font-size: var(--fs-small); color: var(--color-muted); padding-left: 22px; }
.ig-order .row-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: var(--fs-small); }
.ig-order .row-links a { min-height: 44px; display: inline-flex; align-items: center; }
.ig-order .items, .ig-order .stack { display: grid; gap: 14px; }
.ig-order .item.radio-card { align-items: flex-start; }
.ig-order .item-body { margin-top: 10px; width: 100%; }
.ig-order .order-item { border: 1px solid var(--color-border); border-radius: var(--radius-btn); padding: 16px; display: grid; gap: 12px; }
.ig-order .order-item__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ig-order .order-item__name { color: var(--color-ink); font-size: 1.05rem; overflow-wrap: anywhere; margin-right: 8px; }
.ig-order .grid--2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.ig-order .addon-card__check { display: flex; gap: 12px; align-items: flex-start; }
.ig-order .addon-card { flex-direction: column; }
.ig-order .addon-card .select { margin-top: 8px; }
.ig-order .order-notes textarea { min-height: 100px; }
.ig-order .order-promo { margin-top: var(--space-2); }
.ig-order .summary-actions--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), max-content)); justify-content: start; }
.ig-order .complete .summary-actions--row { justify-content: center; }
.ig-order .h4 { font-size: 1.05rem; font-weight: 700; color: var(--color-ink); margin: 0; }
.ig-order .muted { color: var(--color-muted); }
.ig-order .small { font-size: var(--fs-small); }
.ig-order .field-group { display: grid; gap: 6px; }
.ig-order fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ig-order legend { padding: 0; }
/* Domain search results rendered by domains.js (handlebars rows in ingolo_cart/cart1.tpl) */
.ig-order .result-row .result-data { display: grid; gap: 4px; min-width: 0; }
.ig-order .result-hostname { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ig-order .result-tld { color: var(--color-primary-strong); }
.ig-order .result-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ig-order .result-price { display: grid; text-align: right; }
.ig-order .result-price.empty { display: none; }
.ig-order .result-row-details { display: flex; align-items: center; gap: 8px; }
.ig-order .btn-group-toggle label { cursor: pointer; }
.ig-order .result-incart { display: none; gap: 8px; align-items: center; }
.ig-order .result-row.active { border-color: var(--color-primary); background: var(--color-primary-soft); }
.ig-order .result-row.active .result-incart { display: flex; }
.ig-order .result-row.active .btn-group-toggle { display: none; }
.ig-order .result-row.lazy { opacity: .75; }
.ig-order .result-more { text-align: center; margin-top: var(--space-2); }
.ig-order .btn.disabled, .ig-order .btn[aria-disabled="true"] { opacity: .6; pointer-events: none; }
.ig-order .cart_preloader { display: inline-flex; gap: 4px; align-items: center; height: 20px; }
.ig-order .cart_preloader_line { width: 4px; height: 16px; border-radius: 2px; background: var(--color-primary); animation: ig-pre 0.9s ease-in-out infinite; }
.ig-order .cart_preloader_line:nth-child(2) { animation-delay: .15s; }
.ig-order .cart_preloader_line:nth-child(3) { animation-delay: .3s; }
.ig-order .complete .cart_preloader { margin: 0 auto var(--space-2); display: flex; justify-content: center; }
@keyframes ig-pre { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .ig-order .cart_preloader_line { animation: none; } }
.ig-order .btn--sm, .ig-order .btn--ghost { min-height: 44px; }
.ig-order .order-main form > section + section, .ig-order .order-main form > section + div, .ig-order .order-main form > input + section { margin-top: var(--space-4); }