/*
 * Custom Kavaalya Student Dashboard fixes
 *
 * This stylesheet provides UI and UX improvements for the My Account area.
 * It is loaded after the core account stylesheet so that its rules take
 * precedence. All selectors are scoped to WooCommerce account pages to
 * prevent unintended side‑effects.
 */

/* Hide the account shell intro on orders, payment methods and profile pages. */
.woocommerce-account .woocommerce-MyAccount-content.ksd-account-page--orders .ksd-account-shell__intro,
.woocommerce-account .woocommerce-MyAccount-content.ksd-account-page--payment-methods .ksd-account-shell__intro,
.woocommerce-account .woocommerce-MyAccount-content.ksd-account-page--profile .ksd-account-shell__intro {
  display: none;
}

/* ------------------------------------------------------------------------
   Prevent the account UI from flashing a blank white block.
   Keep the server-rendered content visible by default and only fade the
   enhanced account chrome after JS initialises the page classes.
   ------------------------------------------------------------------------ */
html.ksd-account-ui-pending .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page {
  opacity: 0;
  transform: translateY(8px);
}
html.ksd-account-ui-ready .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page {
  opacity: 1;
  transform: none;
  transition: opacity .18s ease, transform .18s ease;
}

/* Responsive adjustments for small screens */
@media (max-width: 767px) {
  /* Place the hero icon above the heading and centre the text */
  .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page .ksd-account-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page .ksd-account-hero__visual {
    order: -1;
    margin-bottom: 0;
  }
  .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page .ksd-account-hero__content {
    order: 1;
  }

  /* Reduce the size of the hero icon and orb for better balance */
  .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page .ksd-account-hero__icon {
    width: 100px;
    height: 100px;
  }
  .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page .ksd-account-hero__icon > span {
    font-size: 36px;
  }
  .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page .ksd-account-hero__orb {
    width: 140px;
    height: 140px;
  }

  /* Remove extra space above the hero section */
  .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page .ksd-account-hero {
    margin-top: 0;
  }
  /* Increase padding on shells and panels for breathing room */
  .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page .ksd-account-shell,
  .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page--profile .ksd-profile-panel,
  .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page--profile .ksd-profile-actions {
    padding: 20px;
    margin-bottom: 20px;
  }
  /* Make order and payment method blocks more compact and balanced */
  .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page--orders table tbody tr,
  .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page--payment-methods table tbody tr {
    margin-bottom: 12px;
    padding: 14px;
    border-radius: 16px;
    box-shadow: 0 8px 16px rgba(17,24,39,.04);
  }

  .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page--orders table tbody td,
  .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page--payment-methods table tbody td {
    padding: 8px 0;
  }

  .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page--orders table tbody td::before,
  .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page--payment-methods table tbody td::before {
    margin-bottom: 4px;
    font-size: 10px;
  }

  .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page--orders .woocommerce-orders-table__cell-order-actions .button,
  .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page--orders .woocommerce-orders-table__cell-order-actions a.button,
  .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page--orders .woocommerce-orders-table__cell-order-actions .woocommerce-button {
    min-height: 40px;
    padding: 0 12px;
  }
}

/* ------------------------------------------------------------------------
   Loading overlay: display a spinner when an action is processing.
   This overlay appears when the `ksd-loading` class is applied to the
   documentElement and fades out when removed.
   ------------------------------------------------------------------------ */
html.ksd-loading::before {
  content: '';
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.6);
}
html.ksd-loading::after {
  content: '';
  position: fixed;
  z-index: 100001;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  border-radius: 50%;
  border: 4px solid rgba(194,146,46,.4);
  border-top-color: rgba(194,146,46,1);
  animation: ksd-spin 1s linear infinite;
}
@keyframes ksd-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------------
   Elementor / theme mobile spacing cleanup for My Account pages.
   Removes the inherited 60px top padding above the account widget.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .woocommerce-account .page-content .e-con-inner,
  .woocommerce-account .elementor .e-con-boxed > .e-con-inner,
  .woocommerce-account .elementor-widget-woocommerce-my-account,
  .woocommerce-account .elementor-widget-woocommerce-my-account > .elementor-widget-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page--orders,
  .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page--payment-methods,
  .woocommerce-account .woocommerce-MyAccount-content.ksd-account-page--profile {
    padding-top: 0 !important;
  }
}