/* *****************************************************

    VPS For Life — Order Form (standard_cart) styles
    File: templates/orderforms/standard_cart/css/custom.css

    HOW IT LOADS
    ------------
    orderforms/standard_cart/common.tpl already contains
    {assetExists file="custom.css"}, so WHMCS loads this file
    automatically with its own ?v= cache-busting hash.
    No template edit is required to enable it.

    RELATIONSHIP TO THE CLIENT AREA THEME
    -------------------------------------
    The design tokens (--vfl-*) are declared in
    templates/six/css/custom.css, which is loaded in <head> on
    every client-area page including the cart. Every value below
    is written as var(--token, fallback) so this sheet still
    renders correctly on its own.

    Country flags reuse the intl-tel-input sprite that already
    ships with the Six theme (templates/six/img/flags.png), so
    they cost no additional HTTP request.

    This file replaces the two unused sheets previously shipped in
    this folder (vps-theme.css, vps-orderform-redesign.css).

***************************************************** */

/* ============================================================
   1. SECTION HEADINGS ON THE CONFIGURATION STEP
   ============================================================ */
#order-standard_cart .sub-heading {
    margin: 34px 0 16px;
    border-bottom: 1px solid var(--vfl-border, #e3e8f0);
}

#order-standard_cart .sub-heading > span {
    display: inline-block;
    padding: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vfl-navy-900, #061424);
    background: none;
    border-bottom: 2px solid var(--vfl-blue-500, #2f6fed);
}

#order-standard_cart .product-info {
    padding: 18px 20px;
    background: var(--vfl-surface, #fff);
    border: 1px solid var(--vfl-border, #e3e8f0);
    border-left: 3px solid var(--vfl-blue-500, #2f6fed);
    border-radius: var(--vfl-radius-sm, 8px);
}

#order-standard_cart .product-info .product-title {
    margin-bottom: 4px;
    font-size: 17px;
    font-weight: 700;
    color: var(--vfl-navy-900, #061424);
}

/* ============================================================
   2. SHARED CARD SELECTOR SYSTEM
   Markup is generated at runtime by js/vps-cart.js.
   ============================================================ */

/* A native <select> is only hidden once its replacement exists,
   so the form still works when JavaScript is unavailable. */
.vps-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.vps-pick {
    margin-top: 10px;
}

.vps-grid {
    display: grid;
    gap: 10px;
}

.vps-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    font-weight: 400;
    background: var(--vfl-surface, #fff);
    border: 1px solid var(--vfl-border, #e3e8f0);
    border-radius: var(--vfl-radius-sm, 8px);
    cursor: pointer;
    transition: var(--vfl-transition, all .2s ease);
}

/* Must beat display:flex when the search filter hides a card. */
.vps-card[hidden] {
    display: none;
}

.vps-card:hover {
    border-color: var(--vfl-blue-400, #4d8dff);
    box-shadow: var(--vfl-shadow-sm, 0 2px 8px rgba(10, 31, 56, .06));
}

.vps-card:focus-within {
    outline: 2px solid var(--vfl-blue-500, #2f6fed);
    outline-offset: 2px;
}

.vps-card.is-selected {
    border-color: var(--vfl-blue-500, #2f6fed);
    background: rgba(47, 111, 237, .04);
    box-shadow: inset 0 0 0 1px var(--vfl-blue-500, #2f6fed);
}

/* If WHMCS's iCheck ever wraps one of our radios, neutralise the wrapper
   and its click-catching overlay so the card itself stays clickable. */
.vps-card > div[class*="icheckbox"],
.vps-card > div[class*="iradio"],
.vps-card .iCheck-helper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Radio stays in the accessibility tree; only removed visually. */
.vps-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.vps-card__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--vfl-text, #16233a);
}

.vps-card__note,
.vps-card__meta {
    font-size: 12px;
    font-weight: 400;
    color: var(--vfl-text-muted, #62728a);
}

.vps-card__price {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--vfl-text-muted, #62728a);
    white-space: nowrap;
}

.vps-card.is-selected .vps-card__price {
    color: var(--vfl-blue-500, #2f6fed);
}

.vps-empty {
    margin: 14px 0 0;
    padding: 18px;
    font-size: 14px;
    color: var(--vfl-text-muted, #62728a);
    text-align: center;
    background: var(--vfl-bg, #f4f7fb);
    border-radius: var(--vfl-radius-sm, 8px);
}

.vps-note {
    margin: 12px 0 0;
    font-size: 12.5px;
    color: var(--vfl-text-muted, #62728a);
}

/* ============================================================
   3. DATACENTER LOCATION
   ============================================================ */

/* ---- Region buttons: label above, continent outline below --- */
.vps-regions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.vps-region {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 13px 8px 11px;
    color: var(--vfl-text, #16233a);
    background: var(--vfl-surface, #fff);
    border: 1px solid var(--vfl-border, #e3e8f0);
    border-radius: var(--vfl-radius, 12px);
    cursor: pointer;
    transition: var(--vfl-transition, all .2s ease);
}

.vps-region__label {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.vps-region__map {
    display: block;
    width: 100%;
    height: 56px;
    background-color: currentColor;
    opacity: .38;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: opacity .2s ease;
}

.vps-region:hover {
    color: var(--vfl-blue-500, #2f6fed);
    border-color: var(--vfl-blue-400, #4d8dff);
    box-shadow: var(--vfl-shadow-sm, 0 2px 8px rgba(10, 31, 56, .06));
}

.vps-region:hover .vps-region__map {
    opacity: .6;
}

.vps-region.is-active {
    color: #fff;
    background: var(--vfl-navy-800, #0a1f38);
    border-color: var(--vfl-navy-800, #0a1f38);
}

.vps-region.is-active .vps-region__map {
    opacity: .9;
}

.vps-region:focus-visible {
    outline: 2px solid var(--vfl-blue-500, #2f6fed);
    outline-offset: 2px;
}

/* ---- Search ------------------------------------------------ */
.vps-search {
    position: relative;
    margin-bottom: 12px;
}

.vps-search .fa-search {
    position: absolute;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--vfl-text-muted, #62728a);
    pointer-events: none;
}

.vps-search .form-control {
    height: 42px;
    padding-left: 36px;
}

/* ---- Country cards: three columns -------------------------- */
.vps-grid--countries {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.vps-card--location {
    min-height: 50px;
    padding: 10px 12px;
    gap: 9px;
}

.vps-card--location .vps-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.vps-card--location .vps-card__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vps-card--location .vps-card__price {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
}

.vps-card__flag {
    flex: 0 0 auto;
    width: 20px;
    border-radius: 2px;
}

.vps-card__flag--blank {
    height: 15px;
    background: var(--vfl-border, #e3e8f0);
}

.vps-card__flag--any {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 16px;
    color: var(--vfl-blue-500, #2f6fed);
}

/* ---- "Any location" card ----------------------------------- */
.vps-card--any {
    margin-bottom: 12px;
    padding: 14px;
    border-style: dashed;
}

.vps-card--any.is-selected {
    border-style: solid;
}

.vps-card--any .vps-card__body {
    display: flex;
    flex-direction: column;
}

.vps-card--any .vps-card__name {
    font-size: 15px;
}

/* Selected marker on the larger cards. */
.vps-card--os,
.vps-card--cycle,
.vps-card--any {
    padding-right: 30px;
}

/* Drawn as an inline SVG rather than a Font Awesome glyph: the icon font
   is not guaranteed to be loaded at the moment the card is rendered, and a
   missing glyph shows up as an empty box. */
.vps-card--os.is-selected::after,
.vps-card--cycle.is-selected::after,
.vps-card--any.is-selected::after {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    content: "";
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%232f6fed'/%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6.3' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ============================================================
   4. OPERATING SYSTEM
   ============================================================ */

/* The OS option sits in a half-width Bootstrap column by default. The
   picker needs the full row, like the location option, so js/vps-cart.js
   tags the surrounding column. Doubled class instead of !important so it
   simply outranks .col-sm-6 without escalating. */
.vps-col-full.vps-col-full {
    width: 100%;
}

.vps-grid--os {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.vps-card--os {
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    min-height: 132px;
    padding: 20px 10px;
    text-align: center;
}

.vps-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

.vps-card__logo img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.vps-card--os .vps-card__name {
    font-size: 13.5px;
    line-height: 1.25;
}

.vps-card--os .vps-card__meta {
    font-size: 11.5px;
}

/* ============================================================
   5. BILLING CYCLE
   ============================================================ */
.vps-grid--cycle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vps-card--cycle {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 15px 18px;
}

.vps-card__term {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--vfl-text-muted, #62728a);
}

.vps-card.is-selected .vps-card__term {
    color: var(--vfl-blue-500, #2f6fed);
}

.vps-card__amount {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--vfl-navy-900, #061424);
}

.vps-card--cycle .vps-card__meta {
    font-size: 11.5px;
}

/* ============================================================
   6. RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
    .vps-regions {
        gap: 8px;
    }

    .vps-region {
        padding: 10px 6px 9px;
    }

    .vps-region__map {
        height: 42px;
    }

    .vps-grid--countries {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vps-card--cycle {
        padding: 12px;
    }

    .vps-card__amount {
        font-size: 15px;
    }
}

@media (max-width: 460px) {
    .vps-grid--countries {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vps-card,
    .vps-region,
    .vps-region__map {
        transition: none;
    }
}
