/* ============================================================
   GRNCOMMERCE Order Form — Custom Stylesheet
   Design System Tokens + Order Form Component Styles
   ============================================================ */

/* ----- Design Tokens ----- */
:root {
  /* Primary */
  --color-primary: #C8E64A;
  --color-primary-dark: #A8C438;
  --color-primary-light: #E8F5A1;
  --color-primary-subtle: #F4FAD6;

  /* Dark surfaces */
  --color-sidebar-bg: #1E1E2D;
  --color-sidebar-bg-alt: #2A2A3C;
  --color-sidebar-text: #9CA3AF;
  --color-sidebar-text-active: #FFFFFF;

  /* Neutral / Surfaces */
  --color-page-bg: #F5F5F0;
  --color-card-bg: #FFFFFF;
  --color-border: #E8E8E3;
  --color-border-focus: #C8E64A;

  /* Text */
  --color-text-primary: #1A1A2E;
  --color-text-secondary: #6B7280;
  --color-text-muted: #9CA3AF;
  --color-text-inverse: #FFFFFF;

  /* Semantic */
  --color-success: #22C55E;
  --color-success-light: #DCFCE7;
  --color-warning: #F59E0B;
  --color-warning-light: #FEF3C7;
  --color-error: #DC2626;
  --color-error-light: #FEE2E2;
  --color-info: #3B82F6;
  --color-info-light: #DBEAFE;

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);
  --shadow-focus: 0 0 0 3px rgba(200,230,74,0.4);

  /* Transitions */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}


/* ============================================================
   BASE / RESET
   ============================================================ */
#order-grncommerce {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background: var(--color-page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* grn-dark-page removed — all pages now use light beige theme */

#order-grncommerce *,
#order-grncommerce *::before,
#order-grncommerce *::after {
  box-sizing: border-box;
}

#order-grncommerce h1,
#order-grncommerce h2,
#order-grncommerce h3,
#order-grncommerce h4 {
  font-family: var(--font-heading);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-sm) 0;
}


/* ============================================================
   BRANDED HEADER
   ============================================================ */
.grn-header {
  background: var(--color-sidebar-bg);
  padding: var(--space-md) var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
  /* Floating pill header */
  position: sticky;
  top: var(--space-md);
  z-index: 1000;
  border-radius: var(--radius-pill, 50px);
  margin: var(--space-md) var(--space-xl) 0;
  width: calc(100% - var(--space-xl) * 2);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.grn-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  flex-shrink: 0;
}

.grn-header__logo-icon {
  width: 36px;
  height: 36px;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-sidebar-bg);
  font-size: 18px;
  font-family: var(--font-heading);
}

.grn-header__logo-text {
  color: var(--color-text-inverse);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.grn-header__logo-text span {
  color: var(--color-primary);
}

.grn-header__steps {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.grn-step {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-sidebar-text);
  font-size: 13px;
  font-weight: 500;
}

.grn-step__number {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  border: 2px solid var(--color-sidebar-bg-alt);
  background: transparent;
  color: var(--color-sidebar-text);
  transition: all var(--duration-fast) var(--ease-default);
}

.grn-step--active .grn-step__number {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-sidebar-bg);
}

.grn-step--active {
  color: var(--color-text-inverse);
}

.grn-step--completed .grn-step__number {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-text-inverse);
}

.grn-step__connector {
  width: 32px;
  height: 2px;
  background: var(--color-sidebar-bg-alt);
  border-radius: 1px;
}

.grn-step__connector--active {
  background: var(--color-primary);
}

/* ----- Header Auth Links ----- */
.grn-header__auth {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.grn-header__auth-link {
  color: var(--color-sidebar-text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  transition: all var(--duration-fast) var(--ease-default);
  white-space: nowrap;
}

.grn-header__auth-link:hover {
  color: var(--color-text-inverse);
  text-decoration: none;
}

.grn-header__auth-link--register {
  background: var(--color-primary);
  color: var(--color-sidebar-bg);
  font-weight: 600;
}

.grn-header__auth-link--register:hover {
  background: var(--color-primary-dark);
  color: var(--color-sidebar-bg);
}

@media (max-width: 767px) {
  .grn-header {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
    padding: var(--space-md);
  }
  .grn-header__steps {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
  }
  .grn-step__label {
    display: none;
  }
  .grn-header__auth {
    order: -1;
    align-self: flex-end;
  }
}


/* ============================================================
   MAIN CONTENT WRAPPER
   ============================================================ */
.grn-content {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-xl);
}

.grn-page-title {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-xl);
}

.grn-page-subtitle {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

@media (max-width: 767px) {
  .grn-content {
    padding: var(--space-md);
  }
  .grn-page-title {
    font-size: 22px;
  }
}


/* ============================================================
   CARDS
   ============================================================ */
.grn-card {
  background: var(--color-card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
  margin-bottom: var(--space-md);
  transition: box-shadow var(--duration-fast) var(--ease-default);
}

.grn-card:hover {
  box-shadow: var(--shadow-md);
}

.grn-card__header {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}


/* ============================================================
   DOMAIN SELECTION
   ============================================================ */
.grn-domain-tabs {
  display: flex;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-xl);
  gap: 0;
}

.grn-domain-tab {
  flex: 1;
  padding: var(--space-md) var(--space-lg);
  text-align: center;
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--duration-fast) var(--ease-default);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.grn-domain-tab:hover {
  color: var(--color-text-primary);
}

.grn-domain-tab.active,
.grn-domain-tab--active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

.grn-domain-search {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
  margin-bottom: var(--space-lg);
}

.grn-domain-search__input {
  flex: 1;
  display: flex;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-default);
}

.grn-domain-search__input:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.grn-domain-search__input .grn-domain-prefix {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-page-bg);
  color: var(--color-text-secondary);
  font-size: 14px;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--color-border);
  white-space: nowrap;
}

.grn-domain-search__input input[type="text"] {
  flex: 1;
  border: none;
  padding: var(--space-sm) var(--space-md);
  font-size: 16px;
  font-family: var(--font-body);
  outline: none;
  min-width: 0;
}

.grn-domain-search__input select {
  border: none;
  border-left: 1px solid var(--color-border);
  padding: var(--space-sm) var(--space-md);
  font-size: 14px;
  font-family: var(--font-body);
  background: var(--color-page-bg);
  outline: none;
  cursor: pointer;
  min-width: 80px;
}

.grn-domain-search__btn {
  background: var(--color-primary);
  color: var(--color-sidebar-bg);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-xl);
  font-weight: 600;
  font-size: 14px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default);
  white-space: nowrap;
}

.grn-domain-search__btn:hover {
  background: var(--color-primary-dark);
}

@media (max-width: 767px) {
  .grn-domain-search {
    flex-direction: column;
  }
  .grn-domain-search__btn {
    width: 100%;
    padding: var(--space-md);
  }
}

/* Domain results */
.grn-domain-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xs);
  transition: all var(--duration-fast) var(--ease-default);
}

.grn-domain-result:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.grn-domain-result--available {
  border-color: var(--color-success);
  background: var(--color-success-light);
}

.grn-domain-result--unavailable {
  opacity: 0.6;
}

.grn-domain-result__name {
  font-weight: 600;
  font-size: 16px;
}

.grn-domain-result__price {
  font-weight: 600;
  color: var(--color-primary-dark);
}

.grn-domain-result__status {
  font-size: 12px;
  font-weight: 500;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
}

.grn-domain-result__status--available {
  background: var(--color-success-light);
  color: #166534;
}

.grn-domain-result__status--unavailable {
  background: var(--color-error-light);
  color: var(--color-error);
}

/* Spotlight TLDs */
#order-grncommerce .spotlight-tlds-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-md);
}

#order-grncommerce .spotlight-tld {
  background: var(--color-card-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  transition: all var(--duration-fast) var(--ease-default);
}

#order-grncommerce .spotlight-tld:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}


/* ============================================================
   BILLING CYCLE CARDS
   ============================================================ */
.grn-billing-cycles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.grn-billing-card {
  position: relative;
  background: var(--color-card-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.grn-billing-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.grn-billing-card--active {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  box-shadow: var(--shadow-md);
}

.grn-billing-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: var(--color-sidebar-bg);
  padding: var(--space-2xs) var(--space-md);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.grn-billing-card__cycle {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-xs);
}

.grn-billing-card__price {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text-primary);
}

.grn-billing-card__price-suffix {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
}

.grn-billing-card__total {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

.grn-billing-card__savings {
  margin-top: var(--space-sm);
  font-size: 12px;
  font-weight: 600;
  color: #166534;
  background: var(--color-success-light);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  display: inline-block;
}

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

@media (max-width: 767px) {
  .grn-billing-cycles {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   ORDER SUMMARY SIDEBAR
   ============================================================ */
.grn-layout-split {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-2xl);
  align-items: start;
}

@media (max-width: 1023px) {
  .grn-layout-split {
    grid-template-columns: 1fr;
  }
}

.grn-order-summary {
  background: var(--color-sidebar-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  color: var(--color-text-inverse);
  position: sticky;
  top: var(--space-lg);
}

.grn-order-summary__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-sidebar-bg-alt);
  color: var(--color-text-inverse);
}

.grn-order-summary__item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-xs) 0;
  font-size: 14px;
}

.grn-order-summary__item-label {
  color: var(--color-sidebar-text);
}

.grn-order-summary__item-value {
  font-weight: 500;
  text-align: right;
}

.grn-order-summary__divider {
  height: 1px;
  background: var(--color-sidebar-bg-alt);
  margin: var(--space-md) 0;
}

.grn-order-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-sidebar-bg-alt);
  margin-top: var(--space-md);
}

.grn-order-summary__total-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-sidebar-text);
}

.grn-order-summary__total-value {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-primary);
}

.grn-order-summary__loader {
  text-align: center;
  padding: var(--space-md) 0;
}


/* ============================================================
   BUTTONS
   ============================================================ */
.grn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  text-decoration: none;
  line-height: 1;
}

.grn-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.grn-btn--primary {
  background: var(--color-primary);
  color: var(--color-sidebar-bg);
  padding: var(--space-md) var(--space-2xl);
}

.grn-btn--primary:hover {
  background: var(--color-primary-dark);
}

.grn-btn--primary-lg {
  background: var(--color-primary);
  color: var(--color-sidebar-bg);
  padding: var(--space-lg) var(--space-3xl);
  font-size: 16px;
}

.grn-btn--primary-lg:hover {
  background: var(--color-primary-dark);
}

.grn-btn--outline {
  background: transparent;
  color: var(--color-text-primary);
  border: 2px solid var(--color-border);
  padding: var(--space-sm) var(--space-xl);
}

.grn-btn--outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.grn-btn--full-width {
  width: 100%;
}

.grn-btn--dark {
  background: var(--color-sidebar-bg);
  color: var(--color-text-inverse);
  padding: var(--space-md) var(--space-2xl);
}

.grn-btn--dark:hover {
  background: var(--color-sidebar-bg-alt);
}


/* ============================================================
   FORM ELEMENTS
   ============================================================ */
#order-grncommerce .form-control,
#order-grncommerce .field {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-primary);
  background: var(--color-card-bg);
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}

#order-grncommerce .form-control:focus,
#order-grncommerce .field:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
  outline: none;
}

#order-grncommerce .form-control::placeholder,
#order-grncommerce .field::placeholder {
  color: var(--color-text-muted);
}

#order-grncommerce label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2xs);
}

#order-grncommerce .form-group {
  margin-bottom: var(--space-md);
}

#order-grncommerce .prepend-icon {
  position: relative;
}

#order-grncommerce .prepend-icon .field-icon {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  z-index: 1;
  margin: 0;
  /* Constrain the label so it does not extend over the input text */
  width: auto;
  max-width: 20px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

#order-grncommerce .prepend-icon .field-icon i {
  font-size: 14px;
  line-height: 1;
}

#order-grncommerce .prepend-icon .field,
#order-grncommerce .prepend-icon .form-control {
  padding-left: 44px;
}

/* Sub headings */
#order-grncommerce .sub-heading {
  margin: var(--space-xl) 0 var(--space-md) 0;
}

#order-grncommerce .sub-heading span {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  background: transparent !important;
  padding: 0;
}

/* Section heading override */
#order-grncommerce .primary-bg-color {
  background: transparent !important;
  color: var(--color-text-primary) !important;
}

/* Select styling */
#order-grncommerce select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8.825L0.175 3h11.65L6 8.825z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  padding-right: 36px;
}


/* ============================================================
   CHECKOUT — EXISTING / NEW CUSTOMER TOGGLE
   ============================================================ */
#order-grncommerce .already-registered {
  background: var(--color-card-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

#order-grncommerce .already-registered p {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-secondary);
}

#order-grncommerce #btnAlreadyRegistered,
#order-grncommerce #btnNewUserSignup {
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 13px;
  padding: var(--space-xs) var(--space-lg);
  border: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

#order-grncommerce #btnAlreadyRegistered {
  background: var(--color-info);
  color: var(--color-text-inverse);
}

#order-grncommerce #btnNewUserSignup {
  background: var(--color-warning);
  color: var(--color-text-inverse);
}


/* ============================================================
   CHECKOUT — PAYMENT
   ============================================================ */
/* Payment radio-inline and Total Due Today styles moved to
   "PAYMENT DETAILS CARD — PREMIUM POLISH" section below. */

/* TOS */
#order-grncommerce #accepttos {
  accent-color: var(--color-primary);
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

/* Complete Order Button */
#order-grncommerce #btnCompleteOrder {
  background: var(--color-primary);
  color: var(--color-sidebar-bg);
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--space-md) var(--space-3xl);
  font-weight: 700;
  font-size: 16px;
  font-family: var(--font-body);
  transition: all var(--duration-fast) var(--ease-default);
  margin-top: var(--space-lg);
}

#order-grncommerce #btnCompleteOrder:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

#order-grncommerce #btnCompleteOrder:focus-visible {
  box-shadow: var(--shadow-focus);
}

/* Security message */
#order-grncommerce .checkout-security-msg {
  background: var(--color-warning-light);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  margin-top: var(--space-xl);
  font-size: 13px;
  color: var(--color-text-secondary);
  padding: var(--space-md);
}


/* ============================================================
   VIEW CART
   ============================================================ */
#order-grncommerce .view-cart-items-header {
  background: var(--color-page-bg);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}

#order-grncommerce .view-cart-items .item {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xs);
  transition: box-shadow var(--duration-fast) var(--ease-default);
}

#order-grncommerce .view-cart-items .item:hover {
  box-shadow: var(--shadow-sm);
}

#order-grncommerce .view-cart-items .item-title {
  font-weight: 600;
  font-size: 15px;
  display: block;
  margin-bottom: var(--space-2xs);
}

#order-grncommerce .view-cart-items .item-group {
  font-size: 12px;
  color: var(--color-text-secondary);
  display: block;
}

#order-grncommerce .view-cart-items .item-domain {
  font-size: 13px;
  color: var(--color-text-secondary);
  display: block;
  margin-top: var(--space-2xs);
}

#order-grncommerce .view-cart-items .item-price span:first-child {
  font-weight: 600;
  font-size: 16px;
  display: block;
}

#order-grncommerce .view-cart-items .item-price .cycle {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: 400;
}

#order-grncommerce .btn-remove-from-cart {
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-default);
}

#order-grncommerce .btn-remove-from-cart:hover {
  color: var(--color-error);
}

#order-grncommerce .view-cart-empty {
  text-align: center;
  padding: var(--space-3xl);
  color: var(--color-text-muted);
  font-size: 16px;
}


/* ============================================================
   VIEW CART — PROMO CODE TABS
   ============================================================ */
#order-grncommerce .view-cart-tabs {
  margin-top: var(--space-xl);
}

#order-grncommerce .view-cart-tabs .nav-tabs {
  border-bottom: 2px solid var(--color-border);
}

#order-grncommerce .view-cart-tabs .nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--color-text-secondary);
  font-weight: 500;
  font-size: 14px;
  padding: var(--space-sm) var(--space-lg);
  transition: all var(--duration-fast) var(--ease-default);
  border-radius: 0;
}

#order-grncommerce .view-cart-tabs .nav-tabs .nav-link:hover {
  color: var(--color-text-primary);
}

#order-grncommerce .view-cart-tabs .nav-tabs .nav-link.active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-primary);
}

#order-grncommerce .view-cart-tabs .tab-content {
  padding: var(--space-lg);
  background: var(--color-card-bg);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}


/* ============================================================
   VIEW CART — ORDER SUMMARY SIDEBAR
   ============================================================ */
#order-grncommerce .order-summary {
  background: var(--color-sidebar-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  padding-top: 40px;
  color: var(--color-text-inverse);
  overflow: visible;
}

#order-grncommerce .order-summary h2 {
  color: var(--color-text-inverse);
  font-size: 22px;
  margin-top: 0;
  margin-bottom: var(--space-lg);
  line-height: 1.3;
}

#order-grncommerce .secondary-cart-sidebar {
  overflow: visible;
}

#order-grncommerce .order-summary .summary-container .clearfix {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xs) 0;
  font-size: 14px;
}

#order-grncommerce .order-summary .summary-container .pull-left,
#order-grncommerce .order-summary .summary-container .float-left {
  color: var(--color-sidebar-text);
}

#order-grncommerce .order-summary .subtotal {
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-sidebar-bg-alt);
}

#order-grncommerce .order-summary .bordered-totals {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-sidebar-bg-alt);
}

#order-grncommerce .order-summary .total-due-today {
  text-align: center;
  padding-top: var(--space-lg);
  margin-top: var(--space-sm);
}

#order-grncommerce .order-summary .total-due-today .amt {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--color-primary);
  display: block;
}

#order-grncommerce .order-summary .total-due-today span:last-child {
  font-size: 12px;
  color: var(--color-sidebar-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#order-grncommerce .order-summary .recurring-totals {
  padding: var(--space-sm) 0;
  font-size: 13px;
}

#order-grncommerce .order-summary .recurring-totals .cost {
  font-weight: 600;
}

/* Center the checkout + continue shopping links */
#order-grncommerce #orderSummary .text-center {
  text-align: center;
}

#order-grncommerce #orderSummary .btn-continue-shopping {
  display: inline-block;
  margin-top: var(--space-sm);
}

/* Checkout button in summary */
#order-grncommerce .order-summary + .text-center .btn,
#order-grncommerce #checkout,
#order-grncommerce #btnCompleteProductConfig {
  background: var(--color-primary);
  color: var(--color-sidebar-bg);
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--space-md) var(--space-2xl);
  font-weight: 700;
  font-size: 15px;
  font-family: var(--font-body);
  transition: all var(--duration-fast) var(--ease-default);
}

#order-grncommerce .order-summary + .text-center .btn:hover,
#order-grncommerce #checkout:hover,
#order-grncommerce #btnCompleteProductConfig:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}


/* ============================================================
   CONFIGURE PRODUCT — Layout
   ============================================================ */
#order-grncommerce .secondary-cart-body {
  flex: 1;
}

#order-grncommerce .secondary-cart-sidebar {
  width: 380px;
  flex-shrink: 0;
}

#order-grncommerce .secondary-cart-body + .secondary-cart-sidebar {
  margin-left: var(--space-2xl);
}

@media (max-width: 1023px) {
  #order-grncommerce .row:has(.secondary-cart-body) {
    flex-direction: column;
  }
  #order-grncommerce .secondary-cart-sidebar {
    width: 100%;
    margin-left: 0 !important;
    margin-top: var(--space-xl);
  }
}

/* Product info card */
#order-grncommerce .product-info {
  background: var(--color-card-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-xl);
}

#order-grncommerce .product-info .product-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

/* Configurable Options */
#order-grncommerce .product-configurable-options {
  background: var(--color-card-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-xl);
}

/* Addon cards */
#order-grncommerce .addon-products .panel-addon,
#order-grncommerce .addon-products .card {
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
  overflow: hidden;
  transition: all var(--duration-fast) var(--ease-default);
}

#order-grncommerce .addon-products .panel-addon:hover,
#order-grncommerce .addon-products .card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

#order-grncommerce .addon-products .panel-addon-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}

#order-grncommerce .addon-products .panel-price {
  background: var(--color-page-bg);
  padding: var(--space-sm) var(--space-md);
  font-weight: 600;
  font-size: 14px;
  text-align: center;
}

#order-grncommerce .addon-products .panel-add {
  background: var(--color-primary);
  color: var(--color-sidebar-bg);
  padding: var(--space-sm);
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default);
}

#order-grncommerce .addon-products .panel-add:hover {
  background: var(--color-primary-dark);
}


/* ============================================================
   TRUST BADGES
   ============================================================ */
.grn-trust-badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
}

.grn-trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
}

.grn-trust-badge__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-sidebar-bg);
  font-size: 20px;
}

.grn-trust-badge__title {
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.grn-trust-badge__subtitle {
  font-size: 11px;
  color: var(--color-text-secondary);
}

@media (max-width: 767px) {
  .grn-trust-badges {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}

@media (max-width: 374px) {
  .grn-trust-badges {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   PAYMENT ICONS
   ============================================================ */
.grn-payment-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
}

.grn-payment-icon {
  width: 48px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs);
}

.grn-payment-icon svg,
.grn-payment-icon i {
  font-size: 20px;
  color: var(--color-text-secondary);
}


/* ============================================================
   PROMO CODE INPUT (Checkout page)
   ============================================================ */
.grn-promo-section {
  background: var(--color-primary-subtle);
  border: 2px dashed var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.grn-promo-section__title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.grn-promo-section__title i {
  color: var(--color-primary-dark);
}

.grn-promo-input {
  display: flex;
  gap: var(--space-sm);
}

.grn-promo-input input {
  flex: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: 14px;
}

.grn-promo-input input:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: var(--shadow-focus);
}

.grn-promo-input button {
  background: var(--color-primary);
  color: var(--color-sidebar-bg);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-xl);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-default);
}

.grn-promo-input button:hover {
  background: var(--color-primary-dark);
}


/* ============================================================
   ALERTS — Override Bootstrap defaults
   ============================================================ */
#order-grncommerce .alert {
  border-radius: var(--radius-md);
  border: none;
  font-size: 14px;
}

#order-grncommerce .alert-danger {
  background: var(--color-error-light);
  color: var(--color-error);
  border-left: 4px solid var(--color-error);
}

#order-grncommerce .alert-warning {
  background: var(--color-warning-light);
  color: #92400e;
  border-left: 4px solid var(--color-warning);
}

#order-grncommerce .alert-info {
  background: var(--color-info-light);
  color: #1e40af;
  border-left: 4px solid var(--color-info);
}

#order-grncommerce .alert-success {
  background: var(--color-success-light);
  color: #166534;
  border-left: 4px solid var(--color-success);
}


/* ============================================================
   HEADER LINED — Page titles
   ============================================================ */
#order-grncommerce .header-lined {
  border: none;
  margin-bottom: var(--space-xl);
}

#order-grncommerce .header-lined h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  position: relative;
  padding-bottom: var(--space-sm);
}

#order-grncommerce .header-lined h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}


/* ============================================================
   DOMAIN SELECTION OPTIONS — Radio cards
   ============================================================ */
#order-grncommerce .domain-selection-options {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Hidden domain option — register/transfer disabled, easy to re-enable */
#order-grncommerce .domain-selection-options .option.grn-domain-option--hidden {
  display: none !important;
}

/* Primary domain option — sole visible option, keep card styling */
#order-grncommerce .domain-selection-options .option.grn-domain-option--primary {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-xl);
}

#order-grncommerce .domain-selection-options .option.grn-domain-option--primary:hover {
  box-shadow: var(--shadow-md);
}

/* Accessible visually-hidden utility for the pre-checked radio */
.grn-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Label above the merged domain input */
#order-grncommerce .grn-domain-label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm, 8px);
}

#order-grncommerce .domain-selection-options .option {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-fast) var(--ease-default);
}

#order-grncommerce .domain-selection-options .option:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* Active/checked option card — highlight with primary accent */
#order-grncommerce .domain-selection-options .option:has(input[type="radio"]:checked) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-sm);
}

#order-grncommerce .domain-selection-options .option > label {
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  cursor: pointer;
}

#order-grncommerce .domain-selection-options .option input[type="radio"] {
  accent-color: var(--color-primary);
  width: 18px;
  height: 18px;
}

#order-grncommerce .domain-selection-options .domain-input-group {
  margin-top: var(--space-md);
}

#order-grncommerce .domain-selection-options .btn-primary,
#order-grncommerce .domain-selection-options .btn.btn-primary.btn-block {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-sidebar-bg) !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
  transition: all var(--duration-fast) var(--ease-default);
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  padding: 10px 24px !important;
  min-width: 100px !important;
  font-size: 13px !important;
}

#order-grncommerce .domain-selection-options .btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Center buttons in their column */
#order-grncommerce .domain-selection-options .option .domain-input-group .row > [class*="col-sm-2"],
#order-grncommerce .domain-selection-options .option .domain-input-group .row > [class*="col-2"] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Vertically center form rows inside option cards */
#order-grncommerce .domain-selection-options .option .row {
  align-items: center;
}

/* Clean input groups inside domain options */
#order-grncommerce .domain-selection-options .option .input-group {
  display: flex;
  flex-wrap: nowrap;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Seamless input group: www. + domain + TLD as one unified row */
#order-grncommerce .domain-selection-options .option .input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  border: 2px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  background: var(--color-card-bg) !important;
  height: 44px !important;
}

#order-grncommerce .domain-selection-options .option .input-group-text,
#order-grncommerce .domain-selection-options .option .input-group-addon,
#order-grncommerce .domain-selection-options .option .input-group-prepend .input-group-text {
  background: var(--color-page-bg) !important;
  border: none !important;
  border-right: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  color: var(--color-text-secondary) !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* Domain text inputs inside input-group */
#order-grncommerce .domain-selection-options .option .input-group .form-control {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  box-shadow: none !important;
  height: 100% !important;
}

#order-grncommerce .domain-selection-options .option .input-group .form-control:focus {
  border: none !important;
  box-shadow: none !important;
}

/* Standalone form controls (not in input-group) — match 44px height */
#order-grncommerce .domain-selection-options .option .form-control {
  border: 2px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  height: 44px !important;
}

#order-grncommerce .domain-selection-options .option .form-control:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(200, 230, 74, 0.2) !important;
}

/* TLD select inside input-group — no separate border */
#order-grncommerce .domain-selection-options .option .input-group select.form-control {
  border: none !important;
  border-left: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
}

/* Standalone TLD select */
#order-grncommerce .domain-selection-options .option select.form-control {
  border-radius: var(--radius-md) !important;
  border: 2px solid var(--color-border) !important;
  padding: 10px 16px !important;
}

/* ---- Clean domain form layout (Transfer, Use Existing, Subdomain) ----
   Replaces complex Bootstrap grid + input-group structure with simple
   flex-based layout that works reliably on all screen sizes. */
#order-grncommerce .grn-domain-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

#order-grncommerce .grn-domain-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

#order-grncommerce .grn-domain-input {
  flex: 1;
  height: 44px !important;
  border: 2px solid var(--color-border, #E5E7EB) !important;
  border-radius: var(--radius-md, 12px) !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

#order-grncommerce .grn-domain-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(200, 230, 74, 0.2) !important;
}

#order-grncommerce .grn-domain-input.grn-input-error {
  border-color: var(--color-error) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

#order-grncommerce .grn-tld-select {
  flex: 0 0 auto !important;
  width: 90px !important;
  height: 44px !important;
  border: 2px solid var(--color-border, #E5E7EB) !important;
  border-radius: var(--radius-md, 12px) !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

#order-grncommerce .grn-tld-select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(200, 230, 74, 0.2) !important;
}

#order-grncommerce .grn-domain-btn {
  width: 100%;
  height: 44px;
}

/* Domain search input — single-line text input (replaced textarea to fix iOS ghost line).
   Height 44px for consistent touch target sizing. */
#order-grncommerce .domain-selection-options .option input#message,
#order-grncommerce .domain-selection-options .option input#message.form-control {
  width: 100% !important;
  height: 44px !important;
  border: 2px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 11px 16px !important;
  font-size: 14px !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--color-text-primary) !important;
  background: var(--color-card-bg) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  outline: none !important;
  -webkit-appearance: none !important;
  line-height: 22px !important;
}

#order-grncommerce .domain-selection-options .option input#message:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px rgba(200, 230, 74, 0.15) !important;
}

#order-grncommerce .domain-selection-options .option input#message::placeholder {
  color: var(--color-text-muted, #9CA3AF) !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Hide supplementary description text if present */
#order-grncommerce .domain-selection-options .option .domain-search-description,
#order-grncommerce .domain-selection-options .option .marketplace-search-description {
  display: none !important;
}

/* Filter buttons row (Include TLDs, Maximum Length, Safe Search) — gaps */
#order-grncommerce .domain-selection-options .option .btn-group,
#order-grncommerce .domain-selection-options .option .domain-search-filters,
#order-grncommerce .domain-selection-options .option .marketplace-search-options {
  display: flex !important;
  gap: 12px !important;
  margin-top: var(--space-md) !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* Safe Search checkbox — vertically center with filter buttons */
#order-grncommerce .domain-selection-options .option label:has(input[type="checkbox"]),
#order-grncommerce .domain-selection-options .option .checkbox-inline,
#order-grncommerce .domain-selection-options .option .checkbox label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 6px 16px !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  font-size: 13px !important;
}

/* Ensure the checkbox itself is vertically centered */
#order-grncommerce .domain-selection-options .option input[type="checkbox"] {
  margin: 0 !important;
  vertical-align: middle !important;
  position: relative !important;
  top: -1px !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* Only the filter row (contains btn-group + Safe Search) — NOT the domain input rows */
#order-grncommerce .domain-selection-options .option .row.domains-row:has(.btn-group) {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 12px !important;
}

/* Reset margin on btn-groups inside filter row so flex align-items works */
#order-grncommerce .domain-selection-options .option .btn-group {
  vertical-align: middle !important;
  margin: 0 !important;
}

/* Force Safe Search label (classless label inside filter row) to inline-flex */
#order-grncommerce .domain-selection-options .option .row.domains-row > label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

/* Domain input rows (www + input + TLD) — keep as Bootstrap grid, don't flex-wrap */
#order-grncommerce .domain-selection-options .option .domain-input-group .row {
  align-items: center !important;
}

/* Filter dropdown buttons */
#order-grncommerce .domain-selection-options .option .dropdown-toggle,
#order-grncommerce .domain-selection-options .option .btn-default {
  border-radius: 9999px !important;
  border: 2px solid var(--color-border) !important;
  padding: 6px 16px !important;
  font-size: 13px !important;
  background: var(--color-card-bg) !important;
  color: var(--color-text-primary) !important;
}

/* Button icon spacing (Check sparkle icon) */
#order-grncommerce .domain-selection-options .btn-primary i,
#order-grncommerce .domain-selection-options .btn-primary .fas,
#order-grncommerce .domain-selection-options .btn-primary .far,
#order-grncommerce .domain-selection-options .btn-primary .fa-regular {
  margin-left: 6px !important;
}

/* Domain continue button — prominent CTA with generous top spacing
   to separate from search results above (matches grn-btn--primary-lg) */
#order-grncommerce #btnDomainContinue {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-sidebar-bg);
  border-radius: var(--radius-pill);
  padding: var(--space-lg) var(--space-3xl);
  font-weight: 700;
  font-size: 16px;
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
  transition: all var(--duration-fast) var(--ease-default);
  margin-top: var(--space-2xl);
  box-shadow: var(--shadow-sm);
}

#order-grncommerce #btnDomainContinue:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

#order-grncommerce #btnDomainContinue:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}


/* ============================================================
   DOMAIN SEARCH RESULTS
   ============================================================ */

/* Search results container — add vertical spacing between domain options
   and the results area so nothing feels cramped */
#order-grncommerce #DomainSearchResults {
  margin-top: var(--space-2xl);
}

/* "Exact Match" / "Top Suggestion" section headers — softer, partial-width
   accent instead of aggressive full-width green underline */
#order-grncommerce .primary-domain-header {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-primary-light);
  display: inline-block;
}

/* Exact Match result card — wrap in card styling consistent with
   .grn-checkout-card pattern used on checkout pages */
#order-grncommerce #searchDomainInfo {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-xl);
}

#order-grncommerce .domain-checker-result-headline {
  font-size: 16px;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-page-bg);
}

#order-grncommerce .domain-checker-available {
  color: #166534;
}

#order-grncommerce .domain-checker-unavailable {
  color: var(--color-error);
}

#order-grncommerce .domain-price {
  margin-top: var(--space-md);
  font-size: 18px;
}

#order-grncommerce .domain-price .price {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-primary-dark);
}

/* Spotlight TLDs — breathing room from exact match card */
#order-grncommerce #spotlightTlds {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}

/* Suggested domains card — polished card styling matching .grn-checkout-card */
#order-grncommerce .suggested-domains {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
  transition: box-shadow var(--duration-fast) var(--ease-default);
}

#order-grncommerce .suggested-domains:hover {
  box-shadow: var(--shadow-md);
}

#order-grncommerce .suggested-domains .card-header,
#order-grncommerce .suggested-domains .panel-heading {
  background: var(--color-page-bg);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  padding: var(--space-md) var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

#order-grncommerce .suggested-domains .card-body,
#order-grncommerce .suggested-domains .panel-body {
  padding: var(--space-md) var(--space-xl);
}

#order-grncommerce .suggested-domains .list-group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) var(--space-xl);
  border: none;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--duration-fast) var(--ease-default);
}

#order-grncommerce .suggested-domains .list-group-item:hover {
  background: var(--color-page-bg);
}

#order-grncommerce .suggested-domains .list-group-item:last-child {
  border-bottom: none;
}

#order-grncommerce .suggested-domains .domain-suggestion .domain {
  font-weight: 600;
  font-size: 15px;
}

#order-grncommerce .suggested-domains .domain-suggestion .extension {
  color: var(--color-text-secondary);
}

#order-grncommerce .suggested-domains .domain-suggestion .actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

#order-grncommerce .suggested-domains .domain-suggestion .price {
  font-weight: 600;
  color: var(--color-primary-dark);
  font-size: 15px;
}

#order-grncommerce .suggested-domains .btn-add-to-cart {
  background: var(--color-primary);
  border: none;
  color: var(--color-sidebar-bg);
  border-radius: var(--radius-pill);
  padding: var(--space-xs) var(--space-lg);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

#order-grncommerce .suggested-domains .btn-add-to-cart:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
}

/* "More Suggestions" footer link */
#order-grncommerce .suggested-domains .card-footer,
#order-grncommerce .suggested-domains .panel-footer {
  background: var(--color-page-bg);
  padding: var(--space-md) var(--space-xl);
  border-top: 1px solid var(--color-border);
}

#order-grncommerce .suggested-domains .card-footer a,
#order-grncommerce .suggested-domains .panel-footer a {
  color: var(--color-primary-dark);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

#order-grncommerce .suggested-domains .card-footer a:hover,
#order-grncommerce .suggested-domains .panel-footer a:hover {
  text-decoration: underline;
}

/* Domain suggestions warning text */
#order-grncommerce .domain-suggestions-warning {
  padding: var(--space-sm) var(--space-xl) var(--space-md);
  font-size: 12px;
  color: var(--color-text-muted);
}


/* ============================================================
   MODALS — Override Bootstrap
   ============================================================ */
#order-grncommerce .modal-content {
  border-radius: var(--radius-lg);
  border: none;
  box-shadow: var(--shadow-lg);
}

#order-grncommerce .modal-header {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-lg) var(--space-xl);
}

#order-grncommerce .modal-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-md) var(--space-xl);
}

#order-grncommerce .modal-footer .btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-sidebar-bg);
  border-radius: var(--radius-pill);
  font-weight: 600;
}

#order-grncommerce .modal-footer .btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}


/* ============================================================
   CART SIDEBAR — hide it in our template (we use full width)
   ============================================================ */
#order-grncommerce .cart-sidebar {
  display: none;
}

#order-grncommerce .cart-body {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  padding: 0;
}


/* ============================================================
   PASSWORD STRENGTH
   ============================================================ */
#order-grncommerce .password-strength-meter .progress {
  height: 6px;
  border-radius: 3px;
  background: var(--color-border);
}

#order-grncommerce .password-strength-meter .progress-bar {
  border-radius: 3px;
}


/* ============================================================
   EXPRESS CHECKOUT BUTTONS (in viewcart summary)
   ============================================================ */
#order-grncommerce .express-checkout-buttons .separator {
  font-size: 12px;
  color: var(--color-sidebar-text);
  text-align: center;
  margin: var(--space-sm) 0;
}


/* ============================================================
   CONTINUE SHOPPING LINK
   ============================================================ */
#order-grncommerce #continueShopping {
  color: var(--color-text-secondary);
  font-size: 14px;
  margin-top: var(--space-sm);
  display: inline-block;
}

#order-grncommerce #continueShopping:hover {
  color: var(--color-primary-dark);
}


/* ============================================================
   ACCESSIBILITY — Focus states
   ============================================================ */
#order-grncommerce a:focus-visible,
#order-grncommerce button:focus-visible,
#order-grncommerce input:focus-visible,
#order-grncommerce select:focus-visible,
#order-grncommerce textarea:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #order-grncommerce *,
  #order-grncommerce *::before,
  #order-grncommerce *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================
   APPLY CREDIT CONTAINER
   ============================================================ */
#order-grncommerce .apply-credit-container {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

#order-grncommerce .apply-credit-container label.radio {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) 0;
  cursor: pointer;
  font-size: 14px;
}

#order-grncommerce .apply-credit-container input[type="radio"] {
  accent-color: var(--color-primary);
}


/* ============================================================
   MARKETING OPT-IN
   ============================================================ */
#order-grncommerce .marketing-email-optin {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
}

#order-grncommerce .marketing-email-optin h4 {
  font-size: 16px;
  font-weight: 600;
}

#order-grncommerce .marketing-email-optin p {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}


/* ============================================================
   EMPTY CART BUTTON
   ============================================================ */
#order-grncommerce .empty-cart {
  text-align: right;
  margin-top: var(--space-sm);
}

#order-grncommerce .empty-cart .btn {
  color: var(--color-text-muted);
  font-size: 13px;
}

#order-grncommerce .empty-cart .btn:hover {
  color: var(--color-error);
}


/* ============================================================
   ACCOUNT SELECT (existing accounts for logged-in users)
   ============================================================ */
#order-grncommerce .account-select-container .account {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

#order-grncommerce .account-select-container .account:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

#order-grncommerce .account-select-container .account.active {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}

#order-grncommerce .account-select-container .account input[type="radio"] {
  accent-color: var(--color-primary);
}


/* ============================================================
   MOBILE RESPONSIVE — Cart Domain Page (< 768px)
   Fixes search input, filter buttons, transfer card, overflow,
   and step indicator for mobile viewports.
   ============================================================ */
@media (max-width: 767px) {

  /* --- Fix 2: Search input + Check button full-width stack --- */
  /* Force the Bootstrap row inside domain-input-group to stack vertically */
  #order-grncommerce .domain-selection-options .option .domain-input-group .row {
    flex-direction: column !important;
  }

  /* Each column becomes full-width */
  #order-grncommerce .domain-selection-options .option .domain-input-group .row > [class*="col"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin-bottom: 8px !important;
  }

  /* Domain search input full-width */
  #order-grncommerce .domain-selection-options .option input#message {
    width: 100% !important;
  }

  /* Buttons full-width on mobile */
  #order-grncommerce .domain-selection-options .btn-primary,
  #order-grncommerce .domain-selection-options .btn.btn-primary.btn-block {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }


  /* --- Fix 3: Filter buttons stay inline on mobile --- */
  #order-grncommerce .domain-selection-options .option .row.domains-row:has(.btn-group) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Keep btn-groups as inline, don't let them expand */
  #order-grncommerce .domain-selection-options .option .row.domains-row .btn-group {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  /* Keep Safe Search label inline too */
  #order-grncommerce .domain-selection-options .option .row.domains-row > label {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  /* Compact filter button text on mobile */
  #order-grncommerce .domain-selection-options .option .dropdown-toggle,
  #order-grncommerce .domain-selection-options .option .btn-default {
    font-size: 12px !important;
    padding: 5px 12px !important;
  }


  /* --- Fix 4: Transfer / Use Existing cards — input-group layout ---
     The .input-group contains ONLY www. prepend + domain input.
     These must stay side-by-side (nowrap) even on mobile.
     The TLD selector and button are in separate Bootstrap columns
     outside the input-group, so they stack via Fix 2's flex-direction:column. */
  #order-grncommerce .domain-selection-options .option .input-group {
    width: 100% !important;
    flex-wrap: nowrap !important;
    border-radius: var(--radius-md) !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 44px !important;
  }

  /* www. prepend keeps its natural width, input fills the rest */
  #order-grncommerce .domain-selection-options .option .input-group .input-group-prepend,
  #order-grncommerce .domain-selection-options .option .input-group .input-group-addon {
    flex: 0 0 auto !important;
    border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
  }

  /* Domain text input fills remaining space in the input-group row */
  #order-grncommerce .domain-selection-options .option .input-group .form-control {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  /* TLD select is outside .input-group (in its own .col-3), so it naturally
     goes full-width from Fix 2's flex-direction:column. Just ensure good styling. */
  #order-grncommerce .domain-selection-options .option .input-group select.form-control {
    flex: 1 1 auto !important;
  }


  /* --- Fix 5: Option card padding + controlled overflow --- */
  #order-grncommerce .domain-selection-options .option {
    padding: 16px !important;
    overflow: visible !important;
  }

  /* Reset Bootstrap row negative margins inside option cards on mobile */
  #order-grncommerce .domain-selection-options .option .row,
  #order-grncommerce .domain-selection-options .option .domain-input-group .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Input groups must respect card boundary */
  #order-grncommerce .domain-selection-options .option .input-group {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Standalone form controls within cards */
  #order-grncommerce .domain-selection-options .option .form-control {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Buttons respect card boundary */
  #order-grncommerce .domain-selection-options .btn-primary,
  #order-grncommerce .domain-selection-options .btn.btn-primary.btn-block {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }


  /* --- Fix 5b: Domain selection container needs side padding for card breathing room --- */
  #order-grncommerce .domain-selection-options {
    padding: 0 4px !important;
  }

  /* --- Fix 6: Step indicator compact on mobile --- */
  #order-grncommerce .grn-header {
    padding: 12px 16px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  #order-grncommerce .grn-header__logo {
    width: 100% !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
  }

  #order-grncommerce .grn-header__steps {
    font-size: 12px !important;
  }

  #order-grncommerce .grn-step__number {
    width: 22px !important;
    height: 22px !important;
    font-size: 11px !important;
  }

  #order-grncommerce .grn-step__connector {
    width: 20px !important;
  }


  /* --- Fix 7: Ghost placeholder line — RESOLVED ---
     The textarea was replaced with <input type="text"> in the template.
     Single-line inputs cannot display multi-line placeholders, so the
     iOS Safari ghost-line issue is structurally eliminated.
     The input inherits desktop styling from input#message rules above. */
  #order-grncommerce .domain-selection-options .option input#message {
    font-size: 16px !important;
    line-height: 20px !important;
    padding: 12px 16px !important;
  }


  /* --- Fix 7b: Hide www. prefix on mobile — reclaim input space ---
     On small screens (especially iPhone SE / 16e), the "www." prepend
     consumes ~40% of input width, leaving barely any room to type.
     The card title already provides context (e.g., "Transfer your domain"),
     so the www. prefix is redundant on mobile. */
  #order-grncommerce .domain-selection-options .option .input-group-text,
  #order-grncommerce .domain-selection-options .option .input-group-addon,
  #order-grncommerce .domain-selection-options .option .input-group-prepend {
    display: none !important;
  }

  /* With www. prefix hidden, give the domain input full width + rounded corners */
  #order-grncommerce .domain-selection-options .option .input-group .form-control {
    border-radius: var(--radius-md) !important;
    width: 100% !important;
  }

  /* The input-group border comes from the group wrapper; with the prepend
     hidden, the input itself needs the border */
  #order-grncommerce .domain-selection-options .option .input-group .form-control[id$="sld"] {
    border: 2px solid var(--color-border) !important;
  }


  /* --- Fix 8: iOS focus zoom prevention ---
     iOS Safari zooms in when an input's computed font-size is < 16px.
     The viewport meta does NOT include maximum-scale=1, so we MUST ensure
     every focusable form element renders at >= 16px.
     Using broadest possible selectors to catch inputs both inside and
     outside .domain-selection-options (e.g., login forms, checkout). */
  #order-grncommerce input,
  #order-grncommerce select,
  #order-grncommerce .form-control,
  #order-grncommerce .input-group-text,
  #order-grncommerce .input-group .form-control,
  #order-grncommerce .domain-selection-options .option input[type="text"],
  #order-grncommerce .domain-selection-options .option input[type="search"],
  #order-grncommerce .domain-selection-options .option select,
  #order-grncommerce .domain-selection-options .option .form-control,
  #order-grncommerce .domain-selection-options .option .input-group .form-control {
    font-size: 16px !important;
  }


  /* --- Fix 9: CRITICAL — Input fields not activating on tap (iOS/mobile) ---
     Multiple factors can prevent mobile browsers from delivering touch events
     to form inputs inside option cards:
     1. overflow:hidden on .input-group clips content AND can block iOS touch
     2. Inputs need explicit position/z-index to sit above any invisible overlays
     3. touch-action and user-select must be explicitly set for iOS Safari
     4. The desktop .input-group height:44px + overflow:hidden must be relaxed
        on mobile where flex-wrap:wrap causes content to exceed 44px */

  /* Reinforce overflow:visible and auto height on mobile input groups —
     Fix 4 already sets flex-wrap:nowrap, but overflow:hidden from the desktop
     rule can still block iOS touch event delivery. Kept as reinforcement. */
  #order-grncommerce .domain-selection-options .option .input-group {
    overflow: visible !important;
    height: auto !important;
    min-height: 44px !important;
  }

  /* Give domain-input-group and its children explicit stacking context
     so they sit above any invisible overlays (z-index: 1035 sidebar overlay) */
  #order-grncommerce .domain-selection-options .option .domain-input-group {
    position: relative !important;
    z-index: 10 !important;
  }

  /* All interactive form elements: ensure they receive touch events,
     allow text selection, and use manipulation touch-action for fast taps */
  #order-grncommerce .domain-selection-options .option input[type="text"],
  #order-grncommerce .domain-selection-options .option input[type="search"],
  #order-grncommerce .domain-selection-options .option select {
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
    -webkit-user-select: text !important;
    user-select: text !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* The www. prefix is hidden on mobile (Fix 7b). This pointer-events rule
     is kept as a safety net in case display:none fails in edge cases. */
  #order-grncommerce .domain-selection-options .option .input-group-text,
  #order-grncommerce .domain-selection-options .option .input-group-addon,
  #order-grncommerce .domain-selection-options .option .input-group-prepend {
    pointer-events: none !important;
  }

  /* Ensure the label (radio button container) does not capture taps
     meant for input fields below it. The label only wraps the radio + text,
     but on iOS the tap region can bleed if the label is flex-displayed. */
  #order-grncommerce .domain-selection-options .option > label {
    position: relative !important;
    z-index: 1 !important;
  }


  /* --- Fix 10: Simplified domain form layout (Transfer, Use Existing, Subdomain) ---
     These sections now use .grn-domain-form instead of Bootstrap grid + input-group.
     On mobile, ensure 16px font to prevent iOS zoom, and shrink TLD select slightly. */
  #order-grncommerce .grn-domain-input {
    font-size: 16px !important;
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
    -webkit-user-select: text !important;
    user-select: text !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  #order-grncommerce .grn-tld-select {
    font-size: 16px !important;
    width: 80px !important;
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  #order-grncommerce .grn-domain-btn {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }


  /* --- Fix 11: Domain search results — mobile spacing and padding --- */

  /* Results container top spacing */
  #order-grncommerce #DomainSearchResults {
    margin-top: var(--space-xl) !important;
  }

  /* Exact match card — reduce padding on mobile */
  #order-grncommerce #searchDomainInfo {
    padding: var(--space-lg) !important;
    margin-bottom: var(--space-lg) !important;
  }

  /* Result headline smaller padding on mobile */
  #order-grncommerce .domain-checker-result-headline {
    padding: var(--space-md) !important;
    font-size: 14px !important;
  }

  /* Domain price — slightly smaller on mobile */
  #order-grncommerce .domain-price .price {
    font-size: 20px !important;
  }

  /* Suggested domains card — compact padding */
  #order-grncommerce .suggested-domains .card-header,
  #order-grncommerce .suggested-domains .panel-heading {
    padding: var(--space-md) var(--space-lg) !important;
    font-size: 15px !important;
  }

  #order-grncommerce .suggested-domains .card-body,
  #order-grncommerce .suggested-domains .panel-body {
    padding: var(--space-sm) var(--space-lg) !important;
  }

  #order-grncommerce .suggested-domains .list-group-item {
    padding: var(--space-md) var(--space-lg) !important;
    flex-wrap: wrap !important;
    gap: var(--space-sm) !important;
  }

  /* Stack domain name and actions vertically on small screens */
  #order-grncommerce .suggested-domains .domain-suggestion .actions {
    width: 100% !important;
    justify-content: space-between !important;
  }

  #order-grncommerce .suggested-domains .card-footer,
  #order-grncommerce .suggested-domains .panel-footer {
    padding: var(--space-md) var(--space-lg) !important;
  }

  /* Spotlight TLDs — tighter on mobile */
  #order-grncommerce #spotlightTlds {
    margin-top: var(--space-lg) !important;
    margin-bottom: var(--space-lg) !important;
  }

  #order-grncommerce .spotlight-tlds-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-sm) !important;
  }

  #order-grncommerce .spotlight-tld {
    padding: var(--space-sm) !important;
    font-size: 14px !important;
  }

  /* Continue button — full-width on mobile for easy tap target */
  #order-grncommerce #btnDomainContinue {
    width: 100% !important;
    margin-top: var(--space-xl) !important;
    padding: var(--space-lg) var(--space-xl) !important;
  }

  /* Domain option card gap on mobile */
  #order-grncommerce .domain-selection-options {
    gap: var(--space-md) !important;
  }
}


/* ============================================================
   SECTION 14: Product Selection / Plan Cards (products.tpl)
   ============================================================ */

/* ---------- Hero Section (Light Theme) ---------- */
.plans-hero {
  background: var(--color-page-bg);
  padding: var(--space-3xl) var(--space-xl) var(--space-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Subtle decorative blobs */
.plans-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.plans-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.15;
}

.plans-hero__blob--1 {
  width: 400px;
  height: 400px;
  background: var(--color-primary);
  top: -150px;
  right: -80px;
}

.plans-hero__blob--2 {
  width: 300px;
  height: 300px;
  background: var(--color-primary-light);
  bottom: -80px;
  left: -60px;
}

.plans-hero__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.plans-hero__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-md);
}

.plans-hero__label-dot {
  width: 6px;
  height: 6px;
  background: var(--color-primary-dark);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.plans-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text-primary) !important;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}

.plans-hero__title-accent {
  color: var(--color-primary-dark);
}

.plans-hero__subtitle {
  font-size: clamp(0.9375rem, 2vw, 1.0625rem);
  color: var(--color-text-secondary) !important;
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto;
}

/* ---------- Billing Toggle ---------- */
.billing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

.billing-toggle__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-default);
  user-select: none;
}

.billing-toggle__label--active {
  color: var(--color-text-primary);
  font-weight: 600;
}

.billing-toggle__switch {
  position: relative;
  width: 48px;
  height: 26px;
  background: var(--color-border);
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-border);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.billing-toggle__switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--color-primary);
  border-radius: 50%;
  transition: transform var(--duration-normal) var(--ease-bounce);
}

.billing-toggle__switch:checked::after {
  transform: translateX(22px);
}

.billing-toggle__switch:checked {
  border-color: var(--color-primary);
}

.billing-toggle__switch:focus-visible {
  box-shadow: var(--shadow-focus);
}

.billing-toggle__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--color-primary-subtle);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Pricing Cards Section (Light Theme) ---------- */
.plans-section {
  background: var(--color-page-bg);
  padding: var(--space-2xl) var(--space-xl) var(--space-3xl);
}

.plans-container {
  max-width: 1180px;
  margin: 0 auto;
}

.plans-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: stretch;
  margin-bottom: var(--space-3xl);
}

@media (min-width: 768px) {
  .plans-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
}

@media (min-width: 1024px) {
  .plans-grid {
    gap: var(--space-xl);
  }
}

/* ---------- Individual Plan Card ---------- */
.plan-card {
  background: var(--color-card-bg);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
  box-shadow: var(--shadow-sm);
}

.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Featured card (GROW) */
.plan-card--featured {
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
  .plan-card--featured:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }
}

/* Most popular badge */
.plan-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: var(--color-sidebar-bg);
  font-size: 11px;
  font-weight: 700;
  padding: var(--space-2xs) var(--space-md);
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Card header */
.plan-card__header {
  text-align: center;
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-xl);
}

.plan-card__icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-xs);
}

.plan-card__name {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-2xs);
}

.plan-card--featured .plan-card__name {
  color: var(--color-primary-dark);
}

.plan-card__tagline {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-md);
}

/* Pricing display */
.plan-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2xs);
}

.plan-card__currency {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 2;
  vertical-align: top;
}

.plan-card__amount {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.plan-card__period {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* Annual price (hidden by default, shown when toggle is annual) */
.plan-card__annual-price {
  display: none;
}

.plan-card__annual-savings {
  display: none;
  margin-top: var(--space-xs);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-success);
}

/* ---------- Feature List ---------- */
.plan-card__features {
  margin-bottom: var(--space-xl);
  flex: 1;
}

.plan-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 9px 0;
  font-size: 14px;
  color: var(--color-text-primary);
  border-bottom: 1px solid rgba(232, 232, 227, 0.5);
}

.plan-card__feature:last-child {
  border-bottom: none;
}

.plan-card__feature-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-success);
  margin-top: 1px;
}

.plan-card__feature-icon svg {
  width: 16px;
  height: 16px;
}

.plan-card__feature-text {
  line-height: 1.4;
}

.plan-card__feature-text strong {
  font-weight: 600;
}

/* ---------- CTA Button ---------- */
.plan-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  height: 48px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  text-decoration: none;
}

.plan-card__cta:hover {
  text-decoration: none;
}

.plan-card__cta:active {
  transform: scale(0.97);
}

.plan-card__cta:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.plan-card__cta--primary {
  background: var(--color-primary);
  color: var(--color-sidebar-bg);
}

.plan-card__cta--primary:hover {
  background: var(--color-primary-dark);
  color: var(--color-sidebar-bg);
}

.plan-card__cta--outline {
  background: transparent;
  color: var(--color-text-primary);
  border: 1.5px solid var(--color-border);
}

.plan-card__cta--outline:hover {
  background: var(--color-primary-subtle);
  border-color: var(--color-primary);
  color: var(--color-text-primary);
}

.plan-card__cta-arrow {
  transition: transform var(--duration-fast) var(--ease-default);
}

.plan-card__cta:hover .plan-card__cta-arrow {
  transform: translateX(3px);
}

/* ---------- Trust Signals Section (Light Theme) ---------- */
.trust-section {
  background: var(--color-page-bg);
  padding: 0 var(--space-xl) var(--space-3xl);
}

.trust-container {
  max-width: 1180px;
  margin: 0 auto;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

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

.trust-card {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
}

.trust-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.trust-card__icon {
  width: 44px;
  height: 44px;
  margin: 0 auto var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-subtle);
  border-radius: var(--radius-md);
  color: var(--color-primary-dark);
}

.trust-card__icon svg {
  width: 22px;
  height: 22px;
}

.trust-card__label {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2xs);
}

.trust-card__desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ---------- Plans Footer (Light Theme) ---------- */
.plans-footer {
  background: var(--color-page-bg);
  padding: var(--space-xl) var(--space-xl);
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

.plans-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

@media (min-width: 768px) {
  .plans-footer__inner {
    flex-direction: row;
    justify-content: space-between;
  }
}

.plans-footer__copyright {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.plans-footer__links {
  display: flex;
  gap: var(--space-md);
}

.plans-footer__link {
  font-size: 13px;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

.plans-footer__link:hover {
  color: var(--color-primary-dark);
}

/* ---------- Scroll Reveal Animation ---------- */
.plans-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms var(--ease-out),
              transform 500ms var(--ease-out);
}

.plans-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

.plans-reveal--delay-1 { transition-delay: 80ms; }
.plans-reveal--delay-2 { transition-delay: 160ms; }
.plans-reveal--delay-3 { transition-delay: 240ms; }
.plans-reveal--delay-4 { transition-delay: 320ms; }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .plans-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .plans-hero__label-dot {
    animation: none;
  }
}


/* ============================================================
   SECTION 15: Page Hero — Shared light hero for all cart pages
   ============================================================ */
.grn-page-hero {
  background: var(--color-page-bg);
  padding: var(--space-3xl) var(--space-xl) var(--space-xl);
  text-align: center;
  position: relative;
}

.grn-page-hero__content {
  max-width: 640px;
  margin: 0 auto;
}

.grn-page-hero__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-md);
}

.grn-page-hero__label-dot {
  width: 6px;
  height: 6px;
  background: var(--color-primary-dark);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

.grn-page-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}

.grn-page-hero__title-accent {
  color: var(--color-primary-dark);
}

.grn-page-hero__subtitle {
  font-size: clamp(0.9375rem, 2vw, 1.0625rem);
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .grn-page-hero {
    padding: var(--space-2xl) var(--space-md) var(--space-lg);
  }
}


/* ============================================================
   SECTION 16: Complete Page — Light theme styles
   ============================================================ */

/* Order complete hero variant */
.grn-page-hero--complete {
  padding: var(--space-3xl) var(--space-xl) var(--space-2xl);
}

.complete-hero__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-subtle);
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  color: var(--color-primary-dark);
}

.complete-hero__icon svg {
  width: 32px;
  height: 32px;
}

.complete-hero__order-number {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-lg);
  padding: var(--space-xs) var(--space-lg);
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}

/* Order Summary Card */
.complete-summary {
  padding: 0 var(--space-xl) var(--space-xl);
}

.complete-container {
  max-width: 720px;
  margin: 0 auto;
}

.complete-summary__card {
  background: var(--color-card-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}

.complete-summary__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.complete-summary__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.complete-summary__item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm);
  background: var(--color-page-bg);
  border-radius: var(--radius-md);
}

.complete-summary__item-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-primary-dark);
  flex-shrink: 0;
}

.complete-summary__item-icon svg {
  width: 20px;
  height: 20px;
}

.complete-summary__item-details {
  display: flex;
  flex-direction: column;
}

.complete-summary__item-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text-primary);
}

.complete-summary__item-domain {
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* What Happens Next */
.complete-steps {
  padding: 0 var(--space-xl) var(--space-xl);
}

.complete-steps__heading {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.complete-steps__grid {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

@media (max-width: 767px) {
  .complete-steps__grid {
    grid-template-columns: 1fr;
  }
}

.complete-step {
  background: var(--color-card-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  transition: box-shadow var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}

.complete-step:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.complete-step__number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-sidebar-bg);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.complete-step__content {
  flex: 1;
}

.complete-step__title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.complete-step__desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Quick Links */
.complete-links {
  padding: 0 var(--space-xl) var(--space-2xl);
}

.complete-links__grid {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 767px) {
  .complete-links__grid {
    grid-template-columns: 1fr;
  }
}

.complete-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: all var(--duration-fast) var(--ease-default);
  box-shadow: var(--shadow-sm);
}

.complete-link:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: var(--color-text-primary);
}

.complete-link__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-primary-dark);
  flex-shrink: 0;
}

.complete-link__icon svg {
  width: 20px;
  height: 20px;
}

.complete-link__label {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
}

.complete-link__arrow {
  color: var(--color-text-muted);
  font-size: 18px;
  transition: transform var(--duration-fast) var(--ease-default);
}

.complete-link:hover .complete-link__arrow {
  transform: translateX(3px);
  color: var(--color-primary-dark);
}


/* ============================================================
   SECTION 17: Checkout Page — Card-Based Sectioned Layout
   Two-column layout: form sections on left, sticky order
   summary sidebar on right. White cards on beige background.
   ============================================================ */

/* Two-column checkout layout */
.grn-checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-2xl);
  align-items: start;
}

@media (max-width: 1023px) {
  .grn-checkout-layout {
    grid-template-columns: 1fr;
  }
}

/* Form sections column */
.grn-checkout-forms {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Ensure inner wrappers that contain multiple cards also space them.
   Containers like #containerNewUserSignup hold multiple .grn-checkout-card
   siblings — without this rule they collapse together with no gap. */
.grn-checkout-forms > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Keep w-hidden working even when the wrapper gets display:flex */
.grn-checkout-forms > div.w-hidden,
.grn-checkout-forms .w-hidden {
  display: none;
}

/* Prevent double-gap: direct .grn-checkout-card children of
   .grn-checkout-forms are already spaced by the parent flex gap */
.grn-checkout-forms > .grn-checkout-card {
  display: block;
}

/* Individual checkout card (white card on beige background) */
.grn-checkout-card {
  background: var(--color-card-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: box-shadow var(--duration-fast) var(--ease-default);
}

.grn-checkout-card:hover {
  box-shadow: var(--shadow-md);
}

/* Card header with icon + title */
.grn-checkout-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.grn-checkout-card__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-primary-dark);
  font-size: 16px;
  flex-shrink: 0;
}

.grn-checkout-card__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  flex: 1;
}

.grn-checkout-card__subtitle {
  width: 100%;
  margin: var(--space-2xs) 0 0 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* Override sub-heading inside checkout cards */
.grn-checkout-card .sub-heading {
  margin-top: var(--space-md);
}


/* ---------- Progressive Disclosure: Optional Fields ---------- */
.grn-optional-toggle {
  margin-bottom: var(--space-md);
}

.grn-optional-toggle__btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary-dark);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  transition: color var(--duration-fast) var(--ease-default);
}

.grn-optional-toggle__btn:hover {
  color: var(--color-text-primary);
}

.grn-optional-toggle__btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

.grn-optional-toggle__btn i {
  font-size: 14px;
  transition: transform var(--duration-fast) var(--ease-default);
}

.grn-optional-field {
  margin-bottom: var(--space-md);
  animation: slideDown 200ms var(--ease-out) forwards;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.grn-optional-field.w-hidden {
  display: none;
}


/* ---------- Trust Badges near Payment ---------- */
.grn-checkout-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.grn-checkout-trust__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-page-bg);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
}

.grn-checkout-trust__item i {
  color: var(--color-success);
  font-size: 14px;
}


/* ---------- Sticky Order Summary Sidebar ---------- */
.grn-checkout-sidebar {
  position: sticky;
  top: 100px; /* Below the floating header pill */
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.grn-checkout-summary {
  background: var(--color-sidebar-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  color: var(--color-text-inverse);
}

.grn-checkout-summary__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-inverse);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-sidebar-bg-alt);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.grn-checkout-summary__title i {
  color: var(--color-primary);
  font-size: 16px;
}

.grn-checkout-summary__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.grn-checkout-summary__item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 14px;
  padding: var(--space-xs) 0;
}

.grn-checkout-summary__item-label {
  color: var(--color-sidebar-text);
}

.grn-checkout-summary__item-value {
  font-weight: 600;
  color: var(--color-text-inverse);
}

.grn-checkout-summary__divider {
  height: 1px;
  background: var(--color-sidebar-bg-alt);
  margin: var(--space-md) 0;
}

.grn-checkout-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-sm);
}

.grn-checkout-summary__total-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-sidebar-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.grn-checkout-summary__total-value {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-primary);
}

.grn-checkout-summary__actions {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
}

/* TOS checkbox */
.grn-checkout-tos {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  font-size: 13px;
  color: var(--color-sidebar-text);
  cursor: pointer;
  line-height: 1.4;
}

.grn-checkout-tos input[type="checkbox"] {
  accent-color: var(--color-primary);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.grn-checkout-tos a {
  color: var(--color-primary);
  text-decoration: underline;
}

.grn-checkout-tos a:hover {
  color: var(--color-primary-light);
}

/* Complete Order CTA Button */
.grn-btn-checkout {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  background: var(--color-primary);
  color: var(--color-sidebar-bg);
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--space-md) var(--space-2xl);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.grn-btn-checkout:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(200, 230, 74, 0.3);
}

.grn-btn-checkout:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.grn-btn-checkout:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Payment card icons */
.grn-checkout-summary__cards {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-xs);
}

.grn-checkout-summary__cards i {
  font-size: 24px;
  color: var(--color-sidebar-text);
  opacity: 0.7;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.grn-checkout-summary__cards i:hover {
  opacity: 1;
}

/* SSL message below sidebar */
.grn-checkout-ssl-msg {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: 12px;
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.5;
}

.grn-checkout-ssl-msg i {
  color: var(--color-success);
  margin-right: var(--space-2xs);
}


/* ---------- Checkout Form: Icon + Input Fix ---------- */
/* The checkout form uses .form-group > label.field-icon + input.field,
   NOT the .prepend-icon wrapper used elsewhere. Target with #frmCheckout
   for high specificity to override theme defaults. */
#frmCheckout .form-group {
  position: relative;
}

#frmCheckout .form-group .field-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  max-width: 20px;
  pointer-events: none;
  z-index: 1;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

#frmCheckout .field-icon + .field,
#frmCheckout .field-icon + .form-control,
#frmCheckout .field-icon ~ .field,
#frmCheckout .field-icon ~ .form-control {
  padding-left: 44px !important;
}

/* ---------- Checkout: Phone field (intl-tel-input) ---------- */
/* The intl-tel-input plugin adds its own flag+dial-code overlay.
   Hide the duplicate .field-icon and give the actual input enough
   left padding to clear the flag + country code. */
#frmCheckout .form-group .intl-tel-input {
  display: block;
  width: 100%;
}

#frmCheckout .form-group:has(.intl-tel-input) > .field-icon {
  display: none;
}

#frmCheckout .intl-tel-input .form-control {
  padding-left: 90px !important;
}

/* ---------- Checkout: CVV / input-group fields ---------- */
/* When .field-icon sits before an .input-group, the icon needs to
   target the input INSIDE the input-group, not the wrapper. */
#frmCheckout .form-group .field-icon + .input-group .form-control {
  padding-left: 44px !important;
}

/* Keep the icon visible when the input-group gets focus.
   Bootstrap input-group sets z-index:3 on :focus, hiding the icon. */
#frmCheckout .form-group.prepend-icon .field-icon {
  z-index: 4;
}

/* Add gap between the input and the ? help button */
#frmCheckout .input-group .input-group-btn,
#frmCheckout .input-group .input-group-append {
  margin-left: 8px;
}

/* ---------- Checkout: Payment method radio buttons ---------- */
/* Add spacing between radio circle and label text. */
#frmCheckout .radio-inline input[type="radio"] {
  margin-right: 8px;
  vertical-align: middle;
}

#frmCheckout .radio-inline {
  padding-left: 8px;
}


/* ============================================================
   PAYMENT DETAILS CARD — PREMIUM POLISH
   ============================================================ */

/* ---------- 1. Payment Method Selector Cards ---------- */

/* Hide iCheck wrapper — we take over styling */
#order-grncommerce #paymentGatewaysContainer .iradio_square-blue,
#order-grncommerce #paymentGatewaysContainer .icheckbox_square-blue {
  display: none !important;
}

/* Ensure native radio is visible when iCheck is hidden */
#order-grncommerce #paymentGatewaysContainer .radio-inline input[type="radio"] {
  position: relative !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 18px;
  height: 18px;
  margin: 0;
  margin-right: var(--space-xs);
  cursor: pointer;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

/* Payment method label as styled card */
#order-grncommerce #paymentGatewaysContainer .radio-inline {
  display: inline-flex;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: var(--space-2xs);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text-primary);
  background: var(--color-card-bg);
  position: relative;
  min-width: 180px;
  justify-content: flex-start;
}

/* Hover: subtle lift on unselected */
#order-grncommerce #paymentGatewaysContainer .radio-inline:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Selected state: green border + green tint background */
#order-grncommerce #paymentGatewaysContainer .radio-inline:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-sm);
}

/* Fallback for browsers without :has() — JS adds .grn-payment-selected */
#order-grncommerce #paymentGatewaysContainer .radio-inline.grn-payment-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-sm);
}

/* Container layout: center the options */
#order-grncommerce #paymentGatewaysContainer .text-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
}

/* "Preferred payment method" label styling */
#order-grncommerce #paymentGatewaysContainer > p.small {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-sm);
}


/* ---------- 2. Total Due Today Banner ---------- */

/* Integrated banner within the card flow */
#order-grncommerce .alert-success#totalDueToday {
  background: linear-gradient(135deg, var(--color-primary-subtle) 0%, rgba(200, 230, 74, 0.12) 100%);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  font-size: 15px;
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

#order-grncommerce .alert-success#totalDueToday strong {
  font-family: var(--font-heading);
  font-size: 26px;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}


/* ---------- 3. "Enter New Card Information Below" Bullet Fix ---------- */

/* Remove list styling from the <ul> wrapping the "new card" radio option */
#order-grncommerce .cc-input-container ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md) 0;
}

#order-grncommerce .cc-input-container ul li {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Style the "Enter New Card" label as a section label */
#order-grncommerce .cc-input-container ul li .radio-inline {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-page-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin: var(--space-md) 0;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

#order-grncommerce .cc-input-container ul li .radio-inline:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}

#order-grncommerce .cc-input-container ul li .radio-inline:has(input:checked),
#order-grncommerce .cc-input-container ul li .radio-inline.grn-payment-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}

#order-grncommerce .cc-input-container ul li .radio-inline input[type="radio"] {
  accent-color: var(--color-primary);
  width: 16px;
  height: 16px;
  margin-right: var(--space-xs);
  flex-shrink: 0;
}


/* ---------- 4. Stripe Elements Styling ---------- */

/* Main container spacing — compact */
#order-grncommerce #stripeElements {
  margin-top: var(--space-sm);
  padding: 0;
}

/* Hide the "Enter New Card Information Below" yellow/info banner */
#order-grncommerce #stripeElements > .alert,
#order-grncommerce #paymentGatewayInput > .alert,
#order-grncommerce #stripeElements .alert-info,
#order-grncommerce #stripeElements .alert-warning {
  display: none !important;
}

/* Stripe field labels */
#order-grncommerce #stripeElements label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
  font-family: var(--font-body);
}

/* Stripe iframe wrapper divs — vertically center content */
#order-grncommerce #stripeCreditCard,
#order-grncommerce #stripeExpiryDate,
#order-grncommerce #stripeCvc {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 14px;
  height: 44px;
  display: flex;
  align-items: center;
  background: var(--color-card-bg);
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
  margin-bottom: var(--space-sm);
}

/* Let the Stripe iframe fill the wrapper width, auto height for flex centering */
#order-grncommerce #stripeCreditCard > *,
#order-grncommerce #stripeExpiryDate > *,
#order-grncommerce #stripeCvc > * {
  width: 100%;
  flex: 1;
}

/* Focus state for Stripe fields — applied via JS class */
#order-grncommerce #stripeCreditCard:focus-within,
#order-grncommerce #stripeExpiryDate:focus-within,
#order-grncommerce #stripeCvc:focus-within,
#order-grncommerce #stripeCreditCard.StripeElement--focus,
#order-grncommerce #stripeExpiryDate.StripeElement--focus,
#order-grncommerce #stripeCvc.StripeElement--focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(200, 230, 74, 0.15);
  outline: none;
}

/* Error state for Stripe fields */
#order-grncommerce #stripeCreditCard.StripeElement--invalid,
#order-grncommerce #stripeExpiryDate.StripeElement--invalid,
#order-grncommerce #stripeCvc.StripeElement--invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* Stripe's internal .form-control divs — match 44px height */
#order-grncommerce #stripeElements .form-control {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  height: 44px;
  background: var(--color-card-bg);
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
  box-shadow: none;
  font-size: 14px;
}

#order-grncommerce #stripeElements .form-control:focus,
#order-grncommerce #stripeElements .form-control:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(200, 230, 74, 0.15);
  outline: none;
}

/* --- Desktop: Card Number | Expiry | CVV in one row --- */
/* Override .stripe-cards-inputs col-md-8 offset to use full width */
#frmCheckout #stripeElements .stripe-cards-inputs,
#order-grncommerce #stripeElements .stripe-cards-inputs {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Row: flexbox nowrap so all three fields sit on one line */
#frmCheckout #stripeElements .stripe-cards-inputs > .row,
#order-grncommerce #stripeElements .stripe-cards-inputs > .row {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin-left: 0;
  margin-right: 0;
}

/* Card Number — takes ~50% */
#frmCheckout #stripeElements .stripe-cards-inputs .col-md-6,
#order-grncommerce #stripeElements .stripe-cards-inputs .col-md-6 {
  flex: 1 1 50%;
  max-width: none;
  width: auto;
  padding-left: 0;
  padding-right: 0;
}

/* Expiry Date + CVV — each ~25% */
#frmCheckout #stripeElements .stripe-cards-inputs .col-md-3,
#order-grncommerce #stripeElements .stripe-cards-inputs .col-md-3 {
  flex: 0 0 25%;
  max-width: none;
  width: auto;
  padding-left: 0;
  padding-right: 0;
}

/* Mobile: stack fields on small screens */
@media (max-width: 575px) {
  #frmCheckout #stripeElements .stripe-cards-inputs > .row,
  #order-grncommerce #stripeElements .stripe-cards-inputs > .row {
    flex-wrap: wrap;
  }

  #frmCheckout #stripeElements .stripe-cards-inputs .col-md-6,
  #order-grncommerce #stripeElements .stripe-cards-inputs .col-md-6 {
    flex: 0 0 100%;
  }

  #frmCheckout #stripeElements .stripe-cards-inputs .col-md-3,
  #order-grncommerce #stripeElements .stripe-cards-inputs .col-md-3 {
    flex: 0 0 calc(50% - 6px);
  }
}

/* Stripe Elements overall row layout */
#order-grncommerce #stripeElements .row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

#order-grncommerce #stripeElements .row > div[class*="col"] {
  margin-bottom: 0;
}

/* The #paymentGatewayInput container that holds Stripe Elements — reduce gap */
#order-grncommerce #paymentGatewayInput {
  margin-top: var(--space-sm);
}


/* ---------- 5. Payment Card Section Spacing & Layout ---------- */

/* Consistent vertical rhythm inside the Payment Details card — compact */
#order-grncommerce .grn-checkout-card > .alert-success#totalDueToday {
  margin-bottom: var(--space-md);
}

#order-grncommerce .grn-checkout-card > #paymentGatewaysContainer {
  margin-bottom: var(--space-md);
}

#order-grncommerce .grn-checkout-card > .cc-input-container {
  margin-top: var(--space-sm);
}

/* Existing cards grid layout */
#order-grncommerce .existing-cc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

/* CVV input row spacing */
#order-grncommerce .cvv-input {
  margin-bottom: var(--space-md);
}

/* New card fields row */
#order-grncommerce #newCardInfo {
  margin-top: var(--space-xs);
}

/* Card description / save settings — no divider, tight to card fields, left-aligned */
#order-grncommerce #newCardSaveSettings {
  margin-top: var(--space-xs);
  padding-top: 0;
  border-top: none;
}

/* Card name row — cancel Bootstrap .row negative margin and col offset */
#order-grncommerce #newCardSaveSettings > .row {
  margin-left: 0;
  margin-right: 0;
}

#order-grncommerce #newCardSaveSettings .col-md-offset-3,
#order-grncommerce #newCardSaveSettings .offset-md-3 {
  margin-left: 0 !important;
}

#order-grncommerce #inputDescriptionContainer {
  max-width: 50%;
  padding-left: 0;
}

/* Apply credit container */
#order-grncommerce .apply-credit-container {
  background: var(--color-info-light);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
  font-size: 14px;
}

#order-grncommerce .apply-credit-container label.radio {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) 0;
  cursor: pointer;
  font-weight: 500;
}

#order-grncommerce .apply-credit-container input[type="radio"] {
  accent-color: var(--color-primary);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Gateway error alert inside payment card */
#order-grncommerce .gateway-errors {
  border-radius: var(--radius-md);
  font-size: 14px;
}


/* ---------- 6. Trust Badges (Enhanced) ---------- */

/* Already defined above — just ensure spacing from card fields */
#order-grncommerce .grn-checkout-card .grn-checkout-trust {
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
}


/* ---------- 7. Mobile Responsive for Payment Section ---------- */

@media (max-width: 767px) {
  #order-grncommerce #paymentGatewaysContainer .radio-inline {
    min-width: unset;
    flex: 1 1 calc(50% - var(--space-xs));
    justify-content: center;
    padding: var(--space-sm) var(--space-md);
    font-size: 13px;
  }

  #order-grncommerce #paymentGatewaysContainer .text-center {
    gap: var(--space-xs);
  }

  #order-grncommerce .alert-success#totalDueToday {
    flex-direction: column;
    gap: var(--space-2xs);
    text-align: center;
    padding: var(--space-md);
  }

  #order-grncommerce .alert-success#totalDueToday strong {
    font-size: 22px;
  }

  #order-grncommerce #stripeCreditCard,
  #order-grncommerce #stripeExpiryDate,
  #order-grncommerce #stripeCvc,
  #order-grncommerce #stripeElements .form-control {
    height: 44px;
    padding: 10px 14px;
  }
}

/* ---------- Checkout Container: Horizontal Breathing Room ---------- */
/* Ensure checkout content has proper horizontal padding on desktop
   so cards don't feel edge-to-edge against the viewport. */
@media (min-width: 1024px) {
  #order-grncommerce .grn-content {
    padding-left: var(--space-3xl);
    padding-right: var(--space-3xl);
  }
}


/* ---------- Checkout Mobile Responsive ---------- */
@media (max-width: 1023px) {
  .grn-checkout-sidebar {
    position: static;
  }
}

@media (max-width: 767px) {
  .grn-checkout-card {
    padding: var(--space-lg);
  }

  .grn-checkout-card__header {
    flex-direction: row;
    align-items: center;
  }

  .grn-checkout-card__icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .grn-checkout-card__title {
    font-size: 16px;
  }

  .grn-checkout-summary {
    padding: var(--space-lg);
  }

  .grn-checkout-summary__total-value {
    font-size: 24px;
  }

  .grn-checkout-trust {
    flex-direction: column;
    align-items: stretch;
  }

  .grn-checkout-trust__item {
    justify-content: center;
  }

  /* Stack City/State/Postcode on mobile */
  .grn-checkout-card .col-sm-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


/* ============================================================
   VIEW CART — PROMO CODE SECTION (Inline Layout)
   ============================================================ */
/* Remove the tab/card wrapper appearance — render promo as a clean inline row */
#order-grncommerce .view-cart-tabs .nav-tabs {
  border-bottom: none;
}

#order-grncommerce .view-cart-tabs .nav-tabs .nav-item {
  margin-bottom: 0;
}

#order-grncommerce .view-cart-tabs .nav-tabs .nav-link.active {
  border-bottom-color: transparent;
  font-weight: 600;
  color: var(--color-text-primary);
  background: transparent;
  padding-left: 0;
}

#order-grncommerce .view-cart-tabs .tab-content {
  background: transparent;
  padding: var(--space-md) 0;
  border-radius: 0;
}

/* Promo form: input + button on same row */
#order-grncommerce .view-cart-tabs .tab-pane.promo form {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
}

#order-grncommerce .view-cart-tabs .tab-pane.promo .form-group {
  flex: 1;
  margin-bottom: 0;
}

#order-grncommerce .view-cart-tabs .tab-pane.promo .form-group .field,
#order-grncommerce .view-cart-tabs .tab-pane.promo .form-group .form-control {
  padding-left: 44px !important;
  width: 100%;
  height: 44px;
}

#order-grncommerce .view-cart-tabs .tab-pane.promo button[type="submit"] {
  background: var(--color-primary);
  color: var(--color-sidebar-bg);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-xl);
  font-weight: 600;
  font-size: 14px;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-default);
  flex-shrink: 0;
  width: auto;
  display: inline-flex;
  align-items: center;
}

#order-grncommerce .view-cart-tabs .tab-pane.promo button[type="submit"]:hover {
  background: var(--color-primary-dark);
}

@media (max-width: 480px) {
  #order-grncommerce .view-cart-tabs .tab-pane.promo form {
    flex-direction: column;
  }
  #order-grncommerce .view-cart-tabs .tab-pane.promo button[type="submit"] {
    width: 100%;
    justify-content: center;
    padding: var(--space-md);
  }
}


/* ============================================================
   EMPTY CART CTA
   ============================================================ */
#order-grncommerce .view-cart-empty-cta {
  text-align: center;
  padding: var(--space-3xl) var(--space-md);
}

#order-grncommerce .view-cart-empty-cta .empty-cart-icon {
  font-size: 48px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  opacity: 0.5;
}

#order-grncommerce .view-cart-empty-cta p {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
}

#order-grncommerce .view-cart-empty-cta .grn-btn {
  font-size: 15px;
}


/* ============================================================
   MOBILE HEADER — iPhone SE / Small Screens (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
  .grn-header {
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-xs);
    margin: var(--space-xs) var(--space-sm) 0;
    width: calc(100% - var(--space-sm) * 2);
    border-radius: var(--radius-xl);
  }

  /* Auth links: compact, top-right */
  .grn-header__auth {
    order: -1;
    align-self: flex-end;
    gap: var(--space-xs);
  }

  .grn-header__auth-link {
    font-size: 11px;
    padding: 4px 10px;
  }

  /* Logo: smaller */
  .grn-header__logo-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .grn-header__logo-text {
    font-size: 16px;
  }

  /* Steps: always horizontal, compact */
  .grn-header__steps {
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--space-xs);
    width: 100%;
  }

  .grn-step {
    font-size: 11px;
    gap: 4px;
  }

  .grn-step__number {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  .grn-step__connector {
    width: 16px;
  }

  /* Labels already hidden at 767px, but ensure */
  .grn-step__label {
    display: none;
  }

  /* --- Domain page: 480px polish --- */

  /* Option cards — tighter padding */
  #order-grncommerce .domain-selection-options .option {
    padding: var(--space-lg) !important;
  }

  /* Option label — slightly smaller text */
  #order-grncommerce .domain-selection-options .option > label {
    font-size: 14px !important;
    gap: var(--space-xs) !important;
  }

  /* Exact match card — compact */
  #order-grncommerce #searchDomainInfo {
    padding: var(--space-md) !important;
  }

  /* Spotlight TLDs — single column on very small */
  #order-grncommerce .spotlight-tlds-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Domain content area padding */
  #order-grncommerce .grn-content {
    padding: var(--space-lg) var(--space-md) !important;
  }
}

/* Extra-small: iPhone SE at 375px and below */
@media (max-width: 375px) {
  .grn-header {
    padding: var(--space-xs) var(--space-sm);
    gap: 6px;
    margin: var(--space-xs) var(--space-xs) 0;
    width: calc(100% - var(--space-xs) * 2);
    border-radius: var(--radius-lg);
  }

  .grn-header__logo-text {
    font-size: 14px;
  }

  .grn-header__logo-icon {
    width: 24px;
    height: 24px;
    font-size: 12px;
    border-radius: 6px;
  }

  .grn-header__auth-link {
    font-size: 10px;
    padding: 3px 8px;
  }

  .grn-step__number {
    width: 20px;
    height: 20px;
    font-size: 9px;
    border-width: 1.5px;
  }

  .grn-step__connector {
    width: 12px;
  }

  /* --- Domain page: 375px (iPhone SE) ultra-compact --- */

  /* Option cards — minimal padding */
  #order-grncommerce .domain-selection-options .option {
    padding: var(--space-md) !important;
  }

  #order-grncommerce .domain-selection-options .option > label {
    font-size: 13px !important;
  }

  /* Exact match result card */
  #order-grncommerce #searchDomainInfo {
    padding: var(--space-sm) var(--space-md) !important;
  }

  /* Suggested domains — compact list items */
  #order-grncommerce .suggested-domains .list-group-item {
    padding: var(--space-sm) var(--space-md) !important;
  }

  #order-grncommerce .suggested-domains .domain-suggestion .domain {
    font-size: 13px !important;
  }

  #order-grncommerce .suggested-domains .domain-suggestion .price {
    font-size: 13px !important;
  }

  #order-grncommerce .suggested-domains .btn-add-to-cart {
    font-size: 12px !important;
    padding: 6px 14px !important;
  }

  /* Trust badges stack to single column */
  .grn-trust-badges {
    grid-template-columns: 1fr !important;
  }

  /* Domain options container — remove side padding */
  #order-grncommerce .domain-selection-options {
    padding: 0 !important;
  }

  /* Page hero compact */
  .grn-page-hero {
    padding: var(--space-xl) var(--space-sm) var(--space-md) !important;
  }
}