/* -------------------------------------
   1) GENERAL LAYOUT & STYLES
-------------------------------------- */

/* Push the checkout form down from top */
form.checkout.woocommerce-checkout {
    margin-top: 12rem;
}

/* Main wrapper for the custom checkout */
.custom-checkout-wrapper {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 15px;
}

/* Two columns side by side on desktop */
.checkout-columns {
    display: flex;
    gap: 30px;
}
.checkout-column-left {
    flex: 1;
    min-width: 0;
}
.checkout-column-right {
    width: 400px; /* fixed width on large screens */
}

/* -------------------------------------
   2) FORM FIELDS
-------------------------------------- */
.form-row {
    margin-bottom: 15px;
}
.form-row label {
    display: block;
    margin-bottom: 5px;
    color: #333;
}

span.woocommerce-Price-amount.amount {
    font-weight: 600;
}

.elementor-kit-6 h3 {
    color: #000000;
    font-size: 20px;
    font-weight: 600;
    margin-left: -5px;
    margin-bottom: 20px;
}

/* Fields themselves */
.woocommerce-billing-fields,
.form-row input[type="text"],
.form-row input[type="tel"],
.form-row input[type="email"],
.form-row select,
.form-row textarea {
    width: 100%;
    padding: 0px 12px !important;
    border-radius: 4px;
}

/* Force some spacing on each row wrapper in billing/shipping */
.woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-shipping-fields__field-wrapper .form-row {
    margin-bottom: 20px;
}

.form-row input[type="date"] {
  height: 45px; /* for consistent height with other fields */
  padding: 10px;
  width: 100%;
  display: block;
}

.woocommerce-billing-fields__field-wrapper input.input-text {
    height: 45px;
}

/* For selects (e.g. Country/State) */
select#billing_state, 
select#billing_country  {
    height: 45px;
    box-sizing: border-box;
}

.woocommerce-additional-fields {
    margin-left: 10px;
}

body .woocommerce-message {
    color: #ffffff !important;
}
a.button.wc-forward {
    color: #ffffff !important;
}
.form-row.woocommerce-invalid input.input-text {
    box-shadow: inset 2px 0 0 #ffffff !important;
}
.form-row.woocommerce-validated input.input-text {
    box-shadow: inset 2px 0 0 #ffffff !important;
}

ul.woocommerce-error {
    background-color: #FF6F3C !important;
    border-color: #1A3E5C !important;
    color: #ffffff !important;
}

.woocommerce-error::before {
    color: #ffffff;
}


/* -------------------------------------
   3) ORDER REVIEW (PRODUCTS, TOTALS)
-------------------------------------- */
table.shop_table.woocommerce-checkout-review-order-table {
    margin-bottom: 0px;
    border: 1px solid #e5e7eb;
    border-collapse: collapse;
    width: 100%;
}

table.shop_table.woocommerce-checkout-review-order-table th,
table.shop_table.woocommerce-checkout-review-order-table td {
    padding: 10px;
    border: 1px solid #e5e7eb;
    vertical-align: middle;
}

/* Subtotal row */
th.product-name {
    font-size: 20px;
}

li.coordinate-ticket {
    margin-top: 10px;
}

dt.variation-SelectedCoordinates {
    margin-top: 10px;
}

dd.variation-Ticketnumber {
    text-align: center;
}

tr.cart-subtotal > th,
tr.cart-subtotal > td {
    font-weight: 500;
}

/* Total row styling (make bigger/bolder) */
tr.order-total > th,
tr.order-total > td {
    font-size: 18px;
    font-weight: bold;
}

/* Product thumbnail & name columns */
.review-product-thumbnail img {
    width: 80px; 
    height: auto;
    margin-right: 10px;
    vertical-align: middle;
}

.review-product-name {
    font-size: 16px;
    font-weight: bolder;
    vertical-align: middle;
}

/* Price amounts slightly bolder */
.woocommerce-Price-amount.amount {
    font-weight: 600;
}

/* -------------------------------------
   4) COUPON SECTION
-------------------------------------- */
.coupon-section {
    margin-bottom: 20px;
}
.coupon-toggle {
    width: 100%;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.coupon-section button.coupon-toggle,
.coupon-section button.coupon-toggle:hover,
.coupon-section button.coupon-toggle:focus {
    background: none;
    color: #000000;
    border: 1px solid #e5e7eb;
    border-radius: 0px;
    padding: 10px;
}

.coupon-form {
    margin-top: 10px;
}

.coupon-form input.input-text {
    padding: 10px;
}

.coupon-form button.button {
    padding: 8px 20px !important;
}

/* -------------------------------------
   5) PAYMENT METHODS
-------------------------------------- */
.payment-methods {
    margin-top: 20px;
    padding: 10px;
    background: #f9fafb;
    border-radius: 8px;
}

/* -------------------------------------
   6) RESPONSIVE (MOBILE <= 768px)
-------------------------------------- */
@media (max-width: 768px) {
    /* Stack columns vertically */
    .checkout-columns {
        flex-direction: column;
    }
    
    /* Make each column full width */
    .checkout-column-left,
    .checkout-column-right {
        width: 100% !important;
    }

    /* Add some margin between stacked columns */
    .checkout-column-right {
        margin-top: 2rem;
    }

    /* Adjust product thumbnail size on smaller screens */
    .review-product-thumbnail img {
        width: 60px;
        margin: 0 10px 10px 0;
    }

    form.checkout.woocommerce-checkout {
        margin-top: 10rem;
    }

}



/* Flipdown CSS */

/* FlipDown Theme: Dark */
.flipdown.flipdown__theme-dark {
    font-family: sans-serif;
    font-weight: bold;
  }
  .flipdown.flipdown__theme-dark .rotor-group-heading:before {
    color: #000;
  }
  .flipdown.flipdown__theme-dark .rotor-group:nth-child(n+2):nth-child(-n+3):before,
  .flipdown.flipdown__theme-dark .rotor-group:nth-child(n+2):nth-child(-n+3):after {
    background-color: #151515;
  }
  .flipdown.flipdown__theme-dark .rotor,
  .flipdown.flipdown__theme-dark .rotor-top,
  .flipdown.flipdown__theme-dark .rotor-leaf-front {
    color: #fff;
    background-color: #151515;
  }
  .flipdown.flipdown__theme-dark .rotor-bottom,
  .flipdown.flipdown__theme-dark .rotor-leaf-rear {
    color: #efefef;
    background-color: #202020;
  }
  .flipdown.flipdown__theme-dark .rotor:after {
    border-top: solid 1px #151515;
  }
  
  /* Base FlipDown styling */
  .flipdown {
    overflow: visible;
    width: 510px;
    height: 100px;
    transform: scale(0.7);
    margin: 10px auto;
    margin-left: -55px;
  }
  .flipdown .rotor-group {
    position: relative;
    float: left;
    padding-right: 30px;
  }
  .flipdown .rotor-group:last-child {
    padding-right: 0;
  }
  .flipdown .rotor-group-heading:before {
    display: block;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
  .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before,
  .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 115px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after {
    bottom: 50px;
  }
  .flipdown .rotor {
    position: relative;
    float: left;
    width: 50px;
    height: 80px;
    margin: 0 5px 0 0;
    border-radius: 4px;
    font-size: 4rem;
    text-align: center;
    perspective: 200px;
  }
  .flipdown .rotor:last-child {
    margin-right: 0;
  }
  .flipdown .rotor-top,
  .flipdown .rotor-bottom {
    overflow: hidden;
    position: absolute;
    width: 50px;
    height: 40px;
  }
  .flipdown .rotor-leaf {
    z-index: 1;
    position: absolute;
    width: 50px;
    height: 80px;
    transform-style: preserve-3d;
    transition: transform 0s;
  }
  .flipdown .rotor-leaf.flipped {
    transform: rotateX(-180deg);
    transition: all 0.5s ease-in-out;
  }
  .flipdown .rotor-leaf-front,
  .flipdown .rotor-leaf-rear {
    overflow: hidden;
    position: absolute;
    width: 50px;
    height: 40px;
    margin: 0;
    transform: rotateX(0deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .flipdown .rotor-leaf-front {
    line-height: 80px;
    border-radius: 4px 4px 0 0;
  }
  .flipdown .rotor-leaf-rear {
    line-height: 0;
    border-radius: 0 0 4px 4px;
    transform: rotateX(-180deg);
  }
  .flipdown .rotor-top {
    line-height: 80px;
    border-radius: 4px 4px 0 0;
  }
  .flipdown .rotor-bottom {
    bottom: 0;
    line-height: 0;
    border-radius: 0 0 4px 4px;
  }
  .flipdown .rotor:after {
    content: '';
    z-index: 2;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 40px;
    border-radius: 0 0 4px 4px;
  }
  
  /* Responsive adjustments */
  @media (max-width: 550px) {
    .flipdown {
      width: 312px;
      height: 70px;
      transform: scale(1);
    }
    .flipdown .rotor {
      font-size: 2.2rem;
      margin-right: 3px;
    }
    .flipdown .rotor,
    .flipdown .rotor-leaf,
    .flipdown .rotor-leaf-front,
    .flipdown .rotor-leaf-rear,
    .flipdown .rotor-top,
    .flipdown .rotor-bottom,
    .flipdown .rotor:after {
      width: 30px;
    }
    .flipdown .rotor-group {
      padding-right: 20px;
    }
    .flipdown .rotor-group:last-child {
      padding-right: 0;
    }
    .flipdown .rotor-group-heading:before {
      font-size: 0.8rem;
      height: 20px;
      line-height: 20px;
    }
    .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before,
    .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after {
      left: 69px;
    }
    .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before {
      bottom: 13px;
      height: 8px;
      width: 8px;
    }
    .flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after {
      bottom: 29px;
      height: 8px;
      width: 8px;
    }
    .flipdown .rotor-leaf-front,
    .flipdown .rotor-top {
      line-height: 50px;
    }
    .flipdown .rotor-leaf,
    .flipdown .rotor {
      height: 50px;
    }
    .flipdown .rotor-leaf-front,
    .flipdown .rotor-leaf-rear,
    .flipdown .rotor-top,
    .flipdown .rotor-bottom,
    .flipdown .rotor:after {
      height: 25px;
    }
  }


.woocommerce-order {
    width: 1140px;
    margin: 0 auto;
    margin-top: 150px;
}

p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
    text-align: center;
    margin: 60px 0px;
    font-weight: 500;
    font-size: 24px;
}

@media (max-width: 768px) {
  .woocommerce-order {
    width: 380px;
    margin: 0 auto;
    margin-top: 150px;
}

p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
  text-align: center;
  margin: 30px 0px;
  font-weight: 500;
  font-size: 20px;
}

ul.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details {
  display: flex;
  flex-direction: column;
  padding-left: 0px;
}
.woocommerce ul.order_details li{
  border: none;
  padding-bottom: 10px;
}

}