/* Store pages (order, cart, checkout, pay). Loaded after https://hpanel.net/css/style.css,
   so the header, footer, buttons, colours and fonts come from the website. Only the order
   layout is defined here, and everything is prefixed .ord- so it cannot touch the website's
   own classes. */

.ord-body { background: var(--slate-50, #f8fafc); }
.ord-main { padding: 112px 0 72px; min-height: 70vh; }
.ord-container { max-width: 1200px; }

.ord-title { font-size: 2rem; margin-bottom: 6px; }
.ord-sub { color: var(--slate-500); margin-bottom: 28px; }

/* Progress strip */
.ord-steps { display: flex; gap: 8px; margin: 0 0 28px; padding: 0; flex-wrap: wrap; }
.ord-steps li { display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; color: var(--slate-400); }
.ord-steps li + li::before { content: ''; width: 28px; height: 2px; background: var(--slate-200); margin-right: 4px; }
.ord-steps li span { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--slate-200); color: var(--slate-600); font-size: .75rem; }
.ord-steps li.current { color: var(--slate-900); }
.ord-steps li.current span { background: var(--brand); color: #fff; }
.ord-steps li.done { color: var(--slate-600); }
.ord-steps li.done span { background: var(--emerald, #059669); color: #fff; }

/* Two-column layout: content + sticky summary */
.ord-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.ord-aside { position: sticky; top: 96px; }
@media (max-width: 960px) {
    .ord-layout { grid-template-columns: 1fr; }
    .ord-aside { position: static; }
}

.ord-panel { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius, 12px); padding: 24px; margin-bottom: 20px; }
.ord-panel h2 { font-size: 1.125rem; margin-bottom: 4px; }
.ord-panel h2 + p { font-size: .875rem; color: var(--slate-500); margin-bottom: 16px; }
.ord-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.ord-panel-head h2 { margin: 0; }

/* Plan picker */
.ord-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.ord-plan { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius, 12px); padding: 24px; display: flex; flex-direction: column; }
.ord-plan h3 { font-size: 1.25rem; margin-bottom: 4px; }
.ord-plan .ord-plan-desc { font-size: .875rem; color: var(--slate-500); min-height: 2.6em; }
.ord-plan .ord-price { font-size: 2rem; font-weight: 800; color: var(--slate-900); margin: 14px 0 2px; }
.ord-plan .ord-price small { font-size: .875rem; font-weight: 500; color: var(--slate-500); }
.ord-plan ul { margin: 14px 0 20px; flex: 1; }
.ord-plan li { font-size: .875rem; color: var(--slate-600); padding: 5px 0 5px 24px; position: relative; }
.ord-plan li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 10px; height: 6px;
    border-left: 2px solid var(--emerald, #059669); border-bottom: 2px solid var(--emerald, #059669); transform: rotate(-45deg); }
.ord-plan .btn { width: 100%; }

/* Forms */
.ord-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .ord-grid-2 { grid-template-columns: 1fr; } }
.ord-field { margin-bottom: 16px; }
.ord-field label { display: block; font-size: .8125rem; font-weight: 600; color: var(--slate-700); margin-bottom: 6px; }
.ord-field label .ord-req { color: var(--red, #dc2626); }
.ord-field input[type=text], .ord-field input[type=email], .ord-field input[type=tel], .ord-field input[type=password],
.ord-field select, .ord-field textarea {
    width: 100%; padding: 11px 14px; border: 1px solid var(--slate-300); border-radius: var(--radius-sm, 8px);
    background: #fff; color: var(--slate-900); font-size: .9375rem; transition: border-color .15s, box-shadow .15s;
}
.ord-field textarea { min-height: 96px; resize: vertical; }
.ord-field input:focus, .ord-field select:focus, .ord-field textarea:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}
.ord-field .ord-hint { font-size: .8125rem; color: var(--slate-500); margin-top: 6px; }
.ord-field.has-error input, .ord-field.has-error select { border-color: var(--red, #dc2626); }
.ord-field .ord-error { font-size: .8125rem; color: var(--red, #dc2626); margin-top: 6px; }

/* Billing cycle choice */
.ord-cycles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ord-cycle { position: relative; display: block; border: 2px solid var(--slate-200); border-radius: var(--radius-sm, 8px);
    padding: 14px 16px; cursor: pointer; background: #fff; }
.ord-cycle input { position: absolute; opacity: 0; pointer-events: none; }
.ord-cycle strong { display: block; color: var(--slate-900); }
.ord-cycle span { font-size: .875rem; color: var(--slate-500); }
.ord-cycle:has(input:checked) { border-color: var(--brand); background: var(--brand-50, #eef2ff); }
.ord-cycle:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(79, 70, 229, .25); }

/* Payment methods */
.ord-methods { display: grid; gap: 10px; }
.ord-method { display: flex; align-items: center; gap: 12px; border: 2px solid var(--slate-200); border-radius: var(--radius-sm, 8px);
    padding: 14px 16px; cursor: pointer; background: #fff; }
.ord-method input { accent-color: var(--brand); width: 18px; height: 18px; flex-shrink: 0; }
.ord-method strong { display: block; color: var(--slate-900); font-size: .9375rem; }
.ord-method span { font-size: .8125rem; color: var(--slate-500); }
.ord-method:has(input:checked) { border-color: var(--brand); background: var(--brand-50, #eef2ff); }

.ord-check { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; color: var(--slate-600); margin-bottom: 12px; cursor: pointer; }
.ord-check input { margin-top: 3px; accent-color: var(--brand); width: 16px; height: 16px; flex-shrink: 0; }
.ord-check a { color: var(--brand); text-decoration: underline; }

/* Summary */
.ord-sum { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius, 12px); overflow: hidden; }
.ord-sum-head { background: var(--slate-900); color: #fff; padding: 16px 22px; font-weight: 700; }
.ord-sum-body { padding: 18px 22px; }
.ord-sum-item strong { display: block; color: var(--slate-900); }
.ord-sum-item small { color: var(--slate-500); font-size: .8125rem; }
.ord-row[hidden] { display: none; }
.ord-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .9rem; color: var(--slate-600); }
.ord-row span:last-child { white-space: nowrap; color: var(--slate-900); }
.ord-row.ord-minus span:last-child { color: var(--emerald, #059669); }
.ord-row.ord-total { border-top: 2px solid var(--slate-900); margin-top: 8px; padding-top: 12px; font-weight: 700; color: var(--slate-900); font-size: 1.05rem; }
.ord-total-big { text-align: right; font-size: 2rem; font-weight: 800; color: var(--slate-900); margin: 6px 0 2px; }
.ord-total-label { text-align: right; font-size: .8125rem; color: var(--slate-500); }
.ord-note { font-size: .8125rem; color: var(--slate-500); line-height: 1.6; margin-top: 12px; }
.ord-sum .btn { width: 100%; margin-top: 16px; }
.ord-btn-brand { background: var(--brand) !important; color: #fff !important; }
.ord-btn-brand:hover { background: var(--brand-dark, #3730a3) !important; }
.ord-btn-brand[disabled] { opacity: .6; cursor: not-allowed; transform: none; }
.ord-link { color: var(--brand); font-weight: 600; }
.ord-link:hover { text-decoration: underline; }
.ord-muted-link { display: block; text-align: center; font-size: .8125rem; color: var(--slate-500); margin-top: 12px; }

/* Cart table */
.ord-table { width: 100%; border-collapse: collapse; }
.ord-table th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-500);
    padding: 10px 12px; border-bottom: 1px solid var(--slate-200); }
.ord-table td { padding: 14px 12px; border-bottom: 1px solid var(--slate-100); font-size: .9rem; color: var(--slate-700); vertical-align: top; }
.ord-table td.r, .ord-table th.r { text-align: right; }
.ord-table code { font-size: .8125rem; background: var(--slate-100); padding: 2px 6px; border-radius: 4px; }

/* Alerts */
.ord-alert { padding: 14px 18px; border-radius: var(--radius-sm, 8px); margin-bottom: 20px; font-size: .9rem; border: 1px solid; }
.ord-alert-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.ord-alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.ord-alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.ord-alert-info { background: var(--brand-50, #eef2ff); border-color: #c7d2fe; color: #3730a3; }
.ord-alert ul { margin: 6px 0 0 18px; list-style: disc; }

/* Bank details / payment page */
.ord-kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; font-size: .9rem; }
.ord-kv dt { color: var(--slate-500); }
.ord-kv dd { color: var(--slate-900); font-weight: 600; word-break: break-all; }
@media (max-width: 640px) { .ord-kv { grid-template-columns: 1fr; } .ord-kv dd { margin-bottom: 6px; } }
.ord-center { text-align: center; }
.ord-spinner { width: 36px; height: 36px; border: 3px solid var(--slate-200); border-top-color: var(--brand); border-radius: 50%;
    animation: ordspin 1s linear infinite; margin: 0 auto 14px; }
@keyframes ordspin { to { transform: rotate(360deg); } }
.ord-licence { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.1rem; background: var(--slate-100);
    padding: 12px 16px; border-radius: var(--radius-sm, 8px); display: inline-block; margin: 8px 0; word-break: break-all; }

.ord-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }