/* ==========================================================================
   OwOCloud — order form skin
   --------------------------------------------------------------------------
   The order form ships with a complete Bootstrap 3 stylesheet of its own
   (all.min.css + style.css), and checkout.tpl carries the OwOCloud checkout
   customisations, so that markup is kept as-is. This file is loaded after it
   and re-points the palette at the client-area tokens: the same surfaces,
   hairlines and single accent, plus the light theme.

   It restates the tokens rather than importing the client-area sheet, because
   the cart is rendered outside the client area and must not depend on assets
   the cart page does not link.
   ========================================================================== */

:root {
    color-scheme: dark;

    --owo-bg: #05070f;
    --owo-bg-2: #080c16;
    --owo-panel: #0b101d;
    --owo-panel-2: #0e1424;
    --owo-panel-3: #121a2c;
    --owo-line: rgba(255, 255, 255, .09);
    --owo-line-2: rgba(255, 255, 255, .16);
    --owo-text: #dfe7f2;
    --owo-text-strong: #fff;
    --owo-muted: #909fb4;
    --owo-faint: #6b7889;
    --owo-accent: #fd75b5;
    --owo-accent-hover: #ff92c6;
    --owo-accent-ink: #24071a;
    --owo-accent-wash: rgba(253, 117, 181, .12);
    --owo-ok: #4ec98a;
    --owo-warn: #e0a94a;
    --owo-danger: #ef6a5f;
    --owo-rad: 10px;
    --owo-rad-sm: 6px;
    --owo-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Roboto, sans-serif;
    --owo-mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

html[data-theme="light"] {
    color-scheme: light;

    --owo-bg: #f6f8f7;
    --owo-bg-2: #eef2f0;
    --owo-panel: #fff;
    --owo-panel-2: #f4f7f5;
    --owo-panel-3: #eaeff0;
    --owo-line: rgba(16, 32, 26, .11);
    --owo-line-2: rgba(16, 32, 26, .18);
    --owo-text: #10201a;
    --owo-text-strong: #04120c;
    --owo-muted: #58685f;
    --owo-faint: #78877f;
    --owo-accent: #b81460;
    --owo-accent-hover: #9c1152;
    --owo-accent-ink: #fff;
    --owo-accent-wash: rgba(184, 20, 96, .08);
}

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */

body,
.order-form-container,
#order-standard_cart {
    background: var(--owo-bg);
    color: var(--owo-text);
    font-family: var(--owo-sans);
}

section#main-body { background-color: transparent; }

/* the cart's own header band */
.cart-body .header,
.order-form-container .header {
    background: var(--owo-panel);
    border-bottom: 1px solid var(--owo-line);
    color: var(--owo-text);
}

/* Panels and the order summary ---------------------------------------- */

.panel,
.order-summary,
.order-summary-list,
.summary-list-item,
.cart-summary,
#order-standard_cart .panel {
    background: var(--owo-panel);
    border-color: var(--owo-line);
    border-radius: var(--owo-rad);
    box-shadow: none;
    color: var(--owo-text);
}

.panel-heading,
#order-standard_cart .panel-heading {
    background: transparent;
    border-bottom: 1px solid var(--owo-line);
    color: var(--owo-text-strong);
}

.panel-title { color: var(--owo-text-strong); font-weight: 700; }

.summary-list-item {
    border-bottom: 1px solid var(--owo-line);
    padding: 12px 16px;
}

.summary-list-item .item-title,
.summary-list-item .item-price { color: var(--owo-text); }

.summary-list-item .item-price { font-family: var(--owo-mono); font-variant-numeric: tabular-nums; }

.panel-footer,
#order-standard_cart .panel-footer {
    background: transparent;
    border-top: 1px solid var(--owo-line);
    color: var(--owo-muted);
}

/* Product cards in the catalogue -------------------------------------- */

.product,
.product-group,
.product-content,
.product-card,
#order-standard_cart .product {
    background: var(--owo-panel);
    border: 1px solid var(--owo-line);
    border-radius: var(--owo-rad);
    box-shadow: none;
    color: var(--owo-text);
    transition: border-color .15s ease;
}

.product:hover { border-color: var(--owo-line-2); }

.product .product-title,
.product h3, .product h4 { color: var(--owo-text-strong); }

.product .product-desc,
.product p { color: var(--owo-muted); }

.product .price,
.product-price {
    color: var(--owo-text-strong);
    font-family: var(--owo-mono);
    font-variant-numeric: tabular-nums;
}

.product .price small { color: var(--owo-muted); }

/* Sidebar categories --------------------------------------------------- */

.sidebar,
#order-standard_cart .sidebar {
    background: transparent;
    border: 0;
}

.sidebar .list-group-item,
.sidebar .category {
    background: var(--owo-panel);
    border-color: var(--owo-line);
    color: var(--owo-text);
}

.sidebar .list-group-item:hover { background: var(--owo-panel-2); }

.sidebar .list-group-item.active,
.sidebar .category.active {
    background: var(--owo-accent-wash);
    border-left: 2px solid var(--owo-accent);
    color: var(--owo-text-strong);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], select, textarea {
    background: var(--owo-panel-2);
    border: 1px solid var(--owo-line);
    border-radius: var(--owo-rad-sm);
    box-shadow: none;
    color: var(--owo-text);
}

.form-control:focus,
input:focus, select:focus, textarea:focus {
    background: var(--owo-panel-2);
    border-color: var(--owo-line-2);
    box-shadow: none;
    color: var(--owo-text);
}

.form-control::placeholder { color: var(--owo-faint); }

label, .control-label { color: var(--owo-text); font-weight: 500; }

.help-block, .text-muted { color: var(--owo-muted) !important; }

/* the country / payment method rows in the summary */
.summary-list-item select,
#inputPaymentMethod { background: var(--owo-panel-2); color: var(--owo-text); }

/* --------------------------------------------------------------------------
   Buttons — the notched primary, matching the client area
   -------------------------------------------------------------------------- */

.btn-primary,
.btn-success,
.primary-solid-btn {
    background: var(--owo-accent);
    border: 1px solid var(--owo-accent);
    border-radius: 0;
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
    color: var(--owo-accent-ink);
    font-weight: 500;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-success:hover, .btn-success:focus, .btn-success:active,
.primary-solid-btn:hover, .primary-solid-btn:focus {
    background: var(--owo-accent-hover);
    border-color: var(--owo-accent-hover);
    color: var(--owo-accent-ink);
}

.btn-default, .btn-secondary, .outline-btn {
    background: transparent;
    border: 1px solid var(--owo-line-2);
    border-radius: var(--owo-rad-sm);
    color: var(--owo-text);
}

.btn-default:hover, .btn-default:focus, .outline-btn:hover {
    background: var(--owo-panel-2);
    border-color: var(--owo-accent);
    color: var(--owo-text-strong);
}

.btn-link { color: var(--owo-accent); }
.btn-link:hover, .btn-link:focus { color: var(--owo-accent-hover); text-decoration: none; }

.btn-danger { background: var(--owo-danger); border-color: var(--owo-danger); color: #fff; }

/* the "continue shopping" / step links */
.cart-actions-item { color: var(--owo-muted); }
.cart-actions-item:hover { color: var(--owo-accent); }

/* --------------------------------------------------------------------------
   Alerts and notices
   -------------------------------------------------------------------------- */

.alert {
    background: var(--owo-panel);
    border: 1px solid var(--owo-line);
    border-left: 3px solid var(--owo-muted);
    border-radius: var(--owo-rad-sm);
    color: var(--owo-text);
}

.alert-success { border-left-color: var(--owo-ok); }
.alert-warning { border-left-color: var(--owo-warn); }
.alert-danger  { border-left-color: var(--owo-danger); }
.alert-info    { border-left-color: var(--owo-accent); }

/* --------------------------------------------------------------------------
   Step indicator (catalogue → configure → checkout → complete)
   -------------------------------------------------------------------------- */

.order-step,
.step,
ul.order-steps li {
    color: var(--owo-muted);
}

.order-step.active, .step.active,
ul.order-steps li.active { color: var(--owo-text-strong); }

.order-step .number, .step .number {
    background: var(--owo-panel-2);
    border: 1px solid var(--owo-line);
    color: var(--owo-muted);
}

.order-step.active .number, .step.active .number {
    background: var(--owo-accent);
    border-color: var(--owo-accent);
    color: var(--owo-accent-ink);
}

/* --------------------------------------------------------------------------
   Domain search
   -------------------------------------------------------------------------- */

.domain-checker,
.domain-search-form {
    background: var(--owo-panel);
    border: 1px solid var(--owo-line);
    border-radius: var(--owo-rad);
}

.domain-checker-results .domain-available,
.domain-checker-results .domain-unavailable,
.domain-checker-results .domain-price {
    background: var(--owo-panel);
    border-color: var(--owo-line);
    color: var(--owo-text);
}

/* --------------------------------------------------------------------------
   Tables (addons, configurable options, renewal lists)
   -------------------------------------------------------------------------- */

table.table,
.table > thead > tr > th {
    border-color: var(--owo-line);
    color: var(--owo-text);
}

.table > thead > tr > th {
    background: var(--owo-panel-2);
    color: var(--owo-muted);
    font-size: 12.5px;
    font-weight: 500;
}

.table > tbody > tr > td { border-color: var(--owo-line); }

.table-striped > tbody > tr:nth-of-type(odd) { background: var(--owo-panel-2); }

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */

.modal-content {
    background: var(--owo-panel);
    border: 1px solid var(--owo-line);
    border-radius: var(--owo-rad);
    color: var(--owo-text);
}

.modal-header { border-bottom-color: var(--owo-line); }
.modal-footer { border-top-color: var(--owo-line); }
.modal-title { color: var(--owo-text-strong); }

.close { color: var(--owo-text); opacity: .55; text-shadow: none; }
.close:hover { color: var(--owo-text-strong); opacity: 1; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .order-summary { margin-top: 24px; }
    .summary-list-item { padding: 10px 12px; }
    .product .product-title { font-size: 17px; }
}