/*
  Modern theme overrides — layered on top of the existing Smash/Bootstrap
  template CSS (default.css / style.css) without rewriting page markup.
  Loaded last so these rules win.
*/

:root {
    /* Matches the VLIST logo's coral-red rocket/wordmark. */
    --accent: #f0503d;
    --accent-dark: #c43d2c;
    --ink: #14161a;
    --muted: #5b616e;
    --surface: #ffffff;
    --surface-alt: #f6f7fb;
    --border: #d7dae1;
    --radius: 14px;
    --radius-sm: 8px;
    --shadow: 0 10px 30px rgba(20, 22, 26, 0.08);
    --shadow-lg: 0 20px 45px rgba(20, 22, 26, 0.12);
}

/* Bootstrap 4's .container caps at 1140px even on very wide screens;
   matches Bootstrap 5's now-standard wider container instead. */
@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

body {
    color: var(--ink);
    background-color: var(--surface);
    font-family: 'Inter', 'Poppins', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.title, .sub-title,
.vcard-title, .card-title,
.checkout-section-title, .checkout-price-main {
    font-family: 'Space Grotesk', 'Poppins', sans-serif;
    color: var(--ink);
    letter-spacing: -0.01em;
}

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

/* ---------- Header / navbar ---------- */

.navbar-area {
    padding: 0;
    background: transparent;
}

.navbar-area.sticky {
    position: fixed;
    top: 0;
    background-color: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: var(--shadow);
    border-bottom: 1px solid var(--border);
}

.navbar-area .navbar {
    padding: 14px 0;
}

.navbar-area .navbar .navbar-brand img {
    width: auto;
    height: 48px;
}

.navbar-area .navbar .navbar-nav .nav-item a {
    color: var(--ink) !important;
    opacity: 0.72;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    padding: 10px 0;
}

.navbar-area .navbar .navbar-nav .nav-item.active > a,
.navbar-area .navbar .navbar-nav .nav-item:hover > a {
    opacity: 1;
    color: var(--accent) !important;
}

.navbar-area .navbar .navbar-nav .nav-item a::before {
    background: var(--accent) !important;
    height: 2px !important;
    bottom: -2px !important;
}

.navbar-area .navbar .navbar-btn li a.solid {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 10px 20px;
}

.navbar-area .navbar .navbar-btn li a.solid:hover {
    background-color: var(--accent-dark) !important;
    border-color: var(--accent-dark) !important;
    color: #fff !important;
}

/* content sits under the fixed header (header is ~78px tall: 14px*2
   padding + 48px logo + 1px border) */
body {
    padding-top: 80px;
}

/* ---------- Buttons ---------- */

.main-btn,
.btn-success,
.btn-primary {
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.btn-success {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}

.btn-success:hover {
    background-color: var(--accent-dark) !important;
    border-color: var(--accent-dark) !important;
    transform: translateY(-1px);
}

/* ---------- Cards / pricing ----------
   Scoped to .card_styl (the pricing cards) rather than the bare
   Bootstrap .card class, which is also reused by unrelated components
   (e.g. the FAQ accordion) that shouldn't get hover-lift/shadow. */

.card_styl {
    position: relative;
    cursor: pointer;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* No overflow:hidden here on purpose -- clipping the whole card would
       silently cut off any content (e.g. a growing sample-files list)
       that ends up taller than expected. The image below gets its own
       matching top corners instead, so it still looks clipped without
       putting the rest of the card at risk. */
}

/* Pricing grid only -- these cards are repeated tiles in a wrapping row
   and should line up edge-to-edge with equal height, unlike the
   checkout page's cards (different content in different columns, where
   forcing equal height previously caused a card to visibly overflow
   its own box). Scoped to #pricing so it can't leak onto payment.php. */
#pricing .pricing-col {
    margin-bottom: 24px;
}

#pricing .card_styl {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#pricing .card_styl .card-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

#pricing .card_styl .price {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent);
}

.card_styl:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg) !important;
}

.card_styl.card_styl-featured {
    border-color: var(--accent) !important;
    box-shadow: var(--shadow-lg) !important;
}

.card-img {
    border-radius: 0 !important;
    height: 240px;
    object-fit: fill;
    width: 100%;
}

.card_styl .card-footer {
    border-radius: 0 !important;
}

.badge-corner {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 0;
}

.badge-soft {
    display: inline-block;
    background: var(--surface-alt);
    color: var(--ink);
    border-radius: 6px;
    padding: 1px 8px;
    font-weight: 600;
}

.badge-soft-accent {
    background: rgba(240, 80, 61, 0.1);
    color: var(--accent-dark);
}

/* ---------- FAQ ----------

   Native <details>/<summary>, so open/close needs no JavaScript and the
   keyboard and screen-reader behaviour comes for free. The default
   disclosure triangle is removed and replaced with our own marker. */

.faq-area {
    padding: 90px 0;
    background: var(--surface);
}

.faq-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
    gap: 56px;
    align-items: start;
    max-width: 1080px;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .faq-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }
}

/* --- left column --- */

.faq-aside {
    position: sticky;
    top: 110px;
}

@media (max-width: 991px) {
    .faq-aside {
        position: static;
    }
}

.faq-aside .sub-title {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(240, 80, 61, 0.1);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.faq-aside .title {
    font-size: 40px;
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 18px;
}

@media (max-width: 575px) {
    .faq-aside .title {
        font-size: 30px;
    }

    .faq-aside .title br {
        display: none;
    }
}

.faq-lead {
    max-width: 42ch;
    margin-bottom: 26px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
}

.faq-ask {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: inherit;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.faq-ask:hover {
    border-color: rgba(240, 80, 61, 0.45);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
}

.faq-ask-icon {
    flex: 0 0 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(240, 80, 61, 0.1);
    color: var(--accent);
    font-size: 18px;
}

.faq-ask-body {
    flex: 1;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
}

.faq-ask-body strong {
    display: block;
    color: var(--ink);
    font-size: 15px;
    font-weight: 650;
}

.faq-ask-arrow {
    color: var(--accent);
    transition: transform 0.15s ease;
}

.faq-ask:hover .faq-ask-arrow {
    transform: translateX(3px);
}

/* --- right column: the questions --- */

.faq-list {
    display: grid;
    gap: 12px;
}

.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.faq-item:hover {
    border-color: rgba(240, 80, 61, 0.35);
}

.faq-item[open] {
    border-color: rgba(240, 80, 61, 0.45);
    box-shadow: var(--shadow);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    cursor: pointer;
    font-family: 'Space Grotesk', 'Poppins', sans-serif;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.4;
    color: var(--ink);
    list-style: none;
}

/* kill the native triangle in every engine */
.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::marker {
    content: "";
}

.faq-item summary:focus-visible {
    outline: 3px solid rgba(240, 80, 61, 0.35);
    outline-offset: -3px;
}

@media (max-width: 575px) {
    .faq-item summary {
        padding: 17px 18px;
        font-size: 16px;
    }
}

/* our own +/- marker */
.faq-marker {
    position: relative;
    flex: 0 0 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(240, 80, 61, 0.1);
    transition: background-color 0.15s ease, transform 0.2s ease;
}

.faq-marker::before,
.faq-marker::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.faq-marker::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-marker {
    background: var(--accent);
    transform: rotate(180deg);
}

.faq-item[open] .faq-marker::before,
.faq-item[open] .faq-marker::after {
    background: #fff;
}

/* the vertical stroke folds away, leaving a minus */
.faq-item[open] .faq-marker::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg);
}

.faq-answer {
    padding: 0 22px 22px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

@media (max-width: 575px) {
    .faq-answer {
        padding: 0 18px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-item,
    .faq-ask,
    .faq-ask-arrow,
    .faq-marker,
    .faq-marker::before,
    .faq-marker::after {
        transition: none;
    }

    .faq-ask:hover {
        transform: none;
    }
}

/* ---------- Section titles ---------- */

.section-title .title {
    font-weight: 700;
}

.section-title .text {
    color: var(--muted);
}

/* ---------- Checkout page ---------- */

.checkout-area {
    padding-top: 40px;
    padding-bottom: 60px;
    background-color: var(--surface-alt);
}

.checkout-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 14px;
    color: var(--muted);
}

.checkout-back-link:hover {
    color: var(--accent);
    text-decoration: none;
}

/* Plain CSS grid, not Bootstrap's .row/.col-* -- explicit two columns
   on desktop, one column on mobile/tablet, full control over both. */
.checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr);
    align-items: stretch;
    gap: 24px;
}

/* Percentage heights (height:100%) chained through grid -> form -> card
   depend on every level reporting a "definite" height, which is
   inconsistent across browsers for stretched grid items. flex-grow
   doesn't have that problem: each grid item becomes its own flex
   container, and its single child just grows to fill whatever space
   the grid stretch already gave it -- no percentage-height chain. */
.checkout-col-summary,
.checkout-col-payment {
    display: flex;
    flex-direction: column;
}

.checkout-col-summary > .vcard,
.checkout-col-payment > form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

@media (max-width: 991px) {
    .checkout-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A self-contained card component (not Bootstrap's .card/.card-body,
   which carry unrelated flex/padding rules that were interacting badly
   with content here) -- plain flex column, height always follows its
   own content with no external influence. */
.vcard {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.vcard-img {
    display: block;
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: var(--radius) var(--radius) 0 0;
}

.vcard-body {
    padding: 28px;
}

.vcard-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px;
}

.vcard-subtitle {
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 12px;
}

.vcard-text {
    margin: 0;
}

.checkout-section-title {
    font-weight: 700;
    margin-bottom: 18px;
}

.checkout-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 480px) {
    .checkout-field-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.checkout-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.checkout-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 16px 0;
}

.checkout-price-main {
    font-size: 28px;
    font-weight: 700;
    color: var(--accent);
}

.checkout-price-alt {
    color: var(--muted);
}

.checkout-samples {
    margin: 16px 0;
    padding: 14px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.sample-download-list {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sample-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    transition: background 0.15s ease, color 0.15s ease;
}

.sample-download-btn:hover {
    background: var(--accent);
    color: #fff;
    text-decoration: none;
}

.checkout-upsell-horizontal {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    margin-top: auto;
    padding: 20px 28px;
    background: rgba(240, 80, 61, 0.05);
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius) !important;
}

.checkout-upsell-intro {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 0 0 200px;
}

.checkout-upsell-intro i {
    color: var(--accent);
    font-size: 20px;
    margin-top: 2px;
}

.checkout-upsell-intro p {
    margin: 0;
}

.checkout-upsell-features {
    flex: 1;
    min-width: 0;
    padding-left: 28px;
    border-left: 1px solid var(--border);
}

.feature-list-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
}

@media (max-width: 767px) {
    .checkout-upsell-horizontal {
        flex-direction: column;
        gap: 16px;
    }

    .checkout-upsell-features {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--border);
        padding-top: 16px;
        width: 100%;
    }

    .feature-list-grid {
        grid-template-columns: 1fr;
    }
}

.feature-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.feature-list li {
    color: var(--muted);
    font-size: 14px;
}

.feature-list i {
    color: var(--accent);
    margin-right: 8px;
}

.feature-list-toggle {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
}

.feature-list-toggle .less-label {
    display: none;
}

.feature-list-toggle .more-label {
    display: inline;
}

.feature-list-toggle.expanded .less-label {
    display: inline;
}

.feature-list-toggle.expanded .more-label {
    display: none;
}

.checkout-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.checkout-trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
}

.checkout-trust-item i {
    color: var(--accent);
}

.checkout-trust-item a {
    color: var(--muted);
}

.checkout-trust-item a:hover {
    color: var(--accent);
}

.checkout-divider {
    margin: 24px 0;
    border-top: 1px solid var(--border);
}

.checkout-total {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 18px;
}

.payment-method-options {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.payment-method-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.payment-method-option:has(input:checked) {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(240, 80, 61, 0.12);
}

.payment-method-option input[type="radio"] {
    margin: 0 0 4px;
}

.payment-method-icon {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-method-icon img {
    max-height: 24px;
}

.payment-method-icon-lni {
    gap: 8px;
    font-size: 22px;
    color: var(--accent);
}

.payment-method-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

/* ---------- Tables (checkout / receipts) ---------- */

.table-bordered {
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.form-control {
    height: auto !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    background-color: var(--surface-alt) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
}

.form-control::placeholder {
    color: #9aa0ab;
}

.form-control:focus {
    background-color: var(--surface) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(240, 80, 61, 0.15) !important;
}

/* ---------- Contact section ---------- */

.contact-area {
    padding: 90px 0 100px;
    background:
        radial-gradient(900px 420px at 12% -10%, rgba(240, 80, 61, 0.08), transparent 60%),
        var(--surface-alt);
}

.contact-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
    gap: 48px;
    align-items: start;
    max-width: 1080px;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .contact-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }
}

/* --- left: who you're writing to --- */

.contact-aside {
    padding-top: 8px;
}

.contact-aside .sub-title {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(240, 80, 61, 0.1);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-aside .title {
    font-size: 40px;
    line-height: 1.15;
    font-weight: 700;
    margin-bottom: 18px;
}

@media (max-width: 575px) {
    .contact-aside .title {
        font-size: 30px;
    }

    .contact-aside .title br {
        display: none;
    }
}

.contact-lead {
    max-width: 44ch;
    margin-bottom: 30px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
}

.contact-points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
}

.contact-points li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.contact-points li:hover {
    border-color: rgba(240, 80, 61, 0.45);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.contact-point-icon {
    flex: 0 0 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(240, 80, 61, 0.1);
    color: var(--accent);
    font-size: 18px;
}

.contact-point-body {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}

.contact-point-body strong {
    display: block;
    margin-bottom: 2px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 650;
}

.contact-point-body a {
    font-weight: 600;
    word-break: break-word;
}

/* --- right: the form --- */

.contact-card {
    padding: 36px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

@media (max-width: 575px) {
    .contact-card {
        padding: 24px 20px;
    }
}

.contact-card-title {
    margin: 0 0 24px;
    font-size: 22px;
    font-weight: 700;
}

.cf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

@media (max-width: 575px) {
    .cf-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cf-field-full {
    grid-column: 1 / -1;
}

.cf-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cf-hint {
    margin-left: 6px;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.02em;
    text-transform: none;
    opacity: 0.8;
}

.cf-field input,
.cf-field textarea {
    width: 100%;
    padding: 13px 16px;
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.cf-field textarea {
    resize: vertical;
    min-height: 130px;
    line-height: 1.6;
}

.cf-field input::placeholder,
.cf-field textarea::placeholder {
    color: #9aa0ad;
}

.cf-field input:focus,
.cf-field textarea:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(240, 80, 61, 0.16);
}

/* the arithmetic spam check, as one unit */

.cf-captcha {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 16px;
    background: var(--surface-alt);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}

.cf-sum {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

.cf-captcha input {
    width: 92px;
    padding: 9px 12px;
    background: var(--surface);
    text-align: center;
    font-weight: 700;
}

/* --- actions --- */

.cf-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 26px;
}

.cf-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(240, 80, 61, 0.28);
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.cf-submit:hover {
    background: var(--accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(240, 80, 61, 0.34);
}

.cf-submit:active {
    transform: translateY(0);
}

.cf-submit:focus-visible {
    outline: 3px solid rgba(240, 80, 61, 0.35);
    outline-offset: 2px;
}

.cf-submit i {
    font-size: 15px;
    transition: transform 0.15s ease;
}

.cf-submit:hover i {
    transform: translateX(3px);
}

/* status line -- jQuery adds .success / .error */

.form-message {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.form-message:empty {
    display: none;
}

.form-message.success,
.form-message.error {
    padding: 10px 16px;
    border-radius: 999px;
}

.form-message.success {
    background: rgba(32, 150, 96, 0.12);
    color: #1b7a4f;
}

.form-message.error {
    background: rgba(240, 80, 61, 0.12);
    color: var(--accent-dark);
}

@media (prefers-reduced-motion: reduce) {
    .contact-points li,
    .cf-submit,
    .cf-submit i {
        transition: none;
    }

    .contact-points li:hover,
    .cf-submit:hover {
        transform: none;
    }
}

.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Mobile ---------- */

@media (max-width: 576px) {
    body {
        padding-top: 68px;
    }

    .navbar-area .navbar {
        padding: 10px 0;
    }

    .navbar-area .navbar .navbar-brand img {
        height: 36px;
    }

    .checkout-area {
        padding-top: 24px;
    }

    .vcard-body {
        padding: 18px;
    }

    .checkout-price-main {
        font-size: 22px;
    }

    .checkout-total {
        font-size: 15px;
    }

    .payment-method-options {
        gap: 8px;
    }

    .payment-method-option {
        padding: 12px 6px;
    }

    .payment-method-label {
        font-size: 12px;
        text-align: center;
    }

    .checkout-trust {
        gap: 10px 16px;
        font-size: 12px;
    }

    .checkout-trust-item {
        font-size: 12px;
    }
}