/* --- static/css/order.css ---*/

.panel {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 16px;
}
.panel-soft {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 14px;
  padding: 16px;
}

.section-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom: 12px;
}
.section-head h5 { margin:0; font-weight:700; }
.section-head .hint { color:#6c757d; font-size:.9rem; }

@media (min-width: 992px){
  .sticky-summary { position: sticky; top: 24px; }
}
/* --- cart, checkout, order confirmation --- end */


/* --- cart.html --- */
.custom-product-images {
    display: flex;
    flex-direction: column; 
    gap: 5px;
}

.custom-product-images .img-thumbnail {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
}

.custom-product-images .thumbnail-container {
   display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 per row */
    gap: 4px; /* spacing between thumbnails */
    margin-top: 4px;      /* wrap if more than 3 thumbnails */
}

.custom-product-images .thumbnail-container img {
    width: 40px;            /* smaller thumbnails */
    height: 40px;
    object-fit: cover;
    border-radius: 5px;
    transition: transform 0.2s ease;
}

.panel-soft .list-group {
  margin: 0;
}

.panel-soft .list-group-item {
  border: 1px solid #e9ecef !important;
  border-radius: 14px !important;
  padding: 14px !important;
  background: #fff !important;
  margin-bottom: 12px !important;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.panel-soft .list-group-item:last-child {
  margin-bottom: 0 !important;
}
.saved-media{
  width: 120px;              /* same as regular/custom */
  margin-right: 3rem;        /* roughly Bootstrap me-5 */
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-start;
}

.saved-thumb{
  width: 100px;              /* match regular image size */
  height: 100px;
  object-fit: cover;
}

.saved-actions{
  width: 105px;              /* consistent column */
  display:flex;
  flex-direction:column;
  gap:8px;
}

@media (max-width: 576px){
  .saved-row{ flex-wrap: wrap; }
  .saved-actions{ width: 100%; }  /* full width on mobile */
}

/* --- cart.html ---end */


/* --- checkout_progress.html ---*/
.checkout-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    padding: 0 10px;
}
.checkout-step {
    text-align: center;
    flex: 1;
    position: relative;
}
.checkout-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -50%;
    width: 100%;
    height: 3px;
    background-color: #ddd;
    transform: translateY(-50%);
    z-index: 0;
}
.checkout-step.active .step-circle {
    background-color: #FFC107;
    color: white;
    border-color: #FFC107;
}
.checkout-step.completed .step-circle {
    background-color: #198754;
    color: white;
    border-color: #198754;
}
.step-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 5px auto;
    font-weight: bold;
    background: white;
    z-index: 1;
    position: relative;
}
.step-label {
    font-size: 0.9rem;
    font-weight: 600;
}
/* --- checkout_progress.html --- end*/


/* --- checkout_shipping.html, chechout_payment.html ---*/
.shipping-address-form {
    width: 100%; max-width: 750px;
}

#card-element{
  background:#fff;
  border:1px solid var(--bs-border-color);
  border-radius:.5rem;
  padding:14px;
  min-height:52px;
}
#card-element.StripeElement--focus{ border-color:#111; }

.choice-tile {
  border: 1px solid #e9ecef;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.choice-tile:hover {
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.06);
  border-color: #dee2e6;
}
.choice-tile .title { font-weight: 700; }
.choice-tile .desc { color: #6c757d; font-size: .9rem; }
/* --- checkout_shipping.html, chechout_payment.html ---end*/


/* --- checkout_payment.html ---*/
.choice-tile.pay-tile.active {
  border-color: rgba(255, 193, 7, .75);
  box-shadow: 0 .25rem .75rem rgba(255,193,7,.18);
}

.stripe-field{
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
}
.stripe-field.StripeElement--focus{
  border-color: rgba(13,110,253,.6);
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}
.stripe-field.StripeElement--invalid{
  border-color: var(--bs-danger);
}

.final-sale-group {
  padding: 14px 16px;
  border: 1px solid #e9ecef;
  border-radius: 14px;
  background: #fffdf7;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.final-sale-group.is-invalid {
  border-color: var(--bs-danger);
  box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.12);
}

.final-sale-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.final-sale-checkbox {
  margin-top: 0.2rem;
  flex: 0 0 auto;
}

.final-sale-label {
  color: #333;
  line-height: 1.55;
}

.final-sale-label a {
  font-weight: 500;
}

.final-sale-error {
  margin-top: 10px;
  color: var(--bs-danger);
  font-size: 0.875rem;
  line-height: 1.4;
}

@media (max-width: 576px) {
  .final-sale-group {
    padding: 12px 14px;
  }

  .final-sale-row {
    gap: 8px;
  }
}

.checkout-summary-card {
  border-radius: 16px;
}

.checkout-info-box {
  border: 1px solid #e9ecef;
  border-radius: 14px;
  background: #fff;
  padding: 1rem 1rem 0.95rem;
}

.checkout-info-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6c757d;
  margin-bottom: 0.75rem;
}

.checkout-info-key {
  font-size: 0.78rem;
  color: #6c757d;
  margin-bottom: 0.15rem;
}

.checkout-info-value {
  color: #212529;
  line-height: 1.45;
  word-break: break-word;
}

.checkout-address {
  color: #495057;
  line-height: 1.6;
}
/* --- checkout_payment.html ---end*/


/* --- checkout_shipping.html ---*/
.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .form-select:valid,
.form-select.is-valid {
  border-color: var(--bs-border-color);
  background-image: none !important;
  box-shadow: none !important;
  padding-right: .75rem !important;
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus,
.was-validated .form-select:valid:focus,
.form-select.is-valid:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}

.email-verification-box {
  border: 1px solid #dee2e6;
  border-radius: .75rem;
  padding: .875rem;
  background: #fff;
}

.email-verification-box.is-invalid {
  border-color: #dc3545;
  background: #fff;
}

#email-verification-box .input-group > .form-control {
  border-right: 0;
}

#email-verification-box .input-group > .btn {
  margin-left: 0 !important;              /* cancels Bootstrap overlap */
  border-left: 1px solid var(--bs-warning) !important;
  position: relative;
  z-index: 2;
}

#email-verification-box .input-group > .btn:hover,
#email-verification-box .input-group > .btn:focus,
#email-verification-box .input-group > .btn:active {
  border-left: 1px solid var(--bs-warning) !important;
  position: relative;
  z-index: 3;
}

/* --- checkout_shipping.html ---end */


/* --- checkout/order_confirmation.html ---*/
.hero-check {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.hero-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eafbea;
  border: 1px solid #d1f3d6;
  font-size: 22px;
  flex: 0 0 auto;
}
/* --- order_confirmation.html --- end*/