/* Clean order form theme: Layout (sizes, spacing, grid). Built on Keap's Mobile Responsive markup:
   #header | #content-wrapper > (#rightbar, #content) | #footer.
   Desktop: checkout left, "What you get" sidebar right. Phone (<=820px): sidebar first.
   claude-clean.js moves the product list + summary + button into one payment card. */

#wrapper { padding: 0; }
#wrapper form { display: none; max-width: none; margin: 0; }

.cc-gutter, #wrapper #header, #content-wrapper {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* HEADER */
#wrapper #header { max-width: 1072px; margin: 0 auto; width: 100%; }
.cc-top { display: grid; gap: 14px; padding: 28px 0 8px; }

/* TWO COLUMNS */
#content-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    max-width: 1072px;
    margin: 0 auto;
    padding-top: 24px;
    padding-bottom: 40px;
}
#wrapper #content, #wrapper #rightbar { max-width: none; margin: 0; padding: 0; border: 0; width: auto; }
#wrapper #content { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 16px; }
#wrapper #rightbar { grid-column: 2; grid-row: 1; position: sticky; top: 16px; display: grid; gap: 16px; }
#content > div:empty, #rightbar > div:empty { display: none; }

@media only screen and (max-width: 820px) {
    #content-wrapper { grid-template-columns: minmax(0, 1fr); }
    #wrapper #rightbar { grid-column: 1; grid-row: 1; position: static; }
    #wrapper #content { grid-column: 1; grid-row: 2; padding: 0; border: 0; }
}

/* CARDS */
.cc-tips { padding: 14px 18px; display: grid; gap: 6px; }
#orderFormBillingEntry, .cc-alertfield, .cc-paycard { padding: 22px; }
.formTitle, .cc-step-title { margin: 0 0 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* BILLING: 2-col grid, Keap's .form-row flattened so fields can be reordered */
#orderFormBillingEntry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#orderFormBillingEntry > .formTitle { grid-column: 1 / -1; margin-bottom: 2px; }
#orderFormBillingEntry .form-row { display: contents; }
#orderFormBillingEntry .input-field, #orderFormBillingEntry .select-field { margin: 0; padding: 0; max-width: none; }
#orderFormBillingEntry > .input-field,
#orderFormBillingEntry > .checkboxOption,
#orderFormBillingEntry > div:not(.form-row):not(.input-field):not(.select-field) { grid-column: 1 / -1; }
/* member order: first, last, email, street, line 2, city, state, zip, country, phone */
#orderFormBillingEntry .input-field:has(#firstName)    { order: 1; }
#orderFormBillingEntry .input-field:has(#lastName)     { order: 2; }
#orderFormBillingEntry .input-field:has(#emailAddress) { order: 3; grid-column: 1 / -1; }
#orderFormBillingEntry .input-field:has(#addressLine1) { order: 4; grid-column: 1 / -1; }
#orderFormBillingEntry .input-field:has(#addressLine2) { order: 5; grid-column: 1 / -1; }
#orderFormBillingEntry .input-field:has(#city)         { order: 6; }
#orderFormBillingEntry .input-field:has(#state),
#orderFormBillingEntry .select-field:has(#state)       { order: 7; }
#orderFormBillingEntry .input-field:has(#zipCode)      { order: 8; }
#orderFormBillingEntry .select-field:has(#country)     { order: 9; }
#orderFormBillingEntry .input-field:has(#phoneNumber)  { order: 10; grid-column: 1 / -1; }
#orderFormBillingEntry .cc-cell-inline                 { order: 10; grid-column: 1 / -1; } /* data-cell="inline": right after Phone */
#orderFormBillingEntry .input-field:has(#company)      { order: 11; grid-column: 1 / -1; }
#orderFormBillingEntry .checkboxOption                 { order: 12; }

/* FIELDS: label above input (Keap puts the label after the input) */
.input-field, .select-field { position: relative; width: 100%; display: flex; flex-direction: column; gap: 5px; }
.input-field label, .select-field label {
    order: -1; position: static; transform: none; background: none;
    padding: 0; margin: 0; left: auto; top: auto; pointer-events: auto; white-space: normal; line-height: 1.3;
}
.cc-alertfield label { display: block; }
.cc-alertfield input { display: block; margin: 5px 0 6px; }

/* cell field inside the billing box (data-cell="inline"): looks like the other fields, not a card */
.cc-alertfield.cc-cell-inline { padding: 0; background: none; border: 0; border-radius: 0; }
.cc-cell-inline .cc-step-title, .cc-cell-inline .cc-req { display: none; }
.cc-cell-inline input { margin-bottom: 4px; }

/* PAYMENT CARD */
.cc-paycard { display: grid; gap: 14px; }
.cc-paycard .cc-step-title { margin: 0; }
.cc-cards { display: flex; gap: 5px; }
#paymentSelection .creditCardFormOption { margin: 0; display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 12px; }
#paymentSelection .creditCardFormOption .form-row { display: contents; }
#paymentSelection .creditCardFormOption .input-field,
#paymentSelection .creditCardFormOption .select-field { margin: 0; padding: 0; max-width: none; }
.cc-js #paymentSelection .select-field:has(#cardType) { display: none; }
#paymentSelection .payPalFormOption, #paymentSelection .radioOption { grid-column: 1 / -1; }

/* summary inside the payment card */
#productsContainer { padding: 0; border: 0; display: grid; gap: 10px; width: auto; } /* styledcart.css sets .products { width: 385px } */
.productItem { display: flex; align-items: flex-start; gap: 12px; margin: 0; }
.productDetails { margin: 0; display: grid; gap: 2px; flex: 1 1 auto; width: auto; }
.productName, .productDescription { margin: 0; }
.productPricingOverview { flex: 0 0 auto; width: auto; margin-left: auto; }
.productPrices { display: block; margin: 0; text-align: right; }
#orderSummaryContainer { padding: 0; display: grid; gap: 10px; }
.orderSummarySubTotals { padding: 0; border: 0; }
.orderSummaryPrice { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.orderSummaryTotal { margin: 0; padding: 12px 14px; }
#upsellContainer, #paymentPlansContainer, #shippingOptionsContainer { padding: 0; border: 0; }

/* button + secure line (secure line moved under the button) */
#checkoutLinksContainer { padding: 0; display: flex; flex-direction: column-reverse; gap: 12px; }
.checkoutLinks .button { border-radius: 10px; }
.button.block, .continueButton { display: block; width: 100%; }
.checkoutLinks .secury-pay { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0; }
.checkoutLinks .secury-pay span { padding: 0; }

/* TERMS + CONSENT (inside the payment card) */
.cc-terms { display: grid; gap: 10px; }
.cc-terms-text { max-height: 132px; overflow-y: auto; padding: 10px 12px; }
.cc-agree { display: flex; align-items: flex-start; gap: 10px; }
.cc-agree input { width: 20px; height: 20px; margin-top: 1px; flex: none; }
.cc-terms-error { margin: 0; }
.cc-consent { margin: 2px 0 0; }

/* BENEFITS SIDEBAR */
.cc-panel { padding: 24px; display: grid; gap: 18px; }
.cc-price { display: flex; align-items: baseline; gap: 6px; }
.cc-phone { padding: 16px; display: grid; gap: 8px; }
.cc-bubble { padding: 10px 12px; max-width: 92%; }
.cc-bubble time { margin-top: 2px; }
.cc-perks { margin: 0; padding: 0; display: grid; gap: 14px; }
.cc-perks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
.cc-perks svg { width: 20px; height: 20px; margin-top: 2px; }
.cc-nocontract { padding-top: 14px; }

/* QUESTIONS + FOOTER */
.cc-questions { max-width: 1040px; margin: 0 auto; padding-top: 8px; padding-bottom: 40px; text-align: center; display: grid; gap: 6px; }
.cc-footer { text-align: center; padding-top: 24px; padding-bottom: 24px; }

@media only screen and (max-width: 520px) {
    #orderFormBillingEntry { grid-template-columns: minmax(0, 1fr); }
    #orderFormBillingEntry .input-field, #orderFormBillingEntry .select-field { grid-column: 1 / -1; }
    #paymentSelection .creditCardFormOption { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #paymentSelection .creditCardFormOption .creditCardNumber { grid-column: 1 / -1; }
}