* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


:root {

    --navy: #07121d;
    --navy-2: #0b1c2b;

    --blue: #0b8cff;
    --blue-dark: #0675d8;

    --stripe: #635bff;

    --white: #ffffff;

    --text: #17202a;
    --muted: #6d7782;

    --border: #e3e8ed;

    --bg: #f5f7f9;

    --success: #13a86b;

}

/* =========================================
   FULL WIDTH CHECKOUT PAGE
   ========================================= */

/* Break out of the WordPress theme container */
.p1-checkout-page {
    width: 100vw;
    max-width: none !important;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Remove theme content width restrictions */
.p1-checkout-page,
.p1-checkout-page * {
    box-sizing: border-box;
}

.checkout-loader {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.82);
}

.checkout-loader[hidden] {
    display: none;
}

.checkout-loader img {
    width: 72px;
    height: 72px;
    animation: checkout-loader-spin 0.9s linear infinite;
}

@keyframes checkout-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Main checkout wrapper */
.p1-checkout-page .checkout-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* Hero section */
.p1-checkout-page .checkout-hero {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* Content below hero */
.p1-checkout-page .checkout-content {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    background: var(--bg);

    color: var(--text);

    line-height: 1.5;

}


button,
input {
    font: inherit;
}


/* ==========================
    HEADER
========================== */

.header {

    height: 78px;

    background: var(--navy);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 6%;

    color: white;

}


.logo {

    font-size: 22px;

    font-weight: 900;

    letter-spacing: -.8px;

}


.logo span {
    color: var(--blue);
}


.secure-header {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 13px;

    color: #cbd5df;

}


.secure-icon {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    background:
        rgba(11,140,255,.15);

    display: grid;

    place-items: center;

    color: #35a9ff;

}



/* ==========================
    HERO
========================== */

.hero {

    background:

        radial-gradient(
            circle at 75% 20%,
            rgba(11,140,255,.25),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #07121d,
            #0c2235
        );

    color: white;

    padding: 48px 20px 105px;

}


.hero-inner {

    max-width: 1160px;

    margin: auto;

}


.eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid
        rgba(255,255,255,.12);

    padding:
        7px 13px;

    border-radius: 50px;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .7px;

}


.eyebrow-dot {

    width: 7px;

    height: 7px;

    background: #27d48b;

    border-radius: 50%;

}


.hero h1 {

    font-size:
        clamp(34px, 5vw, 56px);

    line-height: 1.05;

    max-width: 720px;

    margin-top: 18px;

    letter-spacing: -2px;

}


.hero p {

    margin-top: 16px;

    max-width: 620px;

    color: #b9c8d5;

    font-size: 17px;

}



/* ==========================
    CHECKOUT
========================== */

.checkout-wrapper {

    max-width: 1160px;

    margin: -65px auto 80px;

    padding: 0 20px;

    position: relative;

}


.checkout-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(320px, .75fr);

    gap: 24px;

    align-items: start;

}


.card {

    background: white;

    border:
        1px solid
        var(--border);

    border-radius: 20px;

    box-shadow:
        0 20px 60px
        rgba(6,24,40,.08);

}



/* ==========================
    FORM CARD
========================== */

.form-card {
    padding: 34px;
}


.section {

    padding-bottom: 30px;

    margin-bottom: 30px;

    border-bottom:
        1px solid
        #edf0f3;

}


.section:last-child {

    border-bottom: 0;

    margin-bottom: 0;

    padding-bottom: 0;

}



.p1-section {

    padding-bottom: 30px;

    margin-bottom: 30px;

    border-bottom:
        1px solid
        #edf0f3;

}


.p1-section:last-child {

    border-bottom: 0;

    margin-bottom: 0;

    padding-bottom: 0;

}



/* ==========================
    SECTION TITLE
========================== */

.section-title {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

}


.number {

    width: 34px;

    height: 34px;

    border-radius: 10px;

    background: #eaf5ff;

    color: var(--blue);

    display: grid;

    place-items: center;

    font-size: 14px;

    font-weight: 800;

    flex-shrink: 0;

}


.section-title h2 {

    font-size: 19px;

    letter-spacing: -.3px;

}


.section-title p {

    color: var(--muted);

    font-size: 13px;

    margin-top: 2px;

}


.p1-section-title {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

}


.p1-number {

    width: 34px;

    height: 34px;

    border-radius: 10px;

    background: #eaf5ff;

    color: var(--blue);

    display: grid;

    place-items: center;

    font-size: 14px;

    font-weight: 800;

    flex-shrink: 0;

}


.p1-section-title h2 {

    font-size: 19px;

    letter-spacing: -.3px;

}


.p1-section-title p {

    color: var(--muted);

    font-size: 13px;

    margin-top: 2px;

}


/* =========================================
   OPTION CARDS
========================================= */

.p1-option-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 15px;

}


.p1-vehicle-options {

    grid-template-columns:
        repeat(3, 1fr);

}


.p1-option-card {

    position: relative;

    display: block;

    cursor: pointer;

}


.p1-option-card input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}


.p1-option-content {

    position: relative;

    min-height: 125px;

    padding: 20px;

    border:
        2px solid
        #e2e7eb;

    border-radius: 15px;

    background: #fff;

    display: flex;

    align-items: flex-start;

    gap: 14px;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease;

}


.p1-option-card:hover
.p1-option-content {

    border-color:
        #8fcaff;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 25px
        rgba(6,24,40,.07);

}


/* Selected */

.p1-option-card input:checked
+ .p1-option-content {

    border-color:
        #0b8cff;

    background:
        #f2f9ff;

    box-shadow:
        0 8px 25px
        rgba(11,140,255,.10);

}


/* Icon */

.p1-option-icon {

    width: 46px;

    height: 46px;

    flex-shrink: 0;

    border-radius: 12px;

    background:
        #eef7ff;

    display: grid;

    place-items: center;

    font-size: 22px;

}


/* Text */

.p1-option-info {

    padding-right: 20px;

}


.p1-option-info h3 {

    margin: 0;

    font-size: 15px;

    font-weight: 800;

    color:
        #17202a;

}


.p1-option-info p {

    margin:
        5px 0 0;

    font-size: 12px;

    line-height: 1.5;

    color:
        #6d7782;

}


/* Check */

.p1-option-check {

    position: absolute;

    top: 16px;

    right: 16px;

    width: 23px;

    height: 23px;

    border-radius: 50%;

    border:
        2px solid
        #d8dfe4;

    color: transparent;

    display: grid;

    place-items: center;

    font-size: 12px;

    font-weight: 900;

    transition: .2s;

}


.p1-option-card input:checked
+ .p1-option-content
.p1-option-check {

    background:
        #0b8cff;

    border-color:
        #0b8cff;

    color: #fff;

}


/* Mobile */

@media (max-width: 700px) {

    .p1-option-grid,
    .p1-vehicle-options {

        grid-template-columns: 1fr;

    }

}



/* ==========================
    FORM
========================== */

.form-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 17px;

}


.field {

    display: flex;

    flex-direction: column;

    gap: 7px;

}


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


label {

    font-size: 13px;

    font-weight: 700;

    color: #26313b;

}


input {

    width: 100%;

    height: 50px;

    border:
        1px solid
        #dce2e7;

    border-radius: 10px;

    padding: 0 14px;

    outline: none;

    color: #17202a;

    background: white;

    transition: .2s;

}


input::placeholder {
    color: #a5adb5;
}


input:focus {

    border-color:
        var(--blue);

    box-shadow:
        0 0 0 4px
        rgba(11,140,255,.10);

}



/* ==========================
    STRIPE BOX
========================== */

.stripe-payment-box {

    border:
        1px solid
        #dfe5ea;

    border-radius: 16px;

    padding: 20px;

    background: #fbfcfd;

    display: flex;

    align-items: flex-start;

    gap: 18px;

}


.stripe-logo {

    width: 52px;

    height: 52px;

    flex-shrink: 0;

    border-radius: 12px;

    background: #f0efff;

    display: grid;

    place-items: center;

}


.stripe-content h3 {

    font-size: 15px;

    font-weight: 800;

    margin-bottom: 5px;

}


.stripe-content p {

    color: #6d7782;

    font-size: 12px;

    line-height: 1.6;

}


.stripe-security {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 13px;

}


.stripe-security span {

    display: flex;

    align-items: center;

    gap: 5px;

    font-size: 11px;

    color: #56616b;

    font-weight: 600;

}


.security-check {

    width: 17px;

    height: 17px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #e5f8f0;

    color: #13a86b;

    font-size: 9px;

    font-weight: 900;

}



/* ==========================
    TERMS
========================== */

.agreement {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 18px;

    color: #66717b;

    font-size: 12px;

    cursor: pointer;

}


.agreement input {

    width: 17px;

    height: 17px;

    margin-top: 1px;

    flex-shrink: 0;

}


.agreement a {

    color: var(--blue);

    text-decoration: none;

    font-weight: 700;

}



/* ==========================
    STRIPE BUTTON
========================== */

.stripe-checkout-button {

    width: 100%;

    min-height: 58px;

    margin-top: 24px;

    padding: 0 20px;

    border: 0;

    border-radius: 12px;

    background:
        var(--stripe);

    color: white;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 12px 25px
        rgba(99,91,255,.22);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.stripe-checkout-button:hover {

    background: #5149e8;

    transform:
        translateY(-2px);

    box-shadow:
        0 16px 30px
        rgba(99,91,255,.30);

}


.stripe-checkout-button:active {

    transform:
        translateY(0);

}


.stripe-checkout-button:disabled {

    opacity: .65;

    cursor: wait;

    transform: none;

    box-shadow: none;

}


.stripe-checkout-button strong {

    font-size: 14px;

    white-space: nowrap;

}


.stripe-note {

    text-align: center;

    margin-top: 12px;

    color: #89939c;

    font-size: 11px;

}



/* ==========================
    SUMMARY
========================== */

.summary-card {

    position: sticky;

    top: 20px;

    overflow: hidden;

}


.summary-header {

    background: var(--navy);

    color: white;

    padding: 25px;

}


.summary-header small {

    color: #93a8b9;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-weight: 700;

}


.summary-header h2 {

    margin-top: 6px;

    font-size: 21px;

}


.summary-body {
    padding: 25px;
}



/* ==========================
    SELECTED MEMBERSHIP
========================== */

.selected-plan {

    padding: 18px;

    background:
        linear-gradient(
            135deg,
            #f6f9fb,
            #eef7ff
        );

    border:
        1px solid
        #e0e8ef;

    border-radius: 14px;

}


.membership-label {

    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .8px;

    color: var(--blue);

    margin-bottom: 6px;

}


.selected-top {

    display: flex;

    justify-content: space-between;

    gap: 15px;

}


.selected-plan-name {

    font-weight: 800;

    font-size: 15px;

}


.selected-vehicle {

    color: var(--muted);

    font-size: 12px;

    margin-top: 3px;

}


.selected-price {

    font-weight: 900;

    font-size: 21px;

    white-space: nowrap;

}



/* ==========================
    SUMMARY FEATURES
========================== */

.summary-features {

    margin-top: 20px;

    display: grid;

    gap: 11px;

}


.summary-feature {

    display: flex;

    gap: 9px;

    align-items: center;

    font-size: 12px;

    color: #56616b;

}


.check {

    width: 19px;

    height: 19px;

    background: #e5f8f0;

    color: var(--success);

    border-radius: 50%;

    display: grid;

    place-items: center;

    font-size: 11px;

    font-weight: 900;

    flex-shrink: 0;

}



/* ==========================
    PRICE
========================== */

.divider {

    height: 1px;

    background: #e6eaed;

    margin: 22px 0;

}


.price-line {

    display: flex;

    justify-content: space-between;

    margin-bottom: 11px;

    font-size: 13px;

    color: #64707a;

}


.price-line strong {
    color: var(--text);
}


.total {

    display: flex;

    justify-content: space-between;

    align-items: end;

}


.total-label {

    font-size: 14px;

    font-weight: 800;

}


.total-price {

    font-size: 27px;

    font-weight: 900;

    color: var(--navy);

}


.total-price span {

    font-size: 11px;

    font-weight: 500;

    color: var(--muted);

}



/* ==========================
    TRUST
========================== */

.trust {

    margin-top: 22px;

    display: grid;

    gap: 9px;

}


.trust-item {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 11px;

    color: #68737d;

}


.trust-icon {

    width: 22px;

    height: 22px;

    border-radius: 50%;

    background: #eef7ff;

    color: var(--blue);

    display: grid;

    place-items: center;

    font-size: 11px;

}



/* ==========================
    SUCCESS
========================== */

.success {

    display: none;

    text-align: center;

    padding: 60px 30px;

}


.success-icon {

    width: 70px;

    height: 70px;

    margin: auto;

    border-radius: 50%;

    background: #e5f8f0;

    color: var(--success);

    display: grid;

    place-items: center;

    font-size: 30px;

}


.success h2 {

    margin-top: 20px;

    font-size: 28px;

}


.success p {

    color: var(--muted);

    margin-top: 8px;

}



/* ==========================
    FOOTER
========================== */

footer {

    background: var(--navy);

    color: #8ea0af;

    text-align: center;

    padding: 30px 20px;

    font-size: 12px;

}


footer strong {
    color: white;
}



/* ==========================
    RESPONSIVE
========================== */

@media (max-width: 900px) {

    .checkout-grid {

        grid-template-columns: 1fr;

    }


    .summary-card {

        position: static;

        grid-row: 1;

    }


    .form-card {

        padding: 25px;

    }

}

.hidden {
    display: none;
}


@media (max-width: 600px) {

    .header {

        height: 68px;

        padding: 0 20px;

    }


    .secure-header span {
        display: none;
    }


    .hero {

        padding:
            35px 20px 95px;

    }


    .hero h1 {

        font-size: 38px;

    }


    .hero p {

        font-size: 14px;

    }


    .checkout-wrapper {

        margin-top: -60px;

        padding: 0 12px;

    }


    .form-grid {

        grid-template-columns: 1fr;

    }


    .field.full {

        grid-column: auto;

    }


    .form-card {

        padding: 20px;

    }


    .summary-body,
    .summary-header {

        padding: 20px;

    }


    .stripe-payment-box {

        padding: 16px;

        gap: 13px;

    }


    .stripe-logo {

        width: 44px;

        height: 44px;

    }


    .stripe-security {

        flex-direction: column;

        gap: 8px;

    }


    .stripe-checkout-button {

        flex-direction: column;

        justify-content: center;

        gap: 4px;

        padding: 13px 15px;

    }

}


.pf-hero{
  flex:1;
  padding:70px 20px 80px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.pf-card{
  width:100%;
  max-width:720px;
  background:#fff;
  color:#111;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 20px 55px rgba(0,0,0,.10);
  border:1px solid #e8e8e6;
}

.pf-top{
  text-align:center;
  padding:55px 30px 42px;
}

.pf-cross{
  width:76px;
  height:76px;
  margin:0 auto 25px;
  border-radius:50%;
  background:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#d9ff00;
  font-size:39px;
  font-weight:800;
}

.pf-eyebrow{
  color:#777;
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:12px;
}

.pf-message{
  max-width:530px;
  margin:auto;
  color:#707070;
  font-size:15px;
  line-height:1.7;
}

.pf-alert{
  margin:0 30px 25px;
  padding:18px 20px;
  background:#fffbe8;
  border-left:4px solid #d9ff00;
  color:#444;
  font-size:13px;
  line-height:1.6;
}

.pf-alert strong{
  display:block;
  color:#111;
  margin-bottom:4px;
}

.pf-summary{
  margin:0 30px 30px;
  border:1px solid #e5e5e5;
}

.pf-summary-title{
  background:#f5f5f3;
  padding:16px 20px;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.pf-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:17px 20px;
  border-top:1px solid #e5e5e5;
  font-size:14px;
}

.pf-row label{color:#777}
.pf-row strong{text-align:right}

.pf-actions{
  display:flex;
  gap:12px;
  padding:0 30px 35px;
}

.pf-btn{
  flex:1;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:4px;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  transition:.2s;
}

.pf-primary{
  background:#d9ff00;
  color:#111;
}

.pf-primary:hover{background:#c7eb00}

.pf-secondary{
  border:1px solid #ddd;
  color:#111;
  background:#fff;
}

.pf-secondary:hover{background:#f5f5f3}

.pf-help{
  text-align:center;
  padding:0 30px 35px;
  color:#777;
  font-size:13px;
}

.pf-help a{
  color:#111;
  font-weight:800;
  text-decoration:underline;
}

.pf-footer{
  text-align:center;
  padding:22px;
  color:#777;
  background:#fff;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
}

@media(max-width:600px){
  .pf-header{padding:0 20px}
  .pf-logo{font-size:18px}
  .pf-header-btn{padding:10px 14px;font-size:11px}
  .pf-hero{padding:35px 12px}
  .pf-top{padding:42px 20px 30px}
  .pf-summary,.pf-alert{margin-left:18px;margin-right:18px}
  .pf-actions{padding:0 18px 25px;flex-direction:column}
  .pf-help{padding:0 20px 28px}
  .pf-row{padding:14px}
}


.ps-hero{
  flex:1;
  padding:70px 20px 80px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f5f5f3;
}
.ps-card{
  width:100%;
  max-width:720px;
  background:#fff;
  color:#101820;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.ps-top{
  text-align:center;
  padding:55px 30px 42px;
}
.ps-check{
  width:76px;height:76px;
  margin:0 auto 25px;
  border-radius:50%;
  background:#d9ff00;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#111111;
  font-size:42px;
  font-weight:900;
}
.ps-eyebrow{
  color:#65717b;
  font-size:12px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:12px;
}

.ps-message{
  max-width:530px;
  margin:auto;
  color:#68737c;
  font-size:15px;
  line-height:1.7;
}
.ps-summary{
  margin:0 30px 30px;
  border:1px solid #e5e9ec;
}
.ps-summary-title{
  background:#f5f7f8;
  padding:16px 20px;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.ps-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:17px 20px;
  border-top:1px solid #e5e9ec;
  font-size:14px;
}
.ps-row label{color:#78838c}
.ps-row strong{text-align:right}
.ps-total{
  background:#101c25;
  color:#fff;
}
.ps-total label{color:#b8c0c5}
.ps-total strong{
  color:#d9ff00;
  font-size:20px;
}
.ps-actions{
  display:flex;
  gap:12px;
  padding:0 30px 35px;
}
.ps-btn{
  flex:1;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:4px;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  transition:.2s;
}
.ps-primary{
  background:#111111;
  color:#ffffff;
}
.ps-primary:hover{background:#b4d000}
.ps-secondary{
  border:1px solid #dce1e4;
  color:#101820;
}
.ps-secondary:hover{background:#f5f7f8}
.ps-next{
  margin:0 30px 30px;
  padding:22px;
  background:#f5f7f8;
  border-left:4px solid #d9ff00;
}
.ps-next h3{
  font-size:14px;
  margin-bottom:7px;
  text-transform:uppercase;
}
.ps-next p{
  color:#68737c;
  font-size:13px;
  line-height:1.6;
}
.ps-footer{
  text-align:center;
  padding:22px;
  color:#66727b;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
}
@media(max-width:600px){
  .ps-header{padding:0 20px}
  .ps-logo{font-size:18px}
  .ps-header-btn{padding:10px 14px;font-size:11px}
  .ps-hero{padding:35px 12px}
  .ps-top{padding:42px 20px 30px}
  /* h1{font-size:32px} */
  .ps-summary,.ps-next{margin-left:18px;margin-right:18px}
  .ps-actions{padding:0 18px 25px;flex-direction:column}
  .ps-row{padding:14px}
}