/*
 * CTG look for the shop: the same navy, dot pattern, sky-blue accent and Figtree font as
 * CTG Grading's new pages and the CTG Auction site (collecto-auction resources/css/app.css).
 * Dark only, like those two sites.
 *
 * This file only changes colours, fonts, borders and corners. The page layout stays as it is.
 * It loads after the other shop stylesheets; "html body" in front of a selector makes it win
 * over the page stylesheets that are linked further down inside the page.
 */
@import url('../fonts/figtree/figtree.css');

:root {
    --ctg-bg: #0f1626;
    --ctg-surface: rgba(23, 32, 54, 0.88);
    --ctg-surface-solid: #172036;
    --ctg-surface-2: rgba(36, 48, 74, 0.92);
    --ctg-line: rgba(255, 255, 255, 0.08);
    --ctg-line-strong: rgba(255, 255, 255, 0.18);
    --ctg-text: #f4f4f5;
    --ctg-muted: #a1a1aa;
    --ctg-dim: #8b8b94;
    --ctg-accent: #7dd3fc;
    --ctg-accent-hover: #bae6fd;
    --ctg-on-accent: #0b1220;
    --ctg-radius: 6px;
    --ctg-ok: #4ade80;
    --ctg-bad: #f87171;
    --ctg-warn: #fbbf24;
    --ctg-font: 'Figtree', 'Apple SD Gothic Neo', 'Malgun Gothic', ui-sans-serif, system-ui, sans-serif;

    /* Old shop colours, pointed at the new ones for anything not restyled below */
    --palette-primary: var(--ctg-accent);
    --palette-border: var(--ctg-line-strong);
    --palette-background: var(--ctg-bg);
    --palette-foreground: var(--ctg-surface-solid);
    --palette-copy: var(--ctg-text);
    --main-color-transparent-10: rgba(125, 211, 252, 0.08);

    /* Bootstrap 5 */
    --bs-body-bg: var(--ctg-bg);
    --bs-body-color: var(--ctg-text);
    --bs-border-color: var(--ctg-line-strong);
    --bs-link-color: var(--ctg-accent);
    --bs-link-hover-color: var(--ctg-accent-hover);
    --bs-emphasis-color: var(--ctg-text);
    --bs-secondary-color: var(--ctg-muted);
    color-scheme: dark;
}

/* ---------- Page ---------- */

html {
    background-color: var(--ctg-bg);
}

html body {
    margin: 0;
    background-color: var(--ctg-bg) !important;
    background-image:
        radial-gradient(circle, rgba(148, 163, 184, 0.16) 1.1px, transparent 1.6px),
        radial-gradient(circle, rgba(148, 163, 184, 0.07) 1px, transparent 1.5px) !important;
    background-size: 36px 36px, 36px 36px;
    background-position: 0 0, 18px 18px;
    background-attachment: fixed;
    color: var(--ctg-text);
    font-family: var(--ctg-font) !important;
    -webkit-font-smoothing: antialiased;
}

html body h1, html body h2, html body h3, html body h4, html body h5,
html body p, html body span, html body strong, html body td, html body th, html body li, html body label {
    word-break: keep-all;
    overflow-wrap: break-word;
}

html body :focus-visible {
    outline: 2px solid var(--ctg-accent);
    outline-offset: 2px;
}

html body a { color: var(--ctg-accent); }
html body a:hover { color: var(--ctg-accent-hover); text-decoration: none; }

html body hr { border-color: var(--ctg-line); opacity: 1; }
html body ::placeholder { color: var(--ctg-dim); }

/* ---------- Bootstrap pieces used around the shop ---------- */

html body .form-control,
html body .form-select,
html body select,
html body input[type="text"],
html body input[type="email"],
html body input[type="password"],
html body input[type="number"],
html body input[type="tel"],
html body textarea {
    background-color: var(--ctg-surface-2);
    border: 1px solid var(--ctg-line-strong);
    border-radius: var(--ctg-radius);
    color: var(--ctg-text);
}
html body .form-control:focus,
html body select:focus,
html body input:focus,
html body textarea:focus {
    background-color: var(--ctg-surface-2);
    border-color: var(--ctg-accent);
    color: var(--ctg-text);
    box-shadow: none;
    outline: none;
}
html body select option { background: var(--ctg-surface-solid); color: var(--ctg-text); }
html body input[type="checkbox"], html body input[type="radio"] { accent-color: var(--ctg-accent); }

html body .card {
    background: var(--ctg-surface);
    border: 1px solid var(--ctg-line);
    border-radius: var(--ctg-radius);
    color: var(--ctg-text);
}
html body .card-header {
    background: transparent;
    border-bottom: 1px solid var(--ctg-line);
    font-weight: 700;
}

html body .btn-primary {
    background: var(--ctg-accent) !important;
    border-color: var(--ctg-accent) !important;
    color: var(--ctg-on-accent) !important;
    border-radius: var(--ctg-radius) !important;
    font-weight: 700;
}
html body .btn-primary:hover { background: var(--ctg-accent-hover) !important; border-color: var(--ctg-accent-hover) !important; }
html body .btn-link { color: var(--ctg-accent); }

html body .dropdown-menu {
    background: var(--ctg-surface-solid);
    border: 1px solid var(--ctg-line-strong);
    border-radius: var(--ctg-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
html body .dropdown-item { color: var(--ctg-text); }
html body .dropdown-item:hover, html body .dropdown-item:focus,
html body .navigation-current-selected-locale { background-color: var(--ctg-surface-2) !important; color: var(--ctg-text); }

html body .table { color: var(--ctg-text); --bs-table-bg: transparent; --bs-table-color: var(--ctg-text); }
html body .table th, html body .table td { border-color: var(--ctg-line); }

html body .invalid-feedback, html body .text-danger { color: var(--ctg-bad) !important; }

/* Login / register pages (layouts/app) */
html body .navbar.bg-white,
html body .bg-white { background: var(--ctg-surface) !important; }
html body .navbar-light .navbar-brand,
html body .navbar-light .nav-link { color: var(--ctg-text); }
html body .navbar-light .nav-link:hover { color: var(--ctg-accent); }
html body .shadow-sm { box-shadow: none !important; border-bottom: 1px solid var(--ctg-line); }

/* ---------- Header (layouts/navigation) ---------- */

html body .navbar { color: var(--ctg-text); font-weight: 600; }

html body .navbar-row {
    background: var(--ctg-surface) !important;
    border-bottom: 1px solid var(--ctg-line);
    color: var(--ctg-text);
}

/* Wide screens: give the logo the room it needs so the name is not covered by the search box */
@media (min-width: 769px) {
    html body .navbar-row > .navbar-col-start { flex: 0 0 auto; width: auto; max-width: none; padding-right: 16px; }
    html body .navbar-row > .navbar-col-end { flex: 1 1 0; min-width: 0; max-width: none; }
}

html body .main-logo-container,
html body .main-logo-container:hover { align-items: center; color: var(--ctg-text); text-decoration: none; }
html body .main-logo { max-width: none; height: 28px; width: auto; }
html body .main-logo-text {
    margin-left: 10px;
    font-family: var(--ctg-font);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--ctg-text);
    letter-spacing: -0.01em;
}

html body .navigation-shopping-cart,
html body .navbar-user-dropdown-toggle,
html body #dropdownMenuButton {
    color: var(--ctg-text);
    font-weight: 600;
    background: transparent;
}
html body .navigation-item { border-radius: var(--ctg-radius); }
html body .navigation-item:hover { background-color: var(--ctg-surface-2); }
html body .navigation-item a:hover { color: var(--ctg-accent); }
html body .navigation-shopping-cart-header { color: var(--ctg-accent); font-size: 1.25rem; }
html body .navigation-shopping-cart-amount { color: var(--ctg-muted); }
html body .nav-language-flag { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }

/* Header login form */
html body .login-input {
    background-color: var(--ctg-surface-2) !important;
    border: 1px solid var(--ctg-line-strong);
    border-radius: var(--ctg-radius);
    color: var(--ctg-text);
    font-size: 0.95rem;
    padding-top: 6px;
    padding-bottom: 6px;
}
html body .login-input:focus-visible { border-color: var(--ctg-accent); outline: none; }

html body .login-input-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ctg-radius);
    padding: 6px 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
html body .button-login {
    background: var(--ctg-accent);
    border: 1px solid var(--ctg-accent);
    color: var(--ctg-on-accent);
}
html body .button-login:hover { background: var(--ctg-accent-hover); border-color: var(--ctg-accent-hover); color: var(--ctg-on-accent); }
html body .button-signup {
    background: transparent;
    border: 1px solid var(--ctg-line-strong);
    color: var(--ctg-text);
}
html body .button-signup:hover { background: var(--ctg-surface-2); color: var(--ctg-text); transform: none; box-shadow: none; }

/* Search box (select2) */
html body .select2-container--default .select2-selection--single,
html body .select2-selection {
    background-color: var(--ctg-surface-2) !important;
    border: 1px solid var(--ctg-line-strong) !important;
    border-radius: var(--ctg-radius) !important;
    color: var(--ctg-muted);
}
html body .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ctg-text); }
html body .select2-container--open .select2-selection { border-color: var(--ctg-accent) !important; }
html body .select2-dropdown {
    background: var(--ctg-surface-solid) !important;
    border: 1px solid var(--ctg-line-strong) !important;
    color: var(--ctg-text);
}
html body .select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--ctg-surface-2);
    border: 1px solid var(--ctg-line-strong);
    border-radius: var(--ctg-radius);
    color: var(--ctg-text);
}
html body .select2-container--default .select2-results__option--highlighted[aria-selected],
html body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--ctg-surface-2);
    color: var(--ctg-text);
}
html body .select2-results__option { color: var(--ctg-text); }
html body .select2-results__message { color: var(--ctg-muted); }
html body .search-bar-show-all-row { color: var(--ctg-accent); border-top: 1px solid var(--ctg-line); }
html body .search-bar-show-all-row:hover { background: var(--ctg-surface-2); }

/* ---------- Side menu (layouts/shop) ---------- */

html body .home-menu { border-right: 1px solid var(--ctg-line); }

html body .home-menu-button {
    background: var(--ctg-surface);
    border: 1px solid var(--ctg-line);
    border-radius: var(--ctg-radius);
    color: var(--ctg-text);
    box-shadow: none;
    font-weight: 700;
    font-size: 0.95rem;
}
html body .home-menu-button:hover {
    background: var(--ctg-surface-2);
    border-color: var(--ctg-accent);
    color: var(--ctg-text);
    box-shadow: none;
}
html body .home-menu-button.active {
    background: var(--ctg-surface-2);
    border-color: var(--ctg-line-strong);
    color: var(--ctg-accent);
}

html body .home-menu-subbutton {
    background: transparent;
    color: var(--ctg-muted);
    font-weight: 600;
    border-radius: var(--ctg-radius);
}
html body .home-menu-subbutton:hover,
html body .home-menu-subbutton.active { background: var(--ctg-surface-2); color: var(--ctg-text); }

html body .home-menu-langbutton {
    background: transparent;
    color: var(--ctg-muted);
    font-weight: 600;
    border-radius: var(--ctg-radius);
}
html body .home-menu-langbutton:hover { background: var(--ctg-surface-2); color: var(--ctg-accent); }

/* Set symbol box, like the set logos on CTG Grading's pop report */
html body .home-menu-set-icon,
html body .product-menu-set-icon {
    background: transparent;
    border: 1px solid var(--ctg-line-strong);
    outline: 0;
    border-radius: 4px;
    color: var(--ctg-dim);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.68rem;
}

/* ---------- Product lists (shop_products) ---------- */

html body .product-set-banner {
    background: var(--ctg-surface);
    border: 1px solid var(--ctg-line);
    border-radius: var(--ctg-radius);
    color: var(--ctg-text);
    font-weight: 800;
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
    letter-spacing: -0.01em;
    padding: 12px 20px;
    gap: 12px;
}
html body .home-hotitems-banner {
    background: var(--ctg-surface);
    border: 1px solid var(--ctg-line);
    border-radius: var(--ctg-radius);
    color: var(--ctg-text);
    font-weight: 800;
}

html body .product-filter-bar {
    background: var(--ctg-surface);
    border: 1px solid var(--ctg-line);
    border-radius: var(--ctg-radius);
    box-shadow: none;
    color: var(--ctg-muted);
    font-weight: 600;
}
html body .filter-group label { color: var(--ctg-muted); font-weight: 600; }
html body .filter-group select { padding: 5px 10px; }

html body .home-highlighted-card {
    background: var(--ctg-surface);
    border: 1px solid var(--ctg-line);
    border-radius: var(--ctg-radius);
    box-shadow: none;
    transition: border-color 0.15s ease;
}
html body .home-highlighted-card:hover {
    border-color: var(--ctg-accent);
    transform: none;
    box-shadow: none;
}
html body .home-highlighted-card-image-container { background-color: var(--ctg-surface-2); border-radius: var(--ctg-radius); }
html body .home-highlighted-card-language {
    color: var(--ctg-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
html body .home-highlighted-card-text a { color: var(--ctg-text); }
html body .home-highlighted-card-text a:hover .home-highlighted-card-name { color: var(--ctg-accent); }
html body .home-highlighted-card-name { color: var(--ctg-text); font-weight: 600; font-size: 0.78rem; margin-top: 8px; }
html body .home-highlighted-card-price { color: var(--ctg-text); font-weight: 800; font-size: 1rem; }
html body .home-highlighted-card-stock { color: var(--ctg-muted); font-weight: 600; }
html body .no-products { color: var(--ctg-muted); padding: 24px 0; }

/* Buttons: accent for the main action, outline for the second one, as on the auction site */
html body .add-to-cart-btn,
html body .cart-continue-btn {
    background: var(--ctg-accent) !important;
    color: var(--ctg-on-accent) !important;
    border: 0;
    border-radius: var(--ctg-radius);
    font-weight: 700;
    padding: 6px 14px;
    transition: background-color 0.15s ease;
}
html body .add-to-cart-btn:hover,
html body .cart-continue-btn:hover {
    background: var(--ctg-accent-hover) !important;
    color: var(--ctg-on-accent) !important;
    transform: none;
    box-shadow: none;
}
html body .add-to-cart-btn:disabled,
html body .cart-continue-btn:disabled {
    background: var(--ctg-surface-2) !important;
    color: var(--ctg-dim) !important;
    opacity: 1;
}

html body .view-product-btn {
    background: transparent;
    border: 1px solid var(--ctg-line-strong);
    border-radius: var(--ctg-radius);
    color: var(--ctg-text);
    font-weight: 700;
    padding: 5px 14px;
    text-align: center;
    transition: background-color 0.15s ease;
}
html body .view-product-btn:hover {
    background: var(--ctg-surface-2);
    color: var(--ctg-text);
    transform: none;
    box-shadow: none;
}

/* Sold out: faded card with a SOLD OUT badge */
html body .sold-out-overlay {
    background: rgba(15, 22, 38, 0.82);
    border: 1px solid var(--ctg-line-strong);
    color: var(--ctg-text);
    text-shadow: none;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}

/* Add to cart popup */
html body .custom-cart-modal { background-color: rgba(5, 8, 15, 0.7); }
html body .custom-cart-modal-content {
    background: var(--ctg-surface-solid);
    border: 1px solid var(--ctg-line-strong);
    border-radius: var(--ctg-radius);
    color: var(--ctg-text);
}
html body .custom-close-modal { color: var(--ctg-muted); }
html body .custom-close-modal:hover { color: var(--ctg-text); }

/* Pager */
html body .pagination li a,
html body .pagination li span {
    background: var(--ctg-surface);
    border: 1px solid var(--ctg-line-strong);
    border-radius: 4px;
    color: var(--ctg-text);
    font-weight: 600;
}
html body .pagination li a:hover { background: var(--ctg-surface-2); border-color: var(--ctg-accent); color: var(--ctg-text); }
html body .pagination li.active span { background: var(--ctg-text); border-color: var(--ctg-text); color: var(--ctg-bg); }
html body .pagination li.disabled span { background: transparent; border-color: var(--ctg-line); color: var(--ctg-dim); }
html body .page-link { background: var(--ctg-surface); border-color: var(--ctg-line-strong); color: var(--ctg-text); }
html body .page-item.active .page-link { background: var(--ctg-text); border-color: var(--ctg-text); color: var(--ctg-bg); }
html body .page-item.disabled .page-link { background: transparent; color: var(--ctg-dim); }
html body nav[role="navigation"] p, html body .pagination-wrapper p { color: var(--ctg-muted); }

/* ---------- Product page (view_product) ---------- */

html body .product-image-container { background-color: var(--ctg-surface-2); border-radius: var(--ctg-radius); }
html body .product-language {
    color: var(--ctg-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
html body .product-name { color: var(--ctg-text); font-weight: 800; letter-spacing: -0.02em; }
html body .product-price { color: var(--ctg-text); font-weight: 800; }
html body .product-stock { color: var(--ctg-muted); }
html body .product-description,
html body .product-disclaimer,
html body .disclaimer-section { color: var(--ctg-muted); }
html body .disclaimer-section { border-color: var(--ctg-line) !important; }
html body .product-disclaimer h1, html body .product-disclaimer h2, html body .product-disclaimer h3,
html body .product-disclaimer h4, html body .product-disclaimer h5,
html body .disclaimer-section h1, html body .disclaimer-section h2, html body .disclaimer-section h3,
html body .disclaimer-section h4, html body .disclaimer-section h5 { color: var(--ctg-text); font-weight: 700; }
html body .product-disclaimer strong, html body .disclaimer-section strong { color: var(--ctg-text); }

/* ---------- Cart (shopping_cart) ---------- */

html body .cart-header {
    background: var(--ctg-surface-solid) !important;
    border: 1px solid var(--ctg-line-strong);
    border-radius: var(--ctg-radius);
    color: var(--ctg-dim);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
html body .cart-item-row {
    background: var(--ctg-surface);
    border: 1px solid var(--ctg-line);
    border-radius: var(--ctg-radius);
    box-shadow: none;
    color: var(--ctg-text);
}
html body .cart-item-row:hover { box-shadow: none; border-color: var(--ctg-line-strong); transform: none; }
html body .cart-item-language { color: var(--ctg-muted); }
html body .cart-item-name a, html body .cart-item-name-text { color: var(--ctg-text); }
html body .cart-remove-btn {
    background: transparent !important;
    border: 1px solid var(--ctg-bad);
    border-radius: var(--ctg-radius);
    color: var(--ctg-bad);
    font-weight: 700;
}
html body .cart-remove-btn:hover { background: rgba(248, 113, 113, 0.12) !important; }
html body .cart-menu {
    background: var(--ctg-surface-solid);
    border-top: 1px solid var(--ctg-line-strong);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
    color: var(--ctg-text);
}
html body .cart-menu-section h3,
html body .cart-menu-please-log-in,
html body .cart-menu-empty { color: var(--ctg-text); }
html body .cart-stock-warning {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid var(--ctg-warn);
    border-radius: var(--ctg-radius);
    box-shadow: none;
    color: var(--ctg-warn);
}
html body .order-pending { background-color: rgba(248, 113, 113, 0.08); border-left-color: var(--ctg-bad); }
html body .spinner { border-color: var(--ctg-line-strong); border-top-color: var(--ctg-accent); }

/* ---------- Staff order pages (view_orders.css) ---------- */

html body .view-order-table,
html body .view-orders-table {
    background: var(--ctg-surface);
    border: 1px solid var(--ctg-line);
    border-radius: var(--ctg-radius);
    color: var(--ctg-text);
}
html body .view-order-table th,
html body .view-orders-table th {
    background: var(--ctg-surface-solid);
    border-bottom: 1px solid var(--ctg-line-strong);
    color: var(--ctg-dim);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
html body .view-order-table td,
html body .view-orders-table td { border-bottom: 1px solid var(--ctg-line); }
html body .view-order-row:hover,
html body .view-orders-row:hover { background-color: var(--ctg-surface-2); }
html body .view-orders-row-pending { background-color: rgba(248, 113, 113, 0.06); border-left-color: var(--ctg-bad); }
html body .view-order-language { color: var(--ctg-muted); }

html body .view-order-btn-primary,
html body .view-orders-btn-primary {
    background: var(--ctg-accent);
    color: var(--ctg-on-accent);
    border-radius: var(--ctg-radius);
    font-weight: 700;
}
html body .view-order-btn-primary:hover,
html body .view-orders-btn-primary:hover { background: var(--ctg-accent-hover); color: var(--ctg-on-accent); }
html body .view-order-btn-secondary,
html body .view-orders-btn-secondary {
    background: transparent;
    border: 1px solid var(--ctg-line-strong);
    color: var(--ctg-text);
    border-radius: var(--ctg-radius);
    font-weight: 700;
}
html body .view-order-btn-secondary:hover,
html body .view-orders-btn-secondary:hover { background: var(--ctg-surface-2); color: var(--ctg-text); }
html body .view-order-btn-danger {
    background: transparent;
    border: 1px solid var(--ctg-bad);
    color: var(--ctg-bad);
    border-radius: var(--ctg-radius);
    font-weight: 700;
}
html body .view-order-btn-danger:hover { background: rgba(248, 113, 113, 0.12); }

/* Status pills, like .ctg-badge on the auction site */
html body .status-badge { background: transparent; border: 1px solid var(--ctg-line-strong); border-radius: 999px; font-weight: 700; }
html body .status-pending { color: var(--ctg-warn); border-color: var(--ctg-warn); background: transparent; }
html body .status-completed { color: var(--ctg-ok); border-color: var(--ctg-ok); background: transparent; }
html body .status-cancelled { color: var(--ctg-muted); border-color: var(--ctg-line-strong); background: transparent; }

/* ---------- Pop-up messages (flash_popup) ---------- */

html body .flash-alert {
    background: var(--ctg-surface-solid);
    border: 1px solid var(--ctg-bad);
    border-radius: var(--ctg-radius);
    color: var(--ctg-bad);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
html body .flash-alert.success { background: var(--ctg-surface-solid); border-color: var(--ctg-ok); color: var(--ctg-ok); }
html body .flash-alert.error { background: var(--ctg-surface-solid); border-color: var(--ctg-bad); color: var(--ctg-bad); }
html body #flash-alert-close { color: inherit; }

/* ---------- Phones ---------- */

@media (max-width: 768px) {
    html body .hamburger-menu { color: var(--ctg-text) !important; }
    html body .hamburger-menu-close { color: var(--ctg-text); }
    html body .navigation-menu {
        background: var(--ctg-bg);
        border: 0;
        border-left: 1px solid var(--ctg-line);
    }
    html body .navigation-item a { color: var(--ctg-text) !important; }
    /* Login fields stack inside the phone menu */
    html body .navbar-login-form { flex-direction: column; width: 100%; padding: 16px; gap: 10px; }
    html body .navbar-login-form .login-input { width: 100%; }
}