/* Clean order form theme: Appearance (colors, type, borders). Shared by the RateSensei, GGS and OS Clean themes.
   Brand colors are the :root variables below; each brand's brand.css overrides them (appended by build.sh).
   Paired with layout.css and the HTML areas in each brand's html-areas.md. */
@import url(https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap);

:root {
    --cc-page: #f8f6f3;
    --cc-card: #ffffff;
    --cc-ink: #2e0d04;
    --cc-muted: #6b5d56;
    --cc-line: #e6dcd2;
    --cc-brand: #c06f1c;
    --cc-brand-logo: #d6862a;
    --cc-brand-soft: #fcf0e1;
    --cc-brand-line: #f1d3ad;
    --cc-brand-ring: #f6dcb8;
    --cc-go: #3f9d2f;
    --cc-go-hover: #358a27;
    --cc-total: var(--cc-go);
    --cc-warn: #c22a1f;
    --cc-footer: #3d4047;
    --cc-font: "Figtree", "Open Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
    --cc-r: 10px;
    color-scheme: light;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    background: var(--cc-page);
    color: var(--cc-ink);
    font-family: var(--cc-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}
img, img a { border: 0 none; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--cc-ink); }
p { margin: 0; color: var(--cc-muted); }
a { color: var(--cc-brand); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }

/* HEADER ================================================== */
.cc-logo { width: 260px; max-width: 70%; height: auto; display: block; }
.cc-top h1 { font-size: clamp(28px, 4.6vw, 44px); line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; max-width: 22ch; }
.cc-lede { font-size: clamp(17px, 2vw, 20px); color: var(--cc-muted); max-width: 60ch; }
#companyLogoTopBanner, #IMAGE { display: none; }

/* CARDS =================================================== */
.cc-tips, #orderFormBillingEntry, .cc-alertfield, .cc-paycard, .cc-panel {
    background: var(--cc-card);
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-r);
}
.cc-tips { font-size: 14px; color: var(--cc-muted); }
.cc-tips b { color: var(--cc-ink); }
.cc-tips .em { color: var(--cc-warn); font-weight: 700; }

.formTitle, .cc-step-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--cc-muted);
    font-weight: 700;
}
.cc-alertfield { background: var(--cc-brand-soft); border-color: var(--cc-brand-line); }
.cc-alertfield .cc-step-title { color: var(--cc-brand); }

/* FIELDS: visible labels above inputs ===================== */
.input-field label, .select-field label, .cc-alertfield label {
    font-size: 14px;
    font-weight: 600;
    color: var(--cc-ink);
}
.input-field input, .select-field select, .cc-alertfield input {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    font-size: 16px;
    font-weight: 400;
    color: var(--cc-ink);
    background-color: #fffdfb;
    border: 1px solid var(--cc-line);
    border-radius: 8px;
    padding: 11px 12px;
    min-height: 46px;
    height: auto;
    width: 100%;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.select-field select {
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236b5d56' d='M6.293 9.293a1 1 0 0 1 1.414 0L12 13.586l4.293-4.293a1 1 0 1 1 1.414 1.414l-5 5a1 1 0 0 1-1.414 0l-5-5a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E");
    background-size: 20px;
    background-position: calc(100% - 8px) center;
    background-repeat: no-repeat;
}
.input-field input::placeholder, .cc-alertfield input::placeholder { color: #a99b93; }
.input-field input:focus, .select-field select:focus, .cc-alertfield input:focus {
    border-color: var(--cc-brand);
    box-shadow: 0 0 0 3px var(--cc-brand-soft);
    background-color: #fff;
}
.cc-alertfield input:focus { box-shadow: 0 0 0 3px var(--cc-brand-ring); }
.select-field select:disabled, .input-field input:disabled { background-color: #f3efeb; color: var(--cc-muted); cursor: not-allowed; }
.inline-field-invalid, input.inline-field-invalid { border-color: var(--cc-warn) !important; background: #fffdfb !important; }
.inline-field-invalid:focus { box-shadow: 0 0 0 3px #f9dcd9 !important; }
.cc-hint { font-size: 13px; color: var(--cc-muted); font-weight: 400; }
.cc-req { color: var(--cc-brand); }

.radioOption label, .checkboxOption label { font-size: 14px; }
.radioOptionDetails { font-size: 13px; color: var(--cc-muted); }

/* CARD LOGOS ============================================== */
.cc-cards span {
    font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
    border: 1px solid var(--cc-line); border-radius: 4px; padding: 3px 6px;
    color: var(--cc-muted); background: #fff; transition: all .15s;
}
.cc-cards span.on { border-color: var(--cc-brand); color: #fff; background: var(--cc-brand); }

/* ORDER SUMMARY =========================================== */
#productsContainer { font-variant-numeric: tabular-nums; }
.productsTitle { display: none; }
.productImage { display: none; }
.productName { font-size: 16px; font-weight: 700; }
.productDescription { font-size: 14px; color: var(--cc-muted); }
.productSubscriptionDetails { display: none; } /* repeated by the "Then ... until you cancel" line */
.productSubTotal { display: none; }
.productTotal, .productTotalPrice { font-size: 16px; color: var(--cc-ink); }
.productQuantity { display: none; }
.productOriginalPrice { text-decoration: line-through; }
.orderSummarySubTotals .orderSummaryPrice, .orderSummarySubTotals .orderSummaryPrice p { font-size: 14px; color: var(--cc-muted); }
.orderSummaryTotal { background: var(--cc-page); border-radius: 8px; }
.orderSummaryTotal .orderSummaryPrice p { font-size: 16px; font-weight: 600; color: var(--cc-ink); }
.orderSummaryTotal .orderSummaryPrice span { font-size: 30px; line-height: 1; font-weight: 800; color: var(--cc-total); }
.cc-then { font-size: 14px; color: var(--cc-muted); }

/* BUTTON + SECURE ========================================= */
.button, .continueButton {
    appearance: none;
    border: 0;
    border-radius: var(--cc-r);
    background-color: var(--cc-go);
    color: #fff;
    font: 700 19px/1 var(--cc-font);
    padding: 19px;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s, transform .05s;
    -webkit-tap-highlight-color: transparent;
}
.button:hover, .continueButton:hover { background-color: var(--cc-go-hover); color: #fff; text-decoration: none; }
.button:active { transform: translateY(1px); color: #fff; }
.button:focus-visible { outline: 3px solid var(--cc-brand); outline-offset: 3px; }
.button[disabled] { background-color: #cfc6bf; color: #fff; cursor: default; pointer-events: none; }
.button.secondary { background: transparent; color: var(--cc-ink); border: 1px solid var(--cc-ink); }
.checkoutLinks .secury-pay { font-size: 13px; color: var(--cc-muted); }

/* TERMS + CONSENT ========================================= */
.cc-terms-text { font-size: 13px; line-height: 1.5; color: var(--cc-muted); background: var(--cc-page); border: 1px solid var(--cc-line); border-radius: 8px; }
.cc-terms-text b { color: var(--cc-ink); }
.cc-terms-text:focus-visible { outline: 2px solid var(--cc-brand); outline-offset: 2px; }
.cc-agree { font-size: 14px; font-weight: 600; color: var(--cc-ink); cursor: pointer; }
.cc-agree input { accent-color: var(--cc-brand); }
.cc-agree a { color: var(--cc-brand); text-decoration: underline; }
.cc-terms.cc-invalid .cc-agree { color: var(--cc-warn); }
.cc-terms-error { font-size: 13px; font-weight: 600; color: var(--cc-warn); }
.cc-consent { font-size: 12.5px; line-height: 1.5; color: var(--cc-muted); text-align: center; }

/* BENEFITS SIDEBAR ======================================== */
.cc-panel h3 { font-size: 26px; font-weight: 800; color: var(--cc-brand); letter-spacing: -0.015em; }
.cc-price b { font-size: 44px; line-height: 1; font-weight: 800; color: var(--cc-ink); }
.cc-price span { color: var(--cc-muted); }
.cc-phone { background: var(--cc-brand-logo); border-radius: 12px; }
.cc-bubble { background: #fff; border-radius: 14px 14px 14px 4px; font-size: 13.5px; line-height: 1.4; color: var(--cc-ink); }
.cc-bubble b { color: var(--cc-brand); }
.cc-bubble time { display: block; font-size: 11px; color: var(--cc-muted); }
.cc-perks { list-style: none; font-size: 14.5px; color: var(--cc-muted); }
.cc-perks svg { stroke: var(--cc-go); fill: none; stroke-width: 3; }
.cc-perks b { display: block; color: var(--cc-brand); font-size: 16.5px; }
.cc-hero { display: block; width: 100%; height: auto; border-radius: 8px; }
.cc-nocontract { font-size: 14px; font-weight: 600; text-align: center; color: var(--cc-ink); border-top: 1px solid var(--cc-line); }

/* QUESTIONS + FOOTER ====================================== */
.cc-questions h2 { font-size: 30px; font-weight: 800; }
.cc-questions p { font-size: 18px; color: var(--cc-muted); }
.cc-questions a { color: var(--cc-brand); }
.cc-footer { background: var(--cc-footer); color: #e3e5ea; font-size: 13px; }
.cc-footer a { color: #e3e5ea; text-decoration: underline; }

/* UPSELLS / PLANS (unused on this form, kept on-brand) ===== */
.upsell { border: 1px solid var(--cc-line); border-radius: var(--cc-r); background: var(--cc-card); }
.upsellOriginalPrice { font-size: 13px; text-decoration: line-through; color: var(--cc-muted); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* OS Clean: OriginatorSuccess brand overrides (appended after the shared appearance.css). */
:root {
    --cc-page: #f6f8fb;
    --cc-ink: #1b2333;
    --cc-muted: #5b6475;
    --cc-line: #dde3ee;
    --cc-brand: #1e4fb8;
    --cc-brand-logo: #2154c3;
    --cc-brand-soft: #eef3fd;
    --cc-brand-line: #c9d7f5;
    --cc-brand-ring: #d6e2fb;
    --cc-go: #3f9d2f;
    --cc-go-hover: #358a27;
    --cc-total: #3f9d2f;
    --cc-footer: #3d4047;
}
.cc-logo { width: 300px; }
/* carried over from live form 86's footer HTML area */
#PAYMENT_SELECTION label .smallHeader, .choosePlan { display: none !important; }