/*
 * File: css/commerce/checkout.css
 * Purpose: Styling for Checkout pages using theme variables.
 * Logic: Mobile First
 */

/* ==========================================================================
   1. LAYOUT STRUCTURE (Mobile First)
   ========================================================================== */

.wsdt-path-checkout .layout-checkout-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  width: 100%;
}

@media all and (min-width: 1024px) {
  .wsdt-path-checkout .layout-checkout-form {
    display: grid;
    grid-template-columns: 1fr calc(var(--unit-base) * 80); /* ~400px sidebar */
    gap: var(--space-xl);
    align-items: start;
  }

  /* Εξαίρεση για τη σελίδα Login & Complete: Μονόστηλο και κεντραρισμένο */
  .wsdt-path-checkout .layout-checkout-form:has(.checkout-pane-login),
  .wsdt-path-checkout .layout-checkout-form.checkout-complete-step {
    display: block; /* Disable grid for completion step */
    max-width: calc(var(--unit-base) * 160); /* ~800px max width */
    margin-left: auto;
    margin-right: auto;
  }

  /* Απόκρυψη sidebar στη σελίδα ολοκλήρωσης */
  .wsdt-path-checkout
    .layout-checkout-form.checkout-complete-step
    .layout-region-checkout-secondary,
  .path-checkout-complete .sidebar,
  .path-checkout-complete .layout-region-checkout-secondary,
  .path-checkout-complete aside {
    display: none !important;
    width: 0 !important;
    visibility: hidden !important;
  }

  /* Επέκταση του main region στο 100% στην ολοκλήρωση */
  .wsdt-path-checkout
    .layout-checkout-form.checkout-complete-step
    .layout-region-checkout-main,
  .path-checkout-complete .layout-region-checkout-main {
    width: 100% !important;
    max-width: 800px;
    margin: 0 auto;
  }

  /* Απόκρυψη των γενικών ενεργειών (κουμπί Συνέχεια) μόνο στο Login */
  .wsdt-path-checkout
    .layout-checkout-form:has(.checkout-pane-login)
    .form-actions {
    display: none !important;
  }

  .wsdt-path-checkout .layout-region-checkout-footer {
    grid-column: 1 / -1; /* Το footer πιάνει όλο το πλάτος (Main + Sidebar) */
  }
}

.wsdt-path-checkout .layout-region-checkout-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.wsdt-path-checkout .layout-region-checkout-secondary {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: var(
    --bg-gray-light
  ); /* Διακριτικό φόντο για το summary στο κινητό */
  padding: var(--space-md);
  border-radius: var(--radius-md);
}

@media all and (min-width: 1024px) {
  .wsdt-path-checkout .layout-region-checkout-secondary {
    position: sticky;
    top: var(--space-lg);
    background: transparent;
    padding: 0;
  }
}

/* ==========================================================================
   2. PANS / FIELDSETS (Cards)
   ========================================================================== */

.wsdt-path-checkout .checkout-pane {
  background: var(--base-white);
  border: var(--border-width-sm) solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-md); /* Μικρότερο padding για κινητά */
  box-shadow: var(--shadow-sm);
}

@media all and (min-width: 768px) {
  .wsdt-path-checkout .checkout-pane {
    padding: var(--space-lg); /* Μεγαλύτερο padding για tablet/desktop */
  }
}

/* Legend Styling */
.wsdt-path-checkout fieldset.checkout-pane {
  margin: 0;
  min-width: 0;
}

.wsdt-path-checkout fieldset.checkout-pane legend {
  display: block;
  width: 100%;
  margin-bottom: var(--space-md);
  padding: 0;
  border-bottom: var(--border-width-sm) solid var(--border-light);
  padding-bottom: var(--space-xs);
}

.wsdt-path-checkout .fieldset-legend {
  font-family: var(--h-font-family);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

/* ==========================================================================
   3. FORM ELEMENTS
   ========================================================================== */

.wsdt-path-checkout .form-item {
  margin-bottom: var(--space-md);
  width: 100%;
}

.wsdt-path-checkout .form-item label {
  display: block;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-xs);
  color: var(--text-title);
  font-size: var(--font-size-sm);
}

/* Force inputs to be full width and readable */
.wsdt-path-checkout .form-text,
.wsdt-path-checkout .form-email,
.wsdt-path-checkout .form-tel,
.wsdt-path-checkout .form-select,
.wsdt-path-checkout .form-number {
  width: 100% !important; /* Overriding Drupal size attribute */
  max-width: 100%;
  min-height: calc(var(--unit-base) * 9); /* Ensure good touch target */
  padding: var(--space-sm);
  border: var(--border-width-sm) solid var(--base-border);
  border-radius: var(--radius-sm);
  font-family: var(--p-font-family);
  font-size: 16px; /* Prevents iOS auto-zoom on focus */
  background-color: var(--base-white);
}

/* Inline Fields on Desktop */
@media all and (min-width: 640px) {
  .wsdt-path-checkout .address-container-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }
}

/* ==========================================================================
   4. SHIPPING METHODS (Radio Boxes)
   ========================================================================== */

.wsdt-path-checkout .field--name-shipping-method .fieldset-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.wsdt-path-checkout .form-type-radio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: var(--space-sm);
  border: var(--border-width-sm) solid var(--border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.wsdt-path-checkout .form-type-radio input[type="radio"] {
  margin-right: var(--space-sm);
  width: 20px;
  height: 20px;
}

.wsdt-path-checkout .form-type-radio label.option {
  flex: 1;
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0;
}

.wsdt-path-checkout .form-type-radio .description {
  width: 100%;
  margin-top: var(--space-xs);
  margin-left: 28px; /* Alignment with label text */
  font-size: var(--font-size-sm);
  opacity: 0.8;
}

/* ==========================================================================
   5. ORDER SUMMARY SPECIFICS
   ========================================================================== */

/* Review Page - Edit Links in Legends */
.wsdt-path-checkout .fieldset-legend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.wsdt-path-checkout .checkout-review-edit-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
}

.wsdt-path-checkout .checkout-review-edit-link a {
  color: var(--color-secondary);
  text-decoration: none;
  padding: var(--space-xs) var(--space-sm);
  border: var(--border-width-sm) solid var(--color-secondary);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.wsdt-path-checkout .checkout-review-edit-link a:hover {
  background-color: var(--color-secondary);
  color: var(--base-white);
}

/* Review Content Styling */
.wsdt-path-checkout .checkout-pane .fieldset-wrapper {
  color: var(--text-body);
  line-height: 1.6;
}

.wsdt-path-checkout .checkout-pane p.address {
  margin: 0;
  font-style: normal;
}

.wsdt-path-checkout .checkout-pane .field--label-above {
  margin-top: var(--space-sm);
}

.wsdt-path-checkout .checkout-pane .field__label {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  color: var(--text-title);
  margin-bottom: 2px;
}

/* Comments Textarea */
.wsdt-path-checkout .checkout-pane-customer-comments textarea {
  width: 100%;
  border: var(--border-width-sm) solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  font-family: var(--p-font-family);
}

/* Coupon Redemption Styling */
.wsdt-path-checkout #edit-sidebar-coupon-redemption-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.wsdt-path-checkout #edit-sidebar-coupon-redemption-form .form-item {
  margin-bottom: 0;
}

.wsdt-path-checkout #edit-sidebar-coupon-redemption-form-apply {
  background-color: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border: var(--btn-border-w) solid transparent !important;
  text-transform: uppercase;
  font-family: var(--h-font-family);
  font-weight: var(--h-font-weight);
  letter-spacing: var(--letter-spacing-sm);
  transition: var(--transition-main) !important;
  cursor: pointer;
}

.wsdt-path-checkout #edit-sidebar-coupon-redemption-form-apply:hover {
  background-color: var(--btn-text) !important;
  color: var(--color-secondary) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

/* Order Summary Table/Sidebar Specifics */
.wsdt-path-checkout .layout-region-checkout-secondary h3 {
  font-family: var(--h-font-family);
  font-size: var(--font-size-h2); /* Μεγαλύτερος τίτλος */
  margin-bottom: var(--space-md);
  color: var(--color-primary);
  border-bottom: var(--border-width-md) solid var(--color-primary);
  padding-bottom: var(--space-xs);
}

.wsdt-path-checkout .wsdt-checkout-summary {
  width: 100%;
}

#edit-shipping-information-shipping-profile-edit-button,
#edit-shipping-information-recalculate-shipping {
  margin: 10px 0px;
}

/* ==========================================================================
   6. FOOTER ACTIONS
   ========================================================================== */

.wsdt-path-checkout .layout-region-checkout-footer {
  margin-top: var(--space-xl);
  border-radius: var(--radius-md);
}

.wsdt-path-checkout .form-actions {
  display: flex;
  flex-direction: column; /* Stack buttons on mobile */
  gap: var(--space-md);
}

/* Unified Button Base (Strictly following 07.buttons.css) */
.wsdt-path-checkout .button,
.wsdt-path-checkout .link--previous {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius);
  font-family: var(--h-font-family);
  font-weight: var(--h-font-weight);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-sm);
  font-size: var(--font-size-base);
  text-decoration: none;
  cursor: pointer;
  transition: var(--interaction-transition);
  width: 100%; /* Full width on mobile */
  box-sizing: border-box;
  border: var(--btn-border-w) solid transparent;
  line-height: 1; /* Fixed line height to prevent vertical expansion */
  white-space: nowrap; /* Prevent text wrapping into two lines */
  min-height: 48px; /* Standardize height for both <input> and <a> */
  margin: 0;
}

/* Primary Button Action */
.wsdt-path-checkout .button {
  background-color: var(--btn-bg);
  color: var(--btn-text);
}

.wsdt-path-checkout .button:hover {
  background-color: var(--btn-text);
  color: var(--color-secondary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-secondary);
}

/* Previous Link as Secondary Outline Button */
.wsdt-path-checkout .link--previous {
  background-color: transparent;
  color: var(--text-body);
  border: var(--btn-border-w) solid var(--text-body) !important; /* Force correct border thickness */
  gap: var(--space-sm);
}

.wsdt-path-checkout .link--previous:hover {
  background-color: var(--text-body);
  color: var(--text-on-dark);
  border-color: var(--text-body);
  transform: translateY(var(--interaction-lift)); /* Match global button lift */
  box-shadow: var(--shadow-card-hover);
}

@media all and (min-width: 640px) {
  .wsdt-path-checkout .form-actions {
    flex-direction: row; /* Δίπλα-δίπλα */
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-md);
  }

  .wsdt-path-checkout .button,
  .wsdt-path-checkout .link--previous {
    width: auto; /* Auto width on desktop */
  }
}

/* Checkboxes Styling */
.wsdt-path-checkout .form-type-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
  cursor: pointer;
}

.wsdt-path-checkout .form-type-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-secondary);
}

.wsdt-path-checkout .form-type-checkbox label.option {
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-sm);
  color: var(--text-body);
  margin-bottom: 0;
  cursor: pointer;
}