/* ==========================================================================
   Global Styles — Gerwyn Price Merchandise Platform
   ==========================================================================
   Imports brand tokens, sets base typography, global resets, utility classes,
   and Bootstrap overrides via custom properties.
   ========================================================================== */

/* --- Base reset and typography --- */

html {
    font-size: 16px;
    position: relative;
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--brand-font-body);
    font-weight: var(--brand-font-weight-normal);
    line-height: var(--brand-line-height-normal);
    color: var(--brand-text);
    background-color: var(--brand-surface-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--brand-font-heading);
    font-weight: var(--brand-font-weight-bold);
    line-height: var(--brand-line-height-tight);
    letter-spacing: var(--brand-letter-spacing-tight);
    color: var(--brand-text);
}

h1, .h1 {
    font-weight: var(--brand-font-weight-extrabold);
    text-transform: uppercase;
    letter-spacing: var(--brand-letter-spacing-wide);
}

h2, .h2 {
    font-weight: var(--brand-font-weight-bold);
}

a {
    color: var(--brand-accent);
    text-decoration: none;
    transition: color var(--brand-transition-fast);
}

a:hover {
    color: var(--brand-accent-hover);
}

img {
    max-width: 100%;
    height: auto;
}

/* --- Focus styles (accessibility) --- */

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

.btn:focus-visible,
.form-control:focus-visible,
.form-check-input:focus-visible {
    box-shadow: 0 0 0 0.15rem rgba(var(--brand-accent-rgb), 0.4);
}

/* --- Skip navigation (accessibility) --- */

.skip-nav {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: var(--brand-z-toast);
    padding: var(--brand-space-2) var(--brand-space-3);
    background-color: var(--brand-accent);
    color: var(--brand-text-on-accent);
    font-weight: var(--brand-font-weight-semibold);
    text-decoration: none;
    border-radius: 0 0 var(--brand-radius) 0;
    transition: top var(--brand-transition-fast);
}

.skip-nav:focus {
    top: 0;
    color: var(--brand-text-on-accent);
}

/* --- Bootstrap overrides via brand tokens --- */

.btn-primary {
    background-color: var(--brand-cta);
    border-color: var(--brand-cta);
    color: var(--brand-text-on-cta);
    font-family: var(--brand-font-heading);
    font-weight: var(--brand-font-weight-semibold);
    letter-spacing: var(--brand-letter-spacing-wide);
    text-transform: uppercase;
    border-radius: var(--brand-radius);
    transition: background-color var(--brand-transition-fast), border-color var(--brand-transition-fast);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: var(--brand-cta-hover);
    border-color: var(--brand-cta-hover);
    color: var(--brand-text-on-cta);
}

/* Override Bootstrap default :active / .active states (would otherwise show #0a58ca) */
.btn-primary:active,
.btn-primary.active,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary {
    background-color: var(--brand-cta-hover);
    border-color: var(--brand-cta-hover);
    color: var(--brand-text-on-cta);
    box-shadow: none;
}

.btn-primary:focus-visible,
.btn-primary:focus {
    outline: 2px solid var(--brand-cta);
    outline-offset: 2px;
}

.btn-outline-primary {
    color: var(--brand-cta);
    border-color: var(--brand-cta);
    font-family: var(--brand-font-heading);
    font-weight: var(--brand-font-weight-semibold);
    letter-spacing: var(--brand-letter-spacing-wide);
    text-transform: uppercase;
    border-radius: var(--brand-radius);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    background-color: var(--brand-cta);
    border-color: var(--brand-cta);
    color: var(--brand-text-on-cta);
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
    background-color: var(--brand-cta);
    border-color: var(--brand-cta);
    color: var(--brand-text-on-cta);
    box-shadow: none;
}

.btn-outline-light {
    border-color: var(--brand-text-light);
    color: var(--brand-text-light);
    font-family: var(--brand-font-heading);
    font-weight: var(--brand-font-weight-semibold);
    letter-spacing: var(--brand-letter-spacing-wide);
    text-transform: uppercase;
    border-radius: var(--brand-radius);
}

.btn-outline-light:hover,
.btn-outline-light:focus-visible {
    background-color: var(--brand-text-light);
    border-color: var(--brand-text-light);
    color: var(--brand-primary);
}

.btn-dark {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-text-light);
    font-family: var(--brand-font-heading);
    font-weight: var(--brand-font-weight-semibold);
    letter-spacing: var(--brand-letter-spacing-wide);
    text-transform: uppercase;
    border-radius: var(--brand-radius);
}

.btn-dark:hover,
.btn-dark:focus-visible {
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: var(--brand-text-light);
}

/* --- Card override --- */

.card {
    border: 1px solid var(--brand-border);
    border-radius: var(--brand-radius-lg);
    box-shadow: var(--brand-shadow-card);
    transition: box-shadow var(--brand-transition), transform var(--brand-transition);
}

.card:hover {
    box-shadow: var(--brand-shadow-lg);
    transform: translateY(-2px);
}

/* --- Form controls --- */

.form-control {
    border-color: var(--brand-border);
    border-radius: var(--brand-radius);
    font-family: var(--brand-font-body);
}

.form-control:focus {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 0.15rem rgba(var(--brand-accent-rgb), 0.25);
}

/* --- Badge overrides --- */

.badge {
    font-family: var(--brand-font-heading);
    font-weight: var(--brand-font-weight-semibold);
    letter-spacing: var(--brand-letter-spacing-wide);
    text-transform: uppercase;
    font-size: 0.7rem;
}

/* --- Utility classes --- */

.text-brand-accent {
    color: var(--brand-accent);
}

.text-brand-cta {
    color: var(--brand-cta);
}

.bg-brand-dark {
    background-color: var(--brand-surface-dark);
    color: var(--brand-text-light);
}

.bg-brand-dark-alt {
    background-color: var(--brand-surface-dark-alt);
    color: var(--brand-text-light);
}

.bg-brand-surface-alt {
    background-color: var(--brand-surface-alt);
}

.section-padding {
    padding-top: var(--brand-space-section);
    padding-bottom: var(--brand-space-section);
}

.section-heading {
    font-family: var(--brand-font-heading);
    font-weight: var(--brand-font-weight-extrabold);
    text-transform: uppercase;
    letter-spacing: var(--brand-letter-spacing-wide);
    margin-bottom: var(--brand-space-4);
    color: var(--brand-text-light);
}

/* --- Price styling --- */

.price-struck {
    text-decoration: line-through;
    color: var(--brand-text-muted);
}

/* --- Hidden utility --- */

.hidden {
    display: none;
}

/* --- Shared order-summary (used by Basket + Checkout sidebars) --- */

.order-summary {
    background-color: var(--brand-surface-dark-alt);
    border-radius: var(--brand-radius-lg);
    padding: var(--brand-space-4);
}

.order-summary__heading {
    font-family: var(--brand-font-heading);
    font-weight: var(--brand-font-weight-bold);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: var(--brand-letter-spacing-caps);
    color: var(--brand-text-light);
    margin: 0 0 var(--brand-space-3) 0;
}

.order-summary__lines {
    margin: 0;
}

.order-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--brand-space-1) 0;
    font-size: 0.9rem;
    margin: 0;
}

.order-summary__label {
    color: var(--brand-text-light-muted);
    font-weight: var(--brand-font-weight-medium);
    margin: 0;
}

.order-summary__value {
    color: var(--brand-text-light);
    font-weight: var(--brand-font-weight-medium);
    margin: 0;
    text-align: right;
}

.order-summary__row--discount .order-summary__value {
    color: var(--brand-success, #2ecc71);
}

.order-summary__row--total {
    border-top: 1px solid var(--brand-border-dark);
    margin-top: var(--brand-space-2);
    padding-top: var(--brand-space-3);
    font-size: 1.05rem;
}

.order-summary__row--total .order-summary__label,
.order-summary__row--total .order-summary__value {
    color: var(--brand-text-light);
    font-weight: var(--brand-font-weight-bold);
}

.order-summary__row--vat .order-summary__label,
.order-summary__row--vat .order-summary__value {
    color: var(--brand-text-light-muted);
    font-size: 0.78rem;
    opacity: 0.75;
}

.order-summary__vat-reg {
    font-size: 0.75rem;
    color: var(--brand-text-light-muted);
    opacity: 0.75;
    margin-top: var(--brand-space-4);
    text-align: right;
}

/* --- Shared promo-code form (Basket sidebar) --- */

.promo-code {
    margin-top: var(--brand-space-4);
}

.promo-code__label {
    display: block;
    font-family: var(--brand-font-heading);
    font-size: 0.75rem;
    font-weight: var(--brand-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--brand-letter-spacing-caps);
    color: var(--brand-text-light-muted);
    margin-bottom: var(--brand-space-1);
}

.promo-code__row {
    display: flex;
    gap: var(--brand-space-2);
    align-items: stretch;
}

.promo-code__input {
    flex: 1;
    background-color: var(--brand-surface-dark-alt);
    border: 1px solid var(--brand-border-dark);
    border-radius: var(--brand-radius-sm);
    color: var(--brand-text-light);
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    min-width: 0;
}

.promo-code__input::placeholder {
    color: var(--brand-text-light-muted);
}

.promo-code__input:focus {
    outline: none;
    border-color: var(--brand-accent);
}

.promo-code__apply,
.promo-code__remove {
    background-color: transparent;
    border: 1px solid var(--brand-accent);
    border-radius: var(--brand-radius-sm);
    color: var(--brand-accent);
    padding: 0.5rem 1rem;
    font-family: var(--brand-font-heading);
    font-weight: var(--brand-font-weight-bold);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: var(--brand-letter-spacing-caps);
    cursor: pointer;
    transition: background-color var(--brand-transition-fast), color var(--brand-transition-fast);
    white-space: nowrap;
}

.promo-code__apply:hover,
.promo-code__remove:hover {
    background-color: var(--brand-accent);
    color: var(--brand-primary, #000);
}

.promo-code__remove {
    border-color: var(--brand-border-dark);
    color: var(--brand-text-light-muted);
}

.promo-code__remove:hover {
    background-color: var(--brand-border-dark);
    color: var(--brand-text-light);
}

.promo-code__error {
    color: var(--brand-danger, #e94560);
    font-size: 0.8rem;
    margin-top: var(--brand-space-2);
}

/* --- Shared quantity stepper (PDP + similar) --- */

.qty-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--brand-border-dark);
    border-radius: var(--brand-radius-sm);
    overflow: hidden;
    background-color: var(--brand-surface-dark-alt);
}

.qty-stepper__btn {
    background-color: var(--brand-surface-dark-alt);
    border: none;
    color: var(--brand-text-light);
    width: 36px;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--brand-transition-fast), color var(--brand-transition-fast);
    padding: 0;
}

.qty-stepper__btn:hover:not(:disabled) {
    background-color: var(--brand-surface-dark);
    color: var(--brand-accent);
}

.qty-stepper__btn:disabled {
    color: var(--brand-text-light-muted);
    cursor: not-allowed;
    opacity: 0.5;
}

.qty-stepper__value {
    background-color: var(--brand-surface-dark-alt);
    border: none;
    border-left: 1px solid var(--brand-border-dark);
    border-right: 1px solid var(--brand-border-dark);
    color: var(--brand-text-light);
    text-align: center;
    width: 48px;
    font-family: var(--brand-font-heading);
    font-weight: var(--brand-font-weight-medium);
    font-size: 0.95rem;
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}

.qty-stepper__value::-webkit-outer-spin-button,
.qty-stepper__value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.qty-stepper__value:focus {
    outline: none;
}

/* --- Trust block (shared partial) --- */

.trust-block {
    margin-top: var(--brand-space-4);
}

.trust-block__list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--brand-space-2);
}

.trust-block__item {
    display: flex;
    align-items: center;
    gap: var(--brand-space-2);
    color: var(--brand-text-light-muted);
    font-size: 0.85rem;
}

.trust-block__icon {
    color: var(--brand-accent);
    font-size: 1rem;
    line-height: 1;
}

/* --- Delivery region selector (used in basket sidebar) --- */

.delivery-region {
    margin: 0 0 var(--brand-space-4) 0;
}

.delivery-region__fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.delivery-region__legend {
    font-family: var(--brand-font-heading);
    font-weight: var(--brand-font-weight-bold);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: var(--brand-letter-spacing-caps);
    color: var(--brand-text-light);
    margin-bottom: var(--brand-space-3);
    padding: 0;
}

.delivery-region__option {
    display: inline-flex;
    align-items: center;
    gap: var(--brand-space-2);
    margin-right: var(--brand-space-4);
    margin-bottom: var(--brand-space-2);
    color: var(--brand-text-light);
    font-size: 0.9rem;
    cursor: pointer;
}

.delivery-region__option:last-child {
    margin-right: 0;
}

.delivery-region__radio {
    accent-color: var(--brand-accent);
    width: 1rem;
    height: 1rem;
    margin: 0;
}

.delivery-region__label {
    line-height: 1;
}