/* TAMMIA ONLINE - CART & CHECKOUT PREMIUM STYLING v2 */

/* === CART PAGE === */
.path-cart h1.page-title, .path-cart .page-title {
  font-size: 1.6rem; font-weight: 700; letter-spacing: 0.04em;
  color: #2c2c2c; margin-bottom: 1.5rem; text-transform: uppercase;
}
.path-cart table.views-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  border-radius: 12px; overflow: hidden; margin-bottom: 2rem;
}
.path-cart #views-form-commerce-cart-form-default-10 table thead tr {
  background: #2c2c2c;
}
.path-cart #views-form-commerce-cart-form-default-10 table thead tr th {
  color: #fff; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 14px 18px; border: none; background: transparent;
}
.path-cart table.views-table tbody tr {
  border-bottom: 1px solid #f0f0f0; transition: background 0.2s ease;
}
.path-cart table.views-table tbody tr:last-child { border-bottom: none; }
.path-cart table.views-table tbody tr:hover { background: #fafafa; }
.path-cart table.views-table tbody td {
  padding: 16px 18px; vertical-align: middle;
  font-size: 0.95rem; color: #3a3a3a; border: none;
}
.path-cart table.views-table .views-field-purchased-entity a {
  font-size: 0.95rem; font-weight: 600; color: #2c2c2c; text-decoration: none;
}
.path-cart table.views-table .views-field-purchased-entity a:hover { color: #e11d25; }
.path-cart table.views-table .views-field-unit-price__number,
.path-cart table.views-table .views-field-total-price__number {
  font-size: 0.95rem; font-weight: 600; color: #2c2c2c;
}
.path-cart table.views-table .views-field-edit-quantity input[type=number] {
  width: 70px; padding: 8px 10px; border: 1.5px solid #e0e0e0;
  border-radius: 8px; font-size: 0.95rem; text-align: center;
  background: #fff; outline: none;
}
.path-cart table.views-table .views-field-edit-quantity input[type=number]:focus {
  border-color: #e11d25; box-shadow: 0 0 0 3px rgba(225, 29, 37,0.12);
}

/* === ORDER TOTAL SUMMARY === */
[data-drupal-selector=order-total-summary] {
  background: #fff; border: 1px solid #ebebeb;
  border-radius: 12px; padding: 20px 24px;
  max-width: 380px; margin-left: auto; margin-bottom: 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.order-total-line {
  display: flex; justify-content: space-between;
  align-items: center; padding: 6px 0; border-bottom: 1px solid #f4f4f4;
}
.order-total-line:last-child { border-bottom: none; }
.order-total-line-label { font-size: 0.88rem; color: #777; font-weight: 500; }
.order-total-line-value { font-size: 0.95rem; font-weight: 600; color: #3a3a3a; }
.order-total-line__total {
  margin-top: 8px; padding-top: 12px;
  border-top: 2px solid #2c2c2c; border-bottom: none;
}
.order-total-line__total .order-total-line-label {
  font-size: 1.0rem; font-weight: 700; color: #2c2c2c;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.order-total-line__total .order-total-line-value {
  font-size: 1.4rem; font-weight: 800; color: #1a1a1a;
}

/* === CART BUTTONS === */
.path-cart #edit-actions,
.path-cart .form-actions#edit-actions {
  display: flex !important; flex-direction: row !important; gap: 12px !important;
  align-items: center !important; flex-wrap: wrap !important;
  margin-top: 1rem !important; padding: 0 !important; background: transparent !important;
}
.path-cart #edit-actions #edit-submit,
.path-cart #edit-actions input[value="Update cart"] {
  width: auto !important; display: inline-block !important; background: #f0f0f0 !important;
  border: 1.5px solid #d0d0d0 !important; color: #666 !important;
  padding: 9px 20px !important; font-size: 0.82rem !important; font-weight: 600 !important;
  border-radius: 8px !important; cursor: pointer !important; letter-spacing: 0.04em !important;
  text-transform: uppercase !important; box-shadow: none !important;
}
.path-cart #edit-actions #edit-submit:hover,
.path-cart #edit-actions input[value="Update cart"]:hover {
  background: #e4e4e4; color: #444;
}
.path-cart #edit-actions #edit-checkout,
.path-cart #edit-actions input[value="Checkout"] {
  width: auto !important; display: inline-block !important; background: #e11d25 !important;
  border: 2px solid #e11d25 !important; color: #fff !important;
  padding: 13px 40px !important; font-size: 1.0rem !important; font-weight: 700 !important;
  border-radius: 8px !important; cursor: pointer !important; letter-spacing: 0.06em !important;
  text-transform: uppercase !important; min-width: 180px !important;
  box-shadow: 0 4px 16px rgba(225, 29, 37,0.3) !important;
  transition: all 0.25s ease !important;
}
.path-cart #edit-actions #edit-checkout:hover,
.path-cart #edit-actions input[value="Checkout"]:hover {
  background: var(--tm-red-2) !important; border-color: var(--tm-red-2) !important;
  box-shadow: 0 6px 20px rgba(225, 29, 37,0.4);
  transform: translateY(-1px);
}

/* === BREADCRUMB - CHECKOUT: HIDE DEFAULT === */
.path-checkout .block-system-breadcrumb-block { display: none; }
.path-checkout .region-breadcrumb { display: none; }

/* Checkout progress indicator text */
.path-checkout .layout-checkout-form::before {
  content: "CART  >>  SHIPPING  >>  REVIEW  >>  COMPLETE";
  display: block; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.18em; color: #bbb; text-align: center;
  padding: 0 0 20px 0; width: 100%;
  grid-column: 1 / -1;
}

/* === CHECKOUT FORM === */
.path-checkout .page-title {
  font-size: 1.4rem; font-weight: 700; letter-spacing: 0.04em;
  color: #2c2c2c; text-transform: uppercase; margin-bottom: 0.5rem;
}
.layout-region-checkout-main,
.layout-region-checkout-secondary {
  background: #fff; border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07); padding: 28px 30px;
}
.checkout-pane {
  border: none; padding: 0; margin-bottom: 1.5rem;
}
.checkout-pane legend .fieldset-legend {
  font-size: 1.0rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #2c2c2c;
  padding-bottom: 8px; border-bottom: 2px solid #f0f0f0;
  display: block; width: 100%; margin-bottom: 16px;
}
.checkout-pane input[type=text],
.checkout-pane input[type=email],
.checkout-pane input[type=tel],
.checkout-pane select, .checkout-pane textarea {
  border: 1.5px solid #e0e0e0; border-radius: 8px;
  padding: 10px 14px; font-size: 0.92rem; color: #3a3a3a;
  background: #fafafa; transition: border-color 0.2s;
}
.checkout-pane input[type=text]:focus,
.checkout-pane input[type=email]:focus,
.checkout-pane select:focus {
  border-color: #e11d25; box-shadow: 0 0 0 3px rgba(225, 29, 37,0.12);
  background: #fff; outline: none;
}
.checkout-pane label {
  font-size: 0.8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: #777; margin-bottom: 6px;
}

/* Shipping method radio buttons */
.checkout-pane .form-type-radio {
  display: flex; align-items: center; padding: 10px 14px;
  border: 1.5px solid #e8e8e8; border-radius: 8px;
  margin-bottom: 8px; cursor: pointer; transition: all 0.2s ease;
  background: #fafafa;
}
.checkout-pane .form-type-radio:hover {
  border-color: #e11d25; background: #fdecee;
}
.checkout-pane .form-type-radio:has(input:checked) {
  border-color: #e11d25; background: #fdecee;
}
.checkout-pane .form-type-radio label {
  font-size: 0.88rem; text-transform: none; letter-spacing: 0;
  color: #3a3a3a; margin: 0 0 0 10px; cursor: pointer; font-weight: 500;
}
.checkout-pane .form-type-radio .description { display: none; }

/* Edit address button */
.address-book-edit-button {
  background: #f0f0f0; border: 1.5px solid #d0d0d0; color: #555;
  padding: 8px 18px; font-size: 0.8rem; font-weight: 600;
  border-radius: 6px; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer;
}
.address-book-edit-button:hover { background: #e0e0e0; }

/* Select address dropdown */
.available-profiles.form-select {
  border: 1.5px solid #e0e0e0; border-radius: 8px; padding: 10px 14px;
  font-size: 0.92rem; background: #fafafa; color: #3a3a3a; width: 100%; margin-bottom: 12px;
}

/* Address display block */
.profile .address {
  background: #f8f8f8; border-radius: 8px; padding: 14px 18px;
  font-size: 0.92rem; line-height: 1.7; color: #555;
  border: 1px solid #ebebeb; margin-bottom: 12px;
}

/* Apply coupon button */
input[name=apply_coupon], button[name=apply_coupon] {
  background: #f0f0f0; border: 1.5px solid #d0d0d0; color: #555;
  padding: 9px 20px; font-size: 0.82rem; font-weight: 600;
  border-radius: 8px; text-transform: uppercase; letter-spacing: 0.04em;
}

/* Coupon code input */
input[name*=coupon] {
  border: 1.5px solid #e0e0e0; border-radius: 8px;
  padding: 10px 14px; font-size: 0.92rem;
}

/* === CHECKOUT CONTINUE/NEXT BUTTON === */
.layout-region-checkout-main .form-actions input[name=op],
.layout-region-checkout-main .form-actions input.button--primary,
#commerce-checkout-flow-multistep-default input.button--primary {
  background: #e11d25; border: 2px solid #e11d25; color: #fff;
  padding: 14px 40px; font-size: 1.0rem; font-weight: 700;
  border-radius: 8px; letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(225, 29, 37,0.3); cursor: pointer;
  transition: all 0.25s ease;
}
.layout-region-checkout-main .form-actions input[name=op]:hover,
.layout-region-checkout-main .form-actions input.button--primary:hover,
#commerce-checkout-flow-multistep-default input.button--primary:hover {
  background: var(--tm-red-2) !important; border-color: var(--tm-red-2) !important;
  box-shadow: 0 6px 20px rgba(225, 29, 37,0.4); transform: translateY(-1px);
}

/* Coupon pane section */
.checkout-pane-coupon-redemption {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f0f0f0;
}

/* === COMMERCE.CSS overrides - Add to cart button === */
.field--name-price .field__item, .commerce-price {
  color: #ee4d2d; font-size: 1.5rem; font-weight: 600;
}
.add-to-cart-form .form-submit, form[id*="add-to-cart"] .form-submit {
  background-color: #ee4d2d; border-color: #ee4d2d; color: #fff;
  width: 100%; padding: 12px; font-size: 15px; border-radius: 3px;
}
.field--widget-commerce-product-variation-title .form-select { display: none; }

/* === SALE RIBBON === */
.sale-ribbon {
  position: absolute; top: 16px; right: -32px; width: 130px;
  background: #e53935; color: #fff; text-align: center;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 5px 0;
  transform: rotate(45deg); box-shadow: 0 2px 8px rgba(229,57,53,0.5);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .path-cart table.views-table thead { display: none; }
  .path-cart table.views-table tbody tr {
    display: block; padding: 12px 0; border-bottom: 1px solid #f0f0f0;
  }
  .path-cart table.views-table tbody td {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 12px; border: none;
  }
  [data-drupal-selector=order-total-summary] { max-width: 100%; }
  .path-cart #edit-actions { flex-direction: column; align-items: stretch; }
  .path-cart #edit-actions #edit-checkout, .path-cart #edit-actions #edit-submit { width: 100%; text-align: center; }
  .layout-region-checkout-main, .layout-region-checkout-secondary { padding: 18px 16px; }
}
@media (max-width: 768px) {
  .product-layout.row { flex-direction: column; flex-wrap: wrap; }
  .product-gallery-col, .product-info-col { flex: 0 0 100%; max-width: 100%; }
}

/* === CART: Variation styling === */
.path-cart .views-field-purchased-entity .field--name-product-id { font-weight: 600; font-size: 0.95rem; color: #2c2c2c; margin-bottom: 2px; }
.path-cart .views-field-purchased-entity .field--name-product-id a { color: #2c2c2c; text-decoration: none; font-weight: 600; }
.path-cart .views-field-purchased-entity .field--name-product-id a:hover { color: #e11d25; }
.path-cart .views-field-purchased-entity .field--name-title { font-size: 0.82rem; color: #888; font-weight: 400; margin-top: 2px; }

/* === ORDER SUMMARY: product name first, variation second === */
.layout-region-checkout-secondary .views-field-purchased-entity > div,
.checkout-pane-order-summary .views-field-purchased-entity > div { display: flex; flex-direction: column; }
.layout-region-checkout-secondary .field--name-product-id,
.checkout-pane-order-summary .field--name-product-id { order: 1; font-size: 0.88rem; font-weight: 600; color: #2c2c2c; }
.layout-region-checkout-secondary .field--name-product-id a,
.checkout-pane-order-summary .field--name-product-id a { color: #e11d25; text-decoration: none; font-weight: 600; font-size: 0.85rem; }
.layout-region-checkout-secondary .field--name-title,
.checkout-pane-order-summary .field--name-title { order: 2; font-size: 0.78rem; color: #999; font-weight: 400; margin-bottom: 2px; line-height:1.3rem; }

/* === COUPON CODE: Inline layout === */
.checkout-pane-coupon-redemption #edit-sidebar-coupon-redemption-form,
[id*=coupon-redemption] .js-form-wrapper { display: flex; flex-direction: row; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.checkout-pane-coupon-redemption .js-form-item,
[id*=coupon-redemption] .form-item { flex: 1; margin: 0; min-width: 120px; }
.checkout-pane-coupon-redemption label,
[id*=coupon-redemption] label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #888; margin-bottom: 4px; display: block; }
.checkout-pane-coupon-redemption input[type=text],
[id*=coupon-redemption] input[type=text] { border: 1.5px solid #e0e0e0; border-radius: 8px; padding: 10px 14px; font-size: 0.9rem; width: 100%; background: #fafafa; }
.checkout-pane-coupon-redemption input[name=apply_coupon],
[id*=coupon-redemption] input[name=apply_coupon] { background: #2c2c2c; border: 2px solid #2c2c2c; color: #fff; padding: 10px 16px; font-size: 0.78rem; font-weight: 700; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.checkout-pane-coupon-redemption input[name=apply_coupon]:hover { background: #444; border-color: #444; }

/* === REVIEW PAGE: Bold headings === */
.path-checkout fieldset[id*=review] legend .fieldset-legend { font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #2c2c2c; display: block; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 2px solid #f0f0f0; width: 100%; }
.path-checkout .checkout-review-edit-link { margin-left: 10px; }
.path-checkout .checkout-review-edit-link a { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #e11d25; text-decoration: none; padding: 2px 8px; border: 1px solid #e11d25; border-radius: 4px; }
.path-checkout .checkout-review-edit-link a:hover { background: #e11d25; color: #fff; }
.path-checkout fieldset[id*=review] { border: none; padding: 0; margin-bottom: 1.2rem; }
.path-checkout fieldset[id*=review] .fieldset-wrapper { background: #f8f8f8; border-radius: 8px; padding: 12px 16px; font-size: 0.9rem; color: #555; line-height: 1.7; border: 1px solid #ebebeb; }


/* ====================================================
   COMPLETE PAGE (checkout/XX/complete) STYLES
   ==================================================== */

/* Section headings: Contact information, Shipping information, Billing information */
.path-checkout fieldset[id*="completion-message"] {
  border: none;
  padding: 0;
  margin-bottom: 1.2rem;
}

.path-checkout fieldset[id*="completion-message"] legend .fieldset-legend {
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #2c2c2c;
  display: block;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
  width: 100%;
}

/* Address wrapper - styled like review page */
.path-checkout fieldset[id*="completion-message"] .fieldset-wrapper {
  background: #f8f8f8;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.7;
  border: 1px solid #ebebeb;
}

/* Customer name - bold */
.path-checkout .checkout-complete-main .given-name,
.path-checkout .checkout-complete-main .family-name,
.path-checkout fieldset[id*="completion-message"] .given-name,
.path-checkout fieldset[id*="completion-message"] .family-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: #1a1a1a;
}

/* Phone field - integrate inside address block (remove inline label) */
.path-checkout fieldset[id*="completion-message"] .field--name-field-phone {
  margin-top: 4px;
  display: block;
}

.path-checkout fieldset[id*="completion-message"] .field--name-field-phone .field__label {
  display: inline;
  font-weight: 600;
  color: #555;
  font-size: 0.85rem;
}

.path-checkout fieldset[id*="completion-message"] .field--name-field-phone .field__item {
  display: inline;
  font-size: 0.85rem;
  color: #555;
  margin-left: 4px;
}

.path-checkout fieldset[id*="completion-message"] .field--name-field-phone.clearfix::after {
  display: none;
}

/* Shipping method field */
.path-checkout fieldset[id*="completion-message"] .field--name-shipping-method .field__label {
  font-weight: 700;
  font-size: 0.85rem;
  color: #2c2c2c;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.path-checkout fieldset[id*="completion-message"] .field--name-shipping-method .field__item {
  font-size: 0.9rem;
  color: #555;
}

/* Contact information email */
.path-checkout fieldset[id*="completion-message-contact"] .fieldset-wrapper {
  font-size: 0.9rem;
  color: #555;
}

/* On complete page: override p.address card style so address+phone are unified in the outer card */
.path-checkout fieldset[id*="completion-message"] p.address {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 6px;
}

/* Phone field: display inline inside address block */
.path-checkout fieldset[id*="completion-message"] .field--name-field-phone {
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.path-checkout fieldset[id*="completion-message"] .field--name-field-phone .field__label {
  display: inline-block;
  font-weight: 600;
  color: #444;
  font-size: 0.88rem;
  flex-shrink: 0;
}

.path-checkout fieldset[id*="completion-message"] .field--name-field-phone .field__item {
  display: inline-block;
  font-size: 0.88rem;
  color: #555;
}

/* Shipping method wrapper: add top spacing and remove the nested card */
.path-checkout fieldset[id*="completion-message"] .field--name-shipping-method {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e0e0e0;
}

/* Profile wrapper: keep it clean */
.path-checkout fieldset[id*="completion-message"] .profile {
  margin-bottom: 0;
}