/* Tío Pelón's checkout design. Classic WooCommerce checkout only.
   No changes to payment, tax, shipping, or checkout logic. */
.tio-checkout-layout{background:#fff;color:#17120f;font-family:Spectral,Georgia,serif}
.tio-checkout-layout .wrap{max-width:1240px;margin:0 auto}
.tio-checkout-layout h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(36px,4vw,54px);line-height:1.14;color:#17120f;margin:0 0 30px}
.tio-checkout-layout .woocommerce{width:100%}
.tio-checkout-layout form.checkout.woocommerce-checkout{display:block!important;width:100%;clear:both}
.tio-checkout-layout form.checkout.woocommerce-checkout::after{content:"";display:block;clear:both}
/* Parent must be a full-width region; inner columns must be stacked. */
.tio-checkout-layout #customer_details{display:block!important;box-sizing:border-box;min-width:0;background:transparent!important;border:0!important;padding:0!important;margin-bottom:20px}
.tio-checkout-layout #customer_details::after{content:"";display:block;clear:both}
.tio-checkout-layout #customer_details>.col-1,
.tio-checkout-layout #customer_details>.col-2{display:block!important;float:none!important;clear:both!important;width:100%!important;max-width:none!important;min-width:0!important;margin:0 0 20px!important;padding:0!important}
.tio-checkout-layout .woocommerce-billing-fields,
.tio-checkout-layout .woocommerce-shipping-fields,
.tio-checkout-layout .woocommerce-additional-fields{background:#fff;border:1px solid #e5d8ca;border-radius:20px;padding:25px;margin:0 0 20px;box-sizing:border-box;min-width:0}
.tio-checkout-layout .woocommerce-billing-fields h3,
.tio-checkout-layout .woocommerce-shipping-fields h3,
.tio-checkout-layout .woocommerce-additional-fields h3,
.tio-checkout-layout #order_review_heading{font-family:'Playfair Display',Georgia,serif;font-size:clamp(23px,2.4vw,31px);line-height:1.2;color:#17120f;margin:0 0 18px}
.tio-checkout-layout #order_review_heading{margin-bottom:12px}
.tio-checkout-layout .woocommerce-shipping-fields h3 label{font:inherit;display:inline;cursor:pointer}
.tio-checkout-layout .woocommerce-shipping-fields h3 input{vertical-align:middle;margin-right:9px}
.tio-checkout-layout .woocommerce-additional-fields h3{margin-bottom:14px}
/* Order review and payment: same width, never narrow fixed-size descendants. */
.tio-checkout-layout #order_review{box-sizing:border-box;min-width:0;max-width:none!important;width:100%;background:#fff;border:1px solid #e5d8ca;border-radius:20px;padding:22px;margin:0 0 24px}
.tio-checkout-layout #order_review table.shop_table{width:100%!important;max-width:100%!important;table-layout:auto;border:1px solid #e5d8ca;border-radius:12px;border-collapse:separate;border-spacing:0;background:#fff;margin-bottom:20px;overflow:hidden}
.tio-checkout-layout #order_review table.shop_table th,
.tio-checkout-layout #order_review table.shop_table td{padding:13px 10px;border-color:#eee8df;overflow-wrap:break-word;word-break:normal}
.tio-checkout-layout #order_review table.shop_table th:last-child,
.tio-checkout-layout #order_review table.shop_table td:last-child{text-align:right}
.tio-checkout-layout #payment{box-sizing:border-box;width:100%!important;max-width:100%!important;background:#fff!important;border:1px solid #e5d8ca;border-radius:16px;padding:18px!important;margin:18px 0 0;min-width:0}
.tio-checkout-layout #payment ul.payment_methods{padding:0!important;margin:0!important;border:0!important}
.tio-checkout-layout #payment li.wc_payment_method{max-width:100%;min-width:0}
.tio-checkout-layout #payment .payment_box{background:#fffaf1!important;box-sizing:border-box;width:100%!important;max-width:100%!important;border-radius:12px;padding:14px!important;margin:12px 0!important}
.tio-checkout-layout #payment .payment_box::before{border-bottom-color:#fffaf1!important}
.tio-checkout-layout #payment .payment_box>div,
.tio-checkout-layout #payment .wc-stripe-upe-element,
.tio-checkout-layout #payment .wc-stripe-elements-field{box-sizing:border-box;width:100%!important;max-width:100%!important;min-width:0}
.tio-checkout-layout #payment iframe{max-width:100%}
/* Native checkout fields, excluding secure Stripe iframe internals. */
.tio-checkout-layout form.checkout .form-row input.input-text,
.tio-checkout-layout form.checkout .form-row textarea,
.tio-checkout-layout form.checkout .form-row select,
.tio-checkout-layout form.checkout .select2-container .select2-selection{box-sizing:border-box;width:100%;background:#fffaf1!important;border:1px solid #d8c9b9!important;border-radius:11px!important;color:#17120f;box-shadow:none!important;min-height:48px;padding:10px 13px}
.tio-checkout-layout form.checkout .select2-container .select2-selection{padding:8px 12px}
.tio-checkout-layout form.checkout .select2-container .select2-selection__rendered{line-height:28px}
.tio-checkout-layout form.checkout .form-row input:focus,
.tio-checkout-layout form.checkout .form-row textarea:focus{outline:2px solid #087f7a;outline-offset:1px}
.tio-checkout-layout form.checkout .form-row{box-sizing:border-box}
.tio-checkout-layout #place_order{background:#d60020!important;color:#fff!important;border:0!important;border-radius:999px!important;padding:17px 22px!important;min-height:54px;font-family:Poppins,Arial,sans-serif;font-weight:700;width:100%;box-shadow:none!important}
.tio-checkout-layout #place_order:hover{background:#b8001b!important}
/* Accordion: JavaScript adds classes only after it has attached handlers. */
.tio-checkout-layout .tio-accordion-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;font:inherit;text-align:left;color:inherit;cursor:pointer;background:transparent;border:0;padding:0}
.tio-checkout-layout .tio-accordion-heading::after{content:'⌄';color:#a5001a;font-family:Arial,sans-serif;font-size:28px;line-height:1;flex:none}
.tio-checkout-layout .tio-accordion-heading[aria-expanded="true"]::after{content:'⌃'}
.tio-checkout-layout .tio-accordion-heading:focus-visible{outline:2px solid #087f7a;outline-offset:4px;border-radius:4px}
.tio-checkout-layout .tio-accordion-panel[hidden]{display:none!important}
/* Desktop: left 60%, right 36%; float model matches WooCommerce template. */
@media(min-width:900px){
 .tio-checkout-layout #customer_details{float:left!important;width:60%!important;margin-right:4%!important}
 .tio-checkout-layout #order_review_heading,
 .tio-checkout-layout #order_review{float:right!important;clear:right!important;width:36%!important;max-width:36%!important;box-sizing:border-box}
}
@media(max-width:899px){
 .tio-checkout-layout #customer_details,
 .tio-checkout-layout #order_review_heading,
 .tio-checkout-layout #order_review{float:none!important;clear:both!important;width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}
}
@media(max-width:600px){
 .tio-checkout-layout .woocommerce-billing-fields,
 .tio-checkout-layout .woocommerce-shipping-fields,
 .tio-checkout-layout .woocommerce-additional-fields,
 .tio-checkout-layout #order_review{padding:16px;border-radius:14px}
 .tio-checkout-layout #payment{padding:12px!important}
 .tio-checkout-layout #payment .payment_box{padding:10px!important}
}


/* ============================================
   TIO PELON'S — NUMBERED CHECKOUT ACCORDIONS
   ============================================ */

/* Billing, shipping, and additional info cards */
.tio-checkout-layout .woocommerce-billing-fields,
.tio-checkout-layout .woocommerce-shipping-fields,
.tio-checkout-layout .woocommerce-additional-fields {
    background: #fffaf1 !important;
    border: 1px solid #e6d8c7 !important;
    border-radius: 20px !important;
    padding: 26px !important;
    margin-bottom: 22px !important;
    box-shadow: 0 8px 24px rgba(45, 29, 17, 0.08) !important;
    box-sizing: border-box;
}

/* Numbered section headings */
.tio-checkout-layout .woocommerce-billing-fields > h3,
.tio-checkout-layout .woocommerce-shipping-fields > h3,
.tio-checkout-layout .woocommerce-additional-fields > h3,
.tio-checkout-layout #ship-to-different-address {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(21px, 2vw, 29px) !important;
    line-height: 1.3 !important;
    margin: 0 0 20px !important;
    color: #17120f !important;
}

/* Red circles */
.tio-checkout-layout .woocommerce-billing-fields > h3::before,
.tio-checkout-layout #ship-to-different-address::before,
.tio-checkout-layout .woocommerce-additional-fields > h3::before {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #c9001d;
    color: #fff;
    font: 700 18px/1 Poppins, Arial, sans-serif;
    box-shadow: 0 3px 8px rgba(201, 0, 29, 0.16);
}

/* Step 1 */
.tio-checkout-layout .woocommerce-billing-fields > h3::before {
    content: "1";
}

/* Step 2 */
.tio-checkout-layout #ship-to-different-address::before {
    content: "2";
}

/* Step 3 */
.tio-checkout-layout .woocommerce-additional-fields > h3::before {
    content: "3";
}

/* Cream interior fields */
.tio-checkout-layout .woocommerce-checkout
input.input-text,
.tio-checkout-layout .woocommerce-checkout
textarea,
.tio-checkout-layout .woocommerce-checkout
select {
    background: #f8f0e3 !important;
    border: 1px solid #dccbb8 !important;
    border-radius: 11px !important;
    color: #17120f !important;
}

/* Field focus */
.tio-checkout-layout .woocommerce-checkout
input.input-text:focus,
.tio-checkout-layout .woocommerce-checkout
textarea:focus,
.tio-checkout-layout .woocommerce-checkout
select:focus {
    background: #fffaf1 !important;
    border-color: #087f7a !important;
    outline: 2px solid rgba(8, 127, 122, 0.15);
}

/* Add a subtle lift on hover */
.tio-checkout-layout .woocommerce-billing-fields:hover,
.tio-checkout-layout .woocommerce-shipping-fields:hover,
.tio-checkout-layout .woocommerce-additional-fields:hover {
    box-shadow: 0 12px 30px rgba(45, 29, 17, 0.11) !important;
}

/* Smaller screens */
@media (max-width: 767px) {
    .tio-checkout-layout .woocommerce-billing-fields,
    .tio-checkout-layout .woocommerce-shipping-fields,
    .tio-checkout-layout .woocommerce-additional-fields {
        padding: 18px !important;
        border-radius: 16px !important;
    }

    .tio-checkout-layout .woocommerce-billing-fields > h3::before,
    .tio-checkout-layout #ship-to-different-address::before,
    .tio-checkout-layout .woocommerce-additional-fields > h3::before {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        font-size: 15px;
    }
}


/* White fields inside cream checkout cards */
.tio-checkout-layout .woocommerce-checkout input.input-text,
.tio-checkout-layout .woocommerce-checkout textarea,
.tio-checkout-layout .woocommerce-checkout select,
.tio-checkout-layout .woocommerce-checkout .select2-selection,
.tio-checkout-layout .woocommerce-checkout .select2-selection--single {
    background-color: #ffffff !important;
    border: 1px solid #dccbb8 !important;
    border-radius: 11px !important;
    color: #17120f !important;
}

/* Keep fields white when focused */
.tio-checkout-layout .woocommerce-checkout input.input-text:focus,
.tio-checkout-layout .woocommerce-checkout textarea:focus,
.tio-checkout-layout .woocommerce-checkout select:focus {
    background-color: #ffffff !important;
    border-color: #087f7a !important;
}

/* Keep the accordion cards cream */
.tio-checkout-layout .woocommerce-billing-fields,
.tio-checkout-layout .woocommerce-shipping-fields,
.tio-checkout-layout .woocommerce-additional-fields {
    background-color: #fffaf1 !important;
}

/* Accordion closed state */
.tio-checkout-layout .tio-accordion-collapsed
.woocommerce-billing-fields__field-wrapper,
.tio-checkout-layout .tio-accordion-collapsed
.woocommerce-shipping-fields__field-wrapper,
.tio-checkout-layout .tio-accordion-collapsed
.woocommerce-additional-fields__field-wrapper {
    display: none !important;
}

/* Clickable accordion headings */
.tio-checkout-layout .tio-accordion-heading {
    cursor: pointer;
    user-select: none;
}

.tio-checkout-layout .tio-accordion-heading:focus-visible {
    outline: 2px solid #087f7a;
    outline-offset: 4px;
}

/* Tio Pelon's checkout visual fixes v3 — paste at END of commerce-checkout.css */
/* Warm cream accordion cards with a gentle shadow */
.tio-checkout-layout .woocommerce-checkout .woocommerce-billing-fields,
.tio-checkout-layout .woocommerce-checkout .woocommerce-shipping-fields,
.tio-checkout-layout .woocommerce-checkout .woocommerce-additional-fields {
  background: #fffaf1 !important;
  border: 1px solid #e6d8c7 !important;
  border-radius: 20px !important;
  box-shadow: 0 9px 25px rgba(44,29,16,.09) !important;
}
/* Inputs: override older cream input rules. */
body .tio-checkout-layout form.checkout.woocommerce-checkout .form-row input.input-text,
body .tio-checkout-layout form.checkout.woocommerce-checkout .form-row textarea,
body .tio-checkout-layout form.checkout.woocommerce-checkout .form-row select,
body .tio-checkout-layout form.checkout.woocommerce-checkout .select2-container .select2-selection--single,
body .tio-checkout-layout form.checkout.woocommerce-checkout .woocommerce-input-wrapper input,
body .tio-checkout-layout form.checkout.woocommerce-checkout .woocommerce-input-wrapper textarea {
  background: #fff !important;
  background-color: #fff !important;
  border: 1px solid #decfbd !important;
  border-radius: 10px !important;
  color: #17120f !important;
  box-shadow: none !important;
}
body .tio-checkout-layout form.checkout.woocommerce-checkout .form-row input.input-text:focus,
body .tio-checkout-layout form.checkout.woocommerce-checkout .form-row textarea:focus {
  background: #fff !important;
  border-color: #087f7a !important;
}
/* The accordion script toggles only the field wrapper; WooCommerce fields remain intact. */
.tio-checkout-layout .tio-v3-hidden { display: none !important; }
.tio-checkout-layout .tio-v3-heading { cursor: pointer; }
.tio-checkout-layout .tio-v3-heading:focus-visible { outline: 2px solid #087f7a; outline-offset: 4px; }
/* Hide the checkbox VISUALLY, retain native WooCommerce behavior. */
.tio-checkout-layout #ship-to-different-address-checkbox {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
}
/* Remove duplicated decorative chevrons from older accordion CSS. */
.tio-checkout-layout .tio-v3-heading::after { content: none !important; }
.tio-checkout-layout .tio-v3-heading { position: relative; padding-right: 30px !important; }
.tio-checkout-layout .tio-v3-heading::before { flex-shrink: 0; }
/* Single chevron via a background SVG, independent of numbered ::before circles. */
.tio-checkout-layout .tio-v3-heading {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b8001b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 4px center;
  background-repeat: no-repeat;
  background-size: 18px;
}
.tio-checkout-layout .tio-v3-open > .tio-v3-heading,
.tio-checkout-layout .tio-v3-open > h3.tio-v3-heading {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b8001b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E");
}
/* Make order and payment area look like a finished card. */
.tio-checkout-layout .woocommerce-checkout #order_review {
  background: #fffaf1 !important;
  border: 1px solid #e6d8c7 !important;
  border-radius: 20px !important;
  box-shadow: 0 9px 25px rgba(44,29,16,.08) !important;
  padding: 18px !important;
}
.tio-checkout-layout .woocommerce-checkout #payment {
  background: #fff !important;
  border: 1px solid #e6d8c7 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: 16px !important;
  width: 100% !important;
  min-width: 0;
  box-sizing: border-box !important;
}
.tio-checkout-layout .woocommerce-checkout #payment .payment_box,
.tio-checkout-layout .woocommerce-checkout #payment .wc-stripe-upe-element {
  background: #fffaf1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.tio-checkout-layout .woocommerce-checkout #payment .payment_methods,
.tio-checkout-layout .woocommerce-checkout #payment .payment_box,
.tio-checkout-layout .woocommerce-checkout #payment .form-row.place-order { margin-left: 0 !important; margin-right: 0 !important; }
.tio-checkout-layout .woocommerce-checkout #payment button#place_order { width: 100% !important; }
/* More room for Stripe on wide screens; keep checkout's existing floats. */
@media (min-width: 1050px) {
  .tio-checkout-layout .woocommerce-checkout #customer_details { width: 55% !important; margin-right: 3% !important; }
  .tio-checkout-layout .woocommerce-checkout #order_review_heading,
  .tio-checkout-layout .woocommerce-checkout #order_review { width: 42% !important; max-width: 42% !important; }
}
@media (max-width: 899px) {
  .tio-checkout-layout .woocommerce-checkout #customer_details,
  .tio-checkout-layout .woocommerce-checkout #order_review_heading,
  .tio-checkout-layout .woocommerce-checkout #order_review { float: none !important; width: 100% !important; max-width: none !important; margin: 0 0 20px !important; }
}