/* ==========================================================================
   PAGES.CSS — Page-Specific Styles
   ==========================================================================
   Styles unique to specific pages that don't belong in components.
   ========================================================================== */

/* ==========================================================================
   HERO SECTIONS (all pages)
   ========================================================================== */

.hero {
  position: relative;
  min-height: 614px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero--center {
  justify-content: center;
  text-align: center;
}

.hero--padded {
  padding-top: 8rem;
  padding-bottom: 5rem;
}

.hero__content {
  position: relative;
  z-index: 10;
}

.hero__label {
  font-family: var(--font-body);
  font-size: var(--text-label-bold);
  line-height: var(--text-label-bold-lh);
  letter-spacing: 0.2em;
  font-weight: var(--text-label-bold-fw);
  color: var(--secondary);
  text-transform: uppercase;
  display: block;
  margin-bottom: 1rem;
}

.hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-lg-mobile);
  line-height: var(--text-headline-lg-mobile-lh);
  letter-spacing: var(--text-headline-lg-mobile-ls);
  font-weight: var(--text-headline-lg-mobile-fw);
  color: var(--primary);
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .hero__title {
    font-size: var(--text-display-xl);
    line-height: var(--text-display-xl-lh);
    letter-spacing: var(--text-display-xl-ls);
    font-weight: var(--text-display-xl-fw);
  }
}

.hero__title--lg {
  font-size: var(--text-headline-lg-mobile);
}

@media (min-width: 768px) {
  .hero__title--lg {
    font-size: var(--text-display-lg);
    line-height: var(--text-display-lg-lh);
    letter-spacing: var(--text-display-lg-ls);
    font-weight: var(--text-display-lg-fw);
  }
}

.hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-lh);
  color: var(--on-surface-variant);
  margin-bottom: 2.5rem;
}

.hero__highlight {
  color: var(--secondary);
}

/* Strategist badge */
.hero__strategist {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #ffffff;
  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.hero__strategist img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.hero__strategist-name {
  font-size: 12px;
  font-weight: var(--text-label-bold-fw);
  color: var(--primary);
  line-height: 1;
  margin-bottom: 2px;
}

.hero__strategist-role {
  font-size: 10px;
  color: var(--on-surface-variant);
  line-height: 1;
}

/* ==========================================================================
   HOME: PROBLEM VS SOLUTION
   ========================================================================== */

.problem-solution__card {
  padding: 2rem;
  border-radius: var(--radius-2xl);
  position: relative;
  overflow: hidden;
  /* GPU acceleration to prevent border rendering jitter against the animated background */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

.problem-solution__card--problem {
  background: rgba(253, 242, 242, 0.85);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1.5px solid rgba(186, 26, 26, 0.12);
}

.problem-solution__card--solution {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1.5px solid rgba(0, 88, 190, 0.15);
}

.problem-solution__heading {
  font-family: var(--font-heading);
  font-size: var(--text-headline-md);
  line-height: var(--text-headline-md-lh);
  font-weight: var(--text-headline-md-fw);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.problem-solution__heading--problem {
  color: var(--error);
}

.problem-solution__heading--solution {
  color: var(--secondary);
}

.problem-solution__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.problem-solution__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--on-surface-variant);
  margin-bottom: 1rem;
}

.problem-solution__list li .material-symbols-outlined {
  padding-top: 0.25rem;
  flex-shrink: 0;
}

/* ==========================================================================
   HOME: PROCESS SECTION
   ========================================================================== */

.process-section {
  background: #000000 !important;
  background-color: #000000 !important;
  color: var(--on-primary);
}

.process-step {
  text-align: center;
}

.process-step__number {
  width: 3rem;
  height: 3rem;
  background-color: var(--secondary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-weight: 700;
  color: var(--on-secondary);
}

.process-step__title {
  font-weight: var(--text-label-bold-fw);
  margin-bottom: 0.5rem;
}

.process-step__text {
  color: var(--secondary-fixed-dim);
  font-size: 14px;
}

/* Process Strip (Packages page) */
.process-strip {
  background-color: var(--primary);
  color: var(--on-primary);
  padding: 1.5rem 2rem;
  border-radius: var(--radius-2xl);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  box-shadow: var(--shadow-xl);
  margin-bottom: 4rem;
}

.process-strip__step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.process-strip__number {
  width: 2rem;
  height: 2rem;
  background-color: var(--secondary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.process-strip__label {
  font-weight: 700;
}

/* ==========================================================================
   HOME: LEAD FORM SECTION
   ========================================================================== */

.lead-form {
  border-radius: var(--radius-3xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-2xl);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  /* GPU acceleration to prevent border rendering jitter against the animated background */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

@media (min-width: 768px) {
  .lead-form {
    flex-direction: row;
  }
}

.lead-form__info {
  width: 100%;
  background-color: var(--primary);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) {
  .lead-form__info {
    width: 41.66%;
  }
}

.lead-form__info h2 {
  color: var(--on-primary);
  margin-bottom: 1.5rem;
}

.lead-form__info p {
  color: var(--secondary-fixed-dim);
  margin-bottom: 2rem;
}

.lead-form__benefit {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--on-primary);
  margin-bottom: 1.5rem;
}

.lead-form__fields {
  width: 100%;
  padding: 3rem;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

@media (min-width: 768px) {
  .lead-form__fields {
    width: 58.34%;
  }
}

.lead-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .lead-form__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   SERVICES: DETAIL BLOCKS
   ========================================================================== */

.service-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}

@media (min-width: 768px) {
  .service-detail {
    grid-template-columns: repeat(2, 1fr);
  }
}

.service-detail--reverse .service-detail__content {
  order: 2;
}

@media (min-width: 768px) {
  .service-detail--reverse .service-detail__content {
    order: 1;
  }

  .service-detail--reverse .service-detail__media {
    order: 2;
  }
}

.service-detail__media {
  order: 1;
}

.service-detail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-2xl);
  transition: transform var(--transition-image);
}

.service-detail:hover .service-detail__media img {
  transform: scale(1.05);
}

.service-detail__tagline {
  font-weight: var(--text-label-bold-fw);
  color: var(--secondary);
  font-style: italic;
  margin-bottom: 1.5rem;
}

.service-detail__features {
  margin-bottom: 2.5rem;
}

.service-detail__feature {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.service-detail__feature-title {
  font-weight: var(--text-label-bold-fw);
  font-size: var(--text-label-bold);
  letter-spacing: var(--text-label-bold-ls);
  color: var(--primary);
}

.service-detail__feature-text {
  color: var(--on-surface-variant);
}

/* Service 3: Branding Section */
.branding-section {
  padding: 3rem;
  border-radius: var(--radius-3xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .branding-section {
    padding: 5rem;
  }
}

.branding-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  text-align: left;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .branding-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.branding-grid__item {
  padding: 1.5rem;
  border-radius: var(--radius-2xl);
}

.branding-grid__icon {
  width: 3rem;
  height: 3rem;
  background-color: var(--primary);
  color: var(--on-primary);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.branding-grid__title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: var(--text-headline-md-fw);
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.branding-grid__text {
  color: var(--on-surface-variant);
}

/* ==========================================================================
   PACKAGES: COMPARISON TABLE (Desktop)
   ========================================================================== */

.comparison-table {
  width: 100%;
  border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
  padding: 1rem 1.5rem;
  text-align: left;
  border-bottom: 1px solid rgba(198, 198, 205, 0.2);
}

.comparison-table th {
  font-weight: var(--text-label-bold-fw);
  color: var(--primary);
  text-transform: uppercase;
  font-size: var(--text-label-bold);
  letter-spacing: var(--text-label-bold-ls);
}

.comparison-table td {
  color: var(--on-surface-variant);
}

.comparison-table .material-symbols-outlined {
  color: var(--secondary);
}

/* ==========================================================================
   ABOUT: BENTO GRID
   ========================================================================== */

.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(12, 1fr);
  }
}

.bento-card {
  border-radius: var(--radius-xl);
  padding: 2.5rem;
}

.bento-card--story {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .bento-card--story {
    grid-column: span 8;
  }
}

.bento-card--stats {
  background-color: var(--primary);
  color: var(--on-primary);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-xl);
}

@media (min-width: 768px) {
  .bento-card--stats {
    grid-column: span 4;
  }
}

.bento-card--experience {
  padding: 2rem;
}

@media (min-width: 768px) {
  .bento-card--experience {
    grid-column: span 4;
  }
}

.bento-card--person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  border: 1.5px solid rgba(0, 88, 190, 0.12);
  /* GPU acceleration to prevent border rendering jitter against the animated background */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

@media (min-width: 768px) {
  .bento-card--person {
    grid-column: span 8;
    flex-direction: row;
  }
}

.bento-card__avatar {
  width: 8rem;
  height: 8rem;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
  border: 4px solid #ffffff;
  box-shadow: var(--shadow-md);
}

.bento-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bento-card__stat-value {
  font-family: var(--font-heading);
  font-size: var(--text-display-lg);
  line-height: var(--text-display-lg-lh);
  font-weight: var(--text-display-lg-fw);
  margin-bottom: 0.5rem;
}

.bento-card__stat-label {
  font-size: var(--text-label-bold);
  font-weight: var(--text-label-bold-fw);
  color: rgba(255, 255, 255, 0.6);
}

.bento-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bento-card__list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(198, 198, 205, 0.2);
}

/* ==========================================================================
   ABOUT: CONTACT SECTION
   ========================================================================== */

.contact-whatsapp {
  padding: 2rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .contact-whatsapp {
    align-items: flex-start;
  }
}

.contact-whatsapp__header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.contact-whatsapp__title-label {
  font-size: var(--text-label-bold);
  font-weight: var(--text-label-bold-fw);
  letter-spacing: var(--text-label-bold-ls);
  color: var(--on-surface-variant);
  text-transform: uppercase;
}

.contact-whatsapp__title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-md);
  line-height: var(--text-headline-md-lh);
  font-weight: var(--text-headline-md-fw);
  color: var(--whatsapp-green);
}

.contact-response-time {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
}

.contact-response-time .material-symbols-outlined {
  color: var(--secondary);
}

/* ==========================================================================
   PRODUCTS: NEWSLETTER SECTION
   ========================================================================== */

.newsletter {
  border-radius: var(--radius-2xl);
  padding: 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-2xl);
}

@media (min-width: 768px) {
  .newsletter {
    padding: 5rem;
  }
}

.newsletter__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 32rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .newsletter__form {
    flex-direction: row;
  }
}

.newsletter__form .form-input {
  flex-grow: 1;
  border: 2px solid transparent;
  background: rgba(225, 227, 228, 0.3);
}

.newsletter__form .form-input:focus {
  border-color: var(--secondary);
  background: #ffffff;
}

/* ==========================================================================
   CTA SECTION (Services page)
   ========================================================================== */

.cta-section {
  background: var(--primary) !important;
  background-color: var(--primary) !important;
  color: var(--on-primary);
  overflow: hidden;
  position: relative;
}

.cta-section__content {
  position: relative;
  z-index: 10;
  text-align: center;
}

.cta-section__subtitle {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2.5rem;
}

/* ==========================================================================
   404 PAGE
   ========================================================================== */

.page-404 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.page-404__code {
  font-family: var(--font-heading);
  font-size: 120px;
  font-weight: 800;
  color: var(--secondary);
  line-height: 1;
  margin-bottom: 1rem;
  letter-spacing: -0.04em;
}

@media (min-width: 768px) {
  .page-404__code {
    font-size: 200px;
  }
}

/* ==========================================================================
   E-COMMERCE TEMPLATES (Cart, Checkout, My Account, Order Confirmation)
   ========================================================================== */

/* Cart Page */
.cart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
  /* Bolder brand-color treatment: soft blue-tinted backdrop behind the
     whole cart layout, so the glass cards have color showing through
     instead of sitting on flat white. Negative margin is kept small on
     mobile (container padding is only 20px there) to avoid pushing
     content past the viewport edge -- the wider bleed only kicks in
     once there's room for it. */
  position: relative;
  border-radius: var(--radius-3xl);
  padding: 1rem;
  margin: -1rem;
  background:
    radial-gradient(at 0% 0%, rgba(0, 88, 190, 0.10) 0, transparent 55%),
    radial-gradient(at 100% 100%, rgba(0, 118, 247, 0.08) 0, transparent 55%);
}

/* CSS Grid items default to min-width: auto, meaning they refuse to
   shrink below their content's intrinsic minimum width even when their
   grid track is narrower (e.g. the 1fr track on mobile). With a wide
   table or long unbreakable content inside, the grid item -- and
   everything inside it -- ends up sized by content rather than by the
   actual track width, which is why nearly every direct child of
   .cart-grid was measuring wider than .cart-grid itself. This is the
   standard, well-documented fix. */
.cart-grid > * {
  min-width: 0;
}

@media (min-width: 600px) {
  .cart-grid {
    padding: 2rem;
    margin: -2rem;
  }
}

@media (min-width: 768px) {
  .cart-grid {
    grid-template-columns: 8fr 4fr;
  }
}

/* Stronger blue-tinted card backgrounds (overrides the flat translucent
   --glass-bg used elsewhere) so brand color is clearly visible, not just
   a faint backdrop blur. */
.cart-grid .glass-card {
  background: linear-gradient(160deg, rgba(0, 88, 190, 0.06) 0%, rgba(255, 255, 255, 0.92) 45%);
  border: 1.5px solid rgba(0, 88, 190, 0.14);
}

/* Responsive padding for the main cart cards. Previously this was an
   inline style="padding: 2rem" directly in the PHP template, which has
   higher specificity than any external stylesheet rule -- meaning no
   media query here could ever override it, regardless of screen size.
   That fixed 32px of padding on each side was the actual cause of the
   cart page's mobile overflow (confirmed via live inspector: a 414px
   viewport rendering a 426.688px-wide card). */
.cart-main-card {
  padding: 1.25rem;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

@media (min-width: 600px) {
  .cart-main-card {
    padding: 2rem;
  }
}

.cart-actions-cell {
  padding: 1.25rem 0.5rem;
  border-bottom: 0;
}

@media (min-width: 600px) {
  .cart-actions-cell {
    padding: 2rem 1rem;
  }
}

/* Cart actions row: coupon form + Update Cart button. Previously used
   float: left / float: right with no mobile handling at all -- floats
   don't wrap on narrow screens, so the input + two buttons just kept
   extending horizontally and dragged the whole table (and card) wider
   than the viewport. Now a proper flex layout that wraps/stacks instead. */
.cart-actions-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.cart-actions-row .coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.cart-actions-row .coupon .input-text {
  padding: 0.75rem 1rem;
  background: rgba(237, 238, 239, 0.3);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  font-size: 14px;
  width: 100%;
  max-width: 12rem;
  min-width: 0;
  height: auto;
  box-sizing: border-box;
}

.cart-actions-row .coupon .button {
  padding: 0.75rem 1.5rem;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  height: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

.cart-update-btn {
  /* Hidden: cart updates now happen automatically when a quantity
     changes (see assets/js/cart-auto-update.js), which works by
     programmatically clicking this exact button -- so it must stay in
     the DOM and remain fully functional, just not visible. This keeps
     WooCommerce's own update_cart click handler and AJAX behavior
     completely untouched. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 480px) {
  .cart-actions-row {
    flex-direction: column;
    align-items: stretch;
  }

  .cart-actions-row .coupon {
    flex-direction: column;
    align-items: stretch;
  }

  .cart-actions-row .coupon .input-text {
    max-width: 100%;
    width: 100%;
  }

  .cart-actions-row .coupon .button {
    width: 100%;
    flex-shrink: 1;
  }
}

.cart-grid .totals-card {
  background: transparent;
  border: none;
}

.cart-table-wrapper {
  overflow-x: auto;
  margin-bottom: 2rem;
}

.cart-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-collapse: collapse;
}

.cart-table th,
.cart-table td {
  padding: 1.5rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(198, 198, 205, 0.2);
}

.cart-table th {
  font-family: var(--font-body);
  font-size: var(--text-label-bold);
  text-transform: uppercase;
  color: var(--on-surface-variant);
  letter-spacing: var(--text-label-bold-ls);
  font-weight: 700;
  padding-bottom: 1rem;
}

.cart-item__product {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.cart-item__image {
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-lg);
  object-fit: cover;
  flex-shrink: 0;
  background-color: var(--surface-container);
}

.cart-item__title {
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.cart-item__meta {
  font-size: 14px;
  color: var(--on-surface-variant);
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 2px;
}

.qty-stepper__btn {
  background: none;
  border: none;
  color: var(--on-surface-variant);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.qty-stepper__btn:hover {
  color: var(--primary);
  background: rgba(0, 0, 0, 0.05);
}

.qty-stepper__input {
  width: 2.5rem;
  text-align: center;
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-body-md);
  color: var(--primary);
  outline: none;
}

.btn-remove {
  background: none;
  border: none;
  color: var(--outline);
  cursor: pointer;
  padding: var(--space-sm);
  border-radius: var(--radius-full);
  transition: color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-remove:hover {
  color: var(--error);
  background: rgba(186, 26, 26, 0.05);
}

.totals-card {
  border-radius: var(--radius-2xl);
}

.totals-card__title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--outline-variant);
  padding-bottom: 1rem;
}

.totals-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  color: var(--on-surface-variant);
}

.totals-card__row--total {
  border-top: 1px solid var(--outline-variant);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  color: var(--primary);
}

.totals-card__total-price {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
}

/* Checkout Page */
.checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: start;
  /* Bolder brand-color treatment, matching the cart page. Negative
     margin kept small on mobile to avoid overflowing the 20px container
     padding -- see .cart-grid for the full explanation. */
  position: relative;
  border-radius: var(--radius-3xl);
  padding: 1rem;
  margin: -1rem;
  background:
    radial-gradient(at 0% 0%, rgba(0, 88, 190, 0.10) 0, transparent 55%),
    radial-gradient(at 100% 100%, rgba(0, 118, 247, 0.08) 0, transparent 55%);
}

@media (min-width: 600px) {
  .checkout-grid {
    padding: 1.5rem;
    margin: -1.5rem;
  }
}

@media (min-width: 768px) {
  .checkout-grid {
    grid-template-columns: 7fr 5fr;
  }
}

.checkout-grid .glass-card {
  background: linear-gradient(160deg, rgba(0, 88, 190, 0.06) 0%, rgba(255, 255, 255, 0.92) 45%);
  border: 1.5px solid rgba(0, 88, 190, 0.14);
}

.checkout-section {
  margin-bottom: 3rem;
}

.checkout-section__title {
  font-family: var(--font-heading);
  font-size: var(--text-headline-md);
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.checkout-section__step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 700;
}

.checkout-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .checkout-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .checkout-form-grid__span-2 {
    grid-column: span 2;
  }
}

.phone-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.phone-input-prefix {
  position: absolute;
  left: 1rem;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--on-surface-variant);
  pointer-events: none;
}

.phone-input-group .form-input {
  padding-left: 4.5rem;
}

.payment-methods-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .payment-methods-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.payment-method-card {
  cursor: pointer;
  position: relative;
}

.payment-method-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.payment-method-card__content {
  border: 2px solid transparent;
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all var(--transition-base);
}

.payment-method-card input[type="radio"]:checked + .payment-method-card__content {
  border-color: var(--secondary);
  background-color: rgba(0, 88, 190, 0.04);
}

.payment-method-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background-color: var(--surface-container);
  color: var(--secondary);
}

.payment-method-card__icon--bkash {
  background-color: rgba(225, 19, 110, 0.1);
  color: #E1136E;
}

.payment-method-card__icon--nagad {
  background-color: rgba(246, 146, 30, 0.1);
  color: #f6921e;
}

.payment-instructions-box {
  background: rgba(0, 88, 190, 0.04);
  border: 1px solid rgba(0, 88, 190, 0.15);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.order-summary-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.order-summary-item__image {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-lg);
  object-fit: cover;
  flex-shrink: 0;
}

/* My Account Page */
.auth-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .auth-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.dashboard-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 992px) {
  .dashboard-layout {
    grid-template-columns: 3fr 9fr;
  }
}

.dashboard-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dashboard-nav-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--radius-lg);
  color: var(--on-surface-variant);
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.dashboard-nav-item:hover {
  background-color: var(--surface-container-low);
  color: var(--primary);
}

.dashboard-nav-item--active {
  background-color: var(--primary);
  color: var(--on-primary);
}

.dashboard-nav-item--active:hover {
  background-color: var(--primary);
  color: var(--on-primary);
}

.dashboard-nav-item--danger {
  color: var(--error);
}

.dashboard-nav-item--danger:hover {
  background-color: rgba(186, 26, 26, 0.05);
  color: var(--error);
}

/* Order Confirmation Page */
.success-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 44rem;
  margin: 0 auto;
}

.success-icon-container {
  position: relative;
  margin-bottom: 2rem;
}

.success-icon {
  width: 6rem;
  height: 6rem;
  background-color: var(--secondary);
  color: var(--on-secondary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(0, 88, 190, 0.3);
}

.success-icon .material-symbols-outlined {
  font-size: 3rem;
  font-variation-settings: 'FILL' 1;
}

.success-glow {
  position: absolute;
  inset: -1rem;
  background: rgba(0, 88, 190, 0.1);
  filter: blur(20px);
  border-radius: var(--radius-full);
  z-index: -1;
}

.confirm-details-card {
  width: 100%;
  border-radius: var(--radius-xl);
  padding: 2rem;
  text-align: left;
  margin-bottom: 3rem;
}

/* ==========================================================================
   WOOCOMMERCE NATIVE STYLES OVERRIDES
   ========================================================================== */

/* NOTE: a legacy ".woocommerce-cart .woocommerce { display:grid; ... }"
   rule used to live here, pre-dating the custom .cart-grid template
   override and never cleaned up. WooCommerce wraps its notices in their
   own separate ".woocommerce" div (distinct from the actual cart content
   wrapper) -- so that old rule was also turning the notices wrapper into
   an 8fr/4fr grid, forcing the single notice message into a narrow first
   column with empty space beside it. Removed entirely; .cart-grid
   (defined in cart.php's template override) is the only grid this page
   needs, and it already produces the correct full-width layout. */

/* Cart Table Styles */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  border: 0;
  margin-bottom: 2rem;
}

.woocommerce table.shop_table th {
  font-family: var(--font-body);
  font-size: var(--text-label-bold);
  text-transform: uppercase;
  color: var(--on-surface-variant);
  letter-spacing: var(--text-label-bold-ls);
  font-weight: 700;
  padding: 1.5rem 1rem;
  border-bottom: 1px solid rgba(198, 198, 205, 0.2);
}

.woocommerce table.shop_table td {
  padding: 1.5rem 1rem;
  border-bottom: 1px solid rgba(198, 198, 205, 0.2);
  vertical-align: middle;
}

.woocommerce-cart-form__cart-item td.product-thumbnail img {
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-lg);
  object-fit: cover;
  background-color: var(--surface-container);
}

.woocommerce-cart-form__cart-item td.product-name a {
  font-family: var(--font-heading);
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.woocommerce-cart-form__cart-item td.product-name a:hover {
  color: var(--secondary);
}

/* Quantity inputs */
.woocommerce .quantity .qty {
  width: 3.5rem;
  height: 2.5rem;
  padding: 0.25rem;
  text-align: center;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  font-weight: 600;
  color: var(--primary);
}

/* Remove button */
.woocommerce a.remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-lg) !important;
  background: transparent !important;
  color: var(--on-surface-variant) !important;
  font-size: 1.5rem !important;
  line-height: 1;
  border: 1px solid var(--outline-variant) !important;
  transition: all 0.3s ease;
  text-decoration: none !important;
}

.woocommerce a.remove:hover {
  background: rgba(220, 38, 38, 0.1) !important;
  color: #dc2626 !important;
  border-color: #dc2626 !important;
}

/* Coupon & Table actions */
.woocommerce-cart-form td.actions {
  padding: 2rem 1rem !important;
  border-bottom: 0 !important;
}

.woocommerce-cart-form .coupon {
  display: flex;
  gap: 1rem;
  float: left;
}

.woocommerce-cart-form td.actions .button {
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  height: auto;
  line-height: 1.2;
}

.woocommerce-cart-form .coupon .input-text {
  background: rgba(237, 238, 239, 0.3);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 0.75rem 1rem;
  color: var(--primary);
  font-size: 14px;
  height: auto;
}

.woocommerce-cart-form .coupon button.button {
  background: transparent;
  color: var(--secondary);
  border: 1px solid var(--secondary);
}

.woocommerce-cart-form .coupon button.button:hover {
  background: var(--secondary);
  color: #fff;
}

.woocommerce-cart-form button[name="update_cart"] {
  float: right;
  background: var(--secondary);
  color: #fff;
  border: 1px solid var(--secondary);
}

.woocommerce-cart-form button[name="update_cart"]:hover {
  opacity: 0.9;
}

/* Cart Collaterals */
.woocommerce .cart-collaterals,
.woocommerce .cart_totals {
  width: 100% !important;
  float: none !important;
}

.woocommerce .cart_totals {
  background: linear-gradient(160deg, rgba(0, 88, 190, 0.12) 0%, rgba(255, 255, 255, 0.95) 55%);
  backdrop-filter: blur(20px);
  border: 1.5px solid rgba(0, 88, 190, 0.2);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
}

.woocommerce .cart_totals h2 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.woocommerce .cart_totals table.shop_table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.woocommerce .cart_totals table.shop_table tr th,
.woocommerce .cart_totals table.shop_table tr td {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(198, 198, 205, 0.2);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.woocommerce .cart_totals table.shop_table tr th {
  font-weight: 600;
  color: var(--on-surface-variant);
  text-transform: none;
  letter-spacing: normal;
  font-size: 15px;
}

.woocommerce .cart_totals table.shop_table tr td {
  text-align: right;
  font-weight: 700;
  color: var(--primary);
}

.woocommerce .cart_totals table.shop_table tr.order-total th,
.woocommerce .cart_totals table.shop_table tr.order-total td {
  border-bottom: 0;
  font-size: 18px;
  padding-top: 1.5rem;
}

.woocommerce .cart_totals table.shop_table tr.order-total td span {
  font-size: 24px;
  color: var(--secondary);
}

/* Proceed to checkout button */
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1.25rem 2rem;
  background: linear-gradient(135deg, #0058be 0%, #0076f7 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
  opacity: 0.9;
  box-shadow: 0 4px 15px rgba(0, 88, 190, 0.25);
}

/* NOTE: a legacy ".woocommerce-checkout form.checkout { display:grid; ... }"
   rule used to live here (7.5fr/4.5fr), duplicating and conflicting with
   .checkout-grid (7fr/5fr) which is the class actually applied to the
   <form> element in form-checkout.php's template override. Same dead-code
   pattern as the cart page bug -- removed entirely. */

/* Billing & Customer fields */
.woocommerce-checkout #customer_details {
  width: 100% !important;
  float: none !important;
}

.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin-bottom: 2rem;
}

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
  background: linear-gradient(160deg, rgba(0, 88, 190, 0.07) 0%, rgba(255, 255, 255, 0.93) 50%);
  backdrop-filter: blur(20px);
  border: 1.5px solid rgba(0, 88, 190, 0.16);
  border-radius: var(--radius-2xl);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
}

.woocommerce-checkout h3 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  margin-top: 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--outline-variant);
  padding-bottom: 0.75rem;
}

/* Form input styling */
.woocommerce-checkout .form-row {
  padding: 0;
  margin-bottom: 1.1rem;
  width: 100%;
}

.woocommerce-checkout .form-row label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.35rem;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  width: 100%;
  padding: 0.7rem 1.1rem;
  background: rgba(237, 238, 239, 0.3);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  color: var(--primary);
  font-family: var(--font-body);
  font-size: 15px;
  transition: all 0.3s ease;
  height: auto;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
  background: #fff;
  border-color: var(--secondary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 88, 190, 0.1);
}

.woocommerce-checkout .form-row.notes textarea {
  height: 6rem;
  resize: vertical;
}

/* Checkout Order Review (Right-hand Sidebar) */
.woocommerce-checkout #order_review_heading {
  display: none;
}

.woocommerce-checkout #order_review {
  width: 100% !important;
  float: none !important;
  background: linear-gradient(160deg, rgba(0, 88, 190, 0.12) 0%, rgba(255, 255, 255, 0.95) 55%);
  backdrop-filter: blur(20px);
  border: 1.5px solid rgba(0, 88, 190, 0.2);
  border-radius: var(--radius-2xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
}

.woocommerce-checkout #order_review table.shop_table {
  margin-bottom: 1.25rem;
}

.woocommerce-checkout #order_review table.shop_table th {
  font-size: 14px;
  font-weight: 600;
  color: var(--on-surface-variant);
  padding: 0.7rem 0;
}

.woocommerce-checkout #order_review table.shop_table td {
  padding: 0.7rem 0;
  font-weight: 600;
  color: var(--primary);
}

.woocommerce-checkout #order_review table.shop_table td.product-total {
  text-align: right;
}

/* Payment Gateways list styles */
.woocommerce-checkout #payment {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.woocommerce-checkout #payment ul.payment_methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.1rem 0 !important;
  border-bottom: 1px solid var(--outline-variant) !important;
}

.woocommerce-checkout #payment ul.payment_methods li {
  margin-bottom: 0.75rem !important;
  padding: 1rem !important;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
}

.woocommerce-checkout #payment ul.payment_methods li:hover {
  border-color: var(--secondary);
  background: var(--surface-container-lowest);
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  margin-right: 0.75rem;
  cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li label {
  font-weight: 700 !important;
  color: var(--primary) !important;
  cursor: pointer;
  display: inline-block;
}

.woocommerce-checkout #payment ul.payment_methods li .payment_box {
  margin-top: 0.75rem !important;
  padding: 1rem !important;
  background: rgba(0, 88, 190, 0.05) !important;
  border: 1px solid rgba(0, 88, 190, 0.16) !important;
  border-radius: var(--radius-lg) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--on-surface-variant) !important;
}

.woocommerce-checkout #payment ul.payment_methods li .payment_box::before {
  display: none !important;
}

/* Privacy policy / terms text block above Place Order */
.woocommerce-checkout #payment .woocommerce-privacy-policy-text,
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  margin-bottom: 0.85rem !important;
  color: var(--on-surface-variant) !important;
}

.woocommerce-checkout #payment .form-row.place-order {
  margin-bottom: 0 !important;
}

/* Place Order button */
.woocommerce-checkout #payment #place_order {
  display: block !important;
  width: 100% !important;
  padding: 1rem 2rem !important;
  background: linear-gradient(135deg, #0058be 0%, #0076f7 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--radius-xl) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  height: auto !important;
  line-height: 1.2 !important;
}

.woocommerce-checkout #payment #place_order:hover {
  opacity: 0.9 !important;
  box-shadow: 0 4px 15px rgba(0, 88, 190, 0.25) !important;
}

/* WooCommerce's checkout AJAX validation (e.g. bKash/Nagad field errors)
   injects notices inside a DIFFERENT wrapper than the page-load notices
   wrapper: .woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout.
   Confirmed via live inspection that this div has no width/height styling
   of its own, so when it lands inside .checkout-grid (a grid container),
   it shrinks to content width and becomes the first grid item instead of
   spanning full width above the columns. Same underlying issue as
   .woocommerce-notices-wrapper below, different class, same fix. */
/* Hide WooCommerce's blockUI loading overlay during cart AJAX updates.
   This is the semi-transparent white overlay WooCommerce's own JS shows
   over the cart form/totals while an update_cart request is in flight --
   the cause of the "blurry screen" effect during quantity changes. Cart
   updates are now instant (see cart-auto-update.js), so this loading
   indicator is no longer desired here. Uses !important because
   WooCommerce sets opacity/background via inline style. */
.woocommerce-cart .blockUI.blockOverlay {
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
}

/* Generic safety net: regardless of which wrapper class WooCommerce uses
   (it has been observed using at least two different ones for the same
   visual notice, depending on whether it's a page-load notice or an AJAX
   validation error), any direct child of these grids that contains a
   notice list is forced to span the full grid width. This covers wrapper
   classes not explicitly named above. */
.checkout-grid > :has(> .woocommerce-error, > .woocommerce-message, > .woocommerce-info),
.checkout-grid > :has(.woocommerce-error, .woocommerce-message, .woocommerce-info),
.cart-grid > :has(> .woocommerce-error, > .woocommerce-message, > .woocommerce-info),
.cart-grid > :has(.woocommerce-error, .woocommerce-message, .woocommerce-info) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

.woocommerce-NoticeGroup {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-column: 1 / -1 !important;
  flex: 1 1 100% !important;
  float: none !important;
  clear: both !important;
}

/* WooCommerce auto-injects a .woocommerce-notices-wrapper div around
   notices in some contexts (e.g. checkout's AJAX validation errors, like
   "Please enter your sender bKash number"). When that injection happens
   directly inside .checkout-grid or .cart-grid, the wrapper itself becomes
   a grid item with no sizing -- shrinking into the first column's track
   instead of spanning full width above the columns. This forces it to
   always span the full grid and behave as a normal full-width block,
   regardless of which grid (if any) it ends up inside. */
.woocommerce-notices-wrapper {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-column: 1 / -1 !important;
  flex: 1 1 100% !important;
  float: none !important;
  clear: both !important;
}

/* WooCommerce Notices */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  list-style: none !important;
  margin: 0 0 2rem 0 !important;
  padding: 1.25rem 1.5rem !important;
  border-radius: var(--radius-lg) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  box-shadow: var(--shadow-sm) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  /* Defensive layout containment: guarantees this notice can never be
     pulled into a sibling grid/flex layout (e.g. .cart-grid) and end up
     sitting in its own narrow column instead of spanning full width. */
  grid-column: 1 / -1 !important;
  flex: 1 1 100% !important;
  float: none !important;
  clear: both !important;
}

.woocommerce-error {
  background: rgba(186, 26, 26, 0.1) !important;
  border: 1px solid rgba(186, 26, 26, 0.2) !important;
  color: var(--error, #ba1a1a) !important;
}

.woocommerce-message {
  background: rgba(22, 163, 74, 0.1) !important;
  border: 1px solid rgba(22, 163, 74, 0.2) !important;
  color: #16a34a !important;
}

.woocommerce-info {
  background: rgba(0, 88, 190, 0.1) !important;
  border: 1px solid rgba(0, 88, 190, 0.2) !important;
  color: var(--secondary) !important;
}

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Checkout coupon notice + form: previously unstyled (default WooCommerce
   spacing), which added significant height before the actual form. */
.woocommerce-checkout .woocommerce-info {
  margin: 0 0 1rem 0 !important;
  padding: 0.85rem 1.25rem !important;
  font-size: 13.5px !important;
}

.woocommerce-checkout .checkout_coupon {
  margin: 0 0 1.25rem 0 !important;
  padding: 1.25rem !important;
  background: rgba(0, 88, 190, 0.05) !important;
  border: 1.5px solid rgba(0, 88, 190, 0.14) !important;
  border-radius: var(--radius-lg) !important;
}

.woocommerce-checkout .checkout_coupon .form-row {
  margin-bottom: 0.75rem !important;
}

.woocommerce-checkout .checkout_coupon .form-row:last-child {
  margin-bottom: 0 !important;
}