/* Namespaced consolidated styles for Madarek Subscription Flow */
.madarek-subscription-wrapper {
  /* Variables Scoped to Wrapper */
  --bs-font-sans-serif: 'Inter', system-ui, sans-serif;
  --primary: hsl(38 92% 50%);
  --primary-hsl: 38, 92%, 50%;
  --primary-glow: hsl(38 92% 65%);
  --secondary: hsl(220 14% 96%);
  /* --background: hsl(0 0% 100%);  Use standard white/transparent */
  --foreground: hsl(220 20% 10%);
  --muted: hsl(220 14% 96%);
  --muted-foreground: hsl(220 10% 45%);
  --card: hsl(0 0% 100%);
  --border: hsl(220 13% 91%);
  --success: hsl(142 76% 36%);
  /* Alias for compatibility with pricing-replica.html */
  --foreground-color: var(--foreground);
  --destructive: hsl(0 72% 51%);
  --card-hover-shadow: 0 0 0 2px hsl(38 92% 50% / 0.2), 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  font-family: var(--bs-font-sans-serif);
  font-size: 16px;
  /* Enforce base font size to prevent external CSS shrinking it */
  line-height: 1.5;
  color: var(--foreground);
  background-color: transparent;
  /* Let body bg show through or handle individually */
}

/* --- Utilities --- */
.madarek-subscription-wrapper .text-primary,
.madarek-subscription-wrapper .text-primary-custom {
  color: var(--primary) !important;
}

.madarek-subscription-wrapper .bg-primary,
.madarek-subscription-wrapper .bg-primary-custom {
  background-color: var(--primary) !important;
}

.madarek-subscription-wrapper .text-success,
.madarek-subscription-wrapper .text-success-custom {
  color: var(--success) !important;
}

.madarek-subscription-wrapper .bg-success {
  background-color: var(--success) !important;
}

.madarek-subscription-wrapper .bg-muted,
.madarek-subscription-wrapper .bg-muted-custom {
  background-color: var(--muted) !important;
}

.madarek-subscription-wrapper .text-muted-foreground {
  color: var(--muted-foreground) !important;
}

.madarek-subscription-wrapper .border-border,
.madarek-subscription-wrapper .border-border-custom {
  border-color: var(--border) !important;
}

.madarek-subscription-wrapper .bg-success-light {
  background-color: hsla(142, 76%, 36%, 0.1);
}

.madarek-subscription-wrapper .bg-primary-light {
  background-color: hsla(38, 92%, 50%, 0.1);
}

.madarek-subscription-wrapper .bg-primary-subtle-gradient {
  background: linear-gradient(to right, hsla(38, 92%, 50%, 0.1), hsla(38, 92%, 50%, 0.05));
}

.madarek-subscription-wrapper .bg-primary-soft {
  background-color: hsla(38, 92%, 50%, 0.05);
}

.madarek-subscription-wrapper .text-destructive-custom {
  color: var(--destructive) !important;
}

.madarek-subscription-wrapper .btn-primary,
.madarek-subscription-wrapper .btn-primary-custom {
  background-color: var(--primary);
  border-color: var(--primary);
  color: white;
  /* Use white for better contrast on orange */
  font-weight: 500;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.madarek-subscription-wrapper .btn-primary:hover,
.madarek-subscription-wrapper .btn-primary-custom:hover {
  background-color: hsl(38 92% 45%);
  border-color: hsl(38 92% 45%);
  color: white;
}

.madarek-subscription-wrapper .btn-outline-primary-custom {
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

.madarek-subscription-wrapper .btn-outline-primary-custom:hover {
  background-color: var(--primary);
  color: white;
}

/* --- Components --- */

/* Navbar Overlay Styles (if navbar is inside wrapper) */
.madarek-subscription-wrapper .navbar {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.5);
}

.madarek-subscription-wrapper .nav-link {
  font-weight: 500;
  font-size: 14px;
  /* 0.875rem */
  color: var(--muted-foreground);
  padding: 8px 16px !important;
  /* 0.5rem 1rem */
  border-radius: 8px;
  /* 0.5rem */
  transition: all 0.2s;
}

.madarek-subscription-wrapper .nav-link:hover {
  color: var(--foreground);
  background-color: var(--secondary);
}

.madarek-subscription-wrapper .nav-link.active-link {
  color: var(--primary) !important;
}

.madarek-subscription-wrapper .nav-link.active-link:hover {
  background-color: hsla(38, 92%, 50%, 0.1);
}

/* Step Progress */
.madarek-subscription-wrapper .step-section {
  background-color: hsla(220, 14%, 96%, 0.3);
  padding: 2rem 0;
}

.madarek-subscription-wrapper .step-indicator {
  width: 40px;
  /* 2.5rem */
  height: 40px;
  /* 2.5rem */
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: all 0.3s ease;
  background-color: white;
  color: var(--muted-foreground);
}

.madarek-subscription-wrapper .step-indicator.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.madarek-subscription-wrapper .step-indicator.completed {
  background: var(--success);
  border-color: var(--success);
  color: white;
}

.madarek-subscription-wrapper .step-line,
.madarek-subscription-wrapper .progress-line-container {
  flex: 1;
  height: 4px;
  background-color: var(--border);
  /* Default/Empty state */
  border-radius: 9999px;
  margin: 0 1rem;
}

/* Checkout page specific step-line is usually colored, but let's default to success if completed or logic logic handles it */
.madarek-subscription-wrapper .step-line {
  background-color: var(--success);
  /* Hardcoded in checkout replica so defining here */
}

/* Cards */
.madarek-subscription-wrapper .card {
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.madarek-subscription-wrapper .package-card {
  background-color: white;
  border: 2px solid var(--border);
  border-radius: 16px;
  /* 1rem */
  padding: 24px;
  /* 1.5rem */
  transition: all 0.3s ease;
  cursor: pointer;
  height: 100%;
  position: relative;
}

@media (min-width: 992px) {
  .madarek-subscription-wrapper .package-card {
    padding: 2rem;
  }
}

.madarek-subscription-wrapper .package-card:hover {
  transform: translateY(-4px);
}

.madarek-subscription-wrapper .package-card.selected {
  border-color: var(--primary);
  box-shadow: var(--card-hover-shadow);
}

.madarek-subscription-wrapper .card-premium-bg {
  background: linear-gradient(to bottom right, hsla(38, 92%, 50%, 0.05), hsla(38, 92%, 50%, 0.1));
  border-color: hsla(38, 92%, 50%, 0.3);
}

/* Badges */
.madarek-subscription-wrapper .badge-pill-custom {
  background-color: hsla(38, 92%, 50%, 0.1);
  border: 1px solid hsla(38, 92%, 50%, 0.2);
  color: var(--primary);
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 14px;
  /* 0.875rem */
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.madarek-subscription-wrapper .popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--primary);
  color: white;
  font-size: 12px;
  /* 0.75rem */
  font-weight: 600;
  padding: 4px 12px;
  /* 0.25rem 0.75rem */
  border-radius: 9999px;
}

.madarek-subscription-wrapper .enterprise-badge {
  position: absolute;
  top: -12px;
  right: 1rem;
  background: linear-gradient(to right, var(--primary), var(--primary-glow));
  color: white;
  font-size: 12px;
  /* 0.75rem */
  font-weight: 600;
  padding: 4px 12px;
  /* 0.25rem 0.75rem */
  border-radius: 9999px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Forms */
.madarek-subscription-wrapper .form-control,
.madarek-subscription-wrapper .form-control-lg-custom,
.madarek-subscription-wrapper .form-select {
  border: 2px solid var(--border);
  padding: 12px 16px;
  /* 0.75rem 1rem */
  border-radius: 12px;
  /* 0.75rem */
}

.madarek-subscription-wrapper .form-control:focus,
.madarek-subscription-wrapper .form-control-lg-custom:focus,
.madarek-subscription-wrapper .form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px hsla(38, 92%, 50%, 0.1);
}

.madarek-subscription-wrapper .billing-btn {
  border: none;
  background: none;
  padding: 12px 24px;
  /* 0.75rem 1.5rem */
  border-radius: 8px;
  /* 0.5rem */
  font-size: 14px;
  /* 0.875rem */
  font-weight: 500;
  color: var(--foreground);
  transition: all 0.2s;
}

.madarek-subscription-wrapper .billing-btn.active {
  background-color: var(--primary);
  color: white;
}

/* Payment & Checkout */
.madarek-subscription-wrapper .payment-option {
  border: 2px solid var(--border);
  border-radius: 12px;
  /* 0.75rem */
  padding: 20px;
  /* 1.25rem */
  cursor: pointer;
  transition: all 0.3s ease;
}

.madarek-subscription-wrapper .payment-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.madarek-subscription-wrapper .payment-option.selected {
  border-color: var(--primary);
  background: hsla(38, 92%, 50%, 0.05);
  box-shadow: 0 0 0 2px hsla(38, 92%, 50%, 0.2);
}

.madarek-subscription-wrapper .payment-icon-wrapper {
  width: 24px;
  /* 1.5rem */
  height: 24px;
  /* 1.5rem */
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.madarek-subscription-wrapper .payment-dot {
  width: 12px;
  /* 0.75rem */
  height: 12px;
  /* 0.75rem */
  border-radius: 50%;
}

.madarek-subscription-wrapper .payment-option.selected .payment-icon-wrapper {
  border-color: var(--primary);
}

.madarek-subscription-wrapper .payment-option.selected .payment-dot {
  background-color: var(--primary);
}

/* Icon Box */
.madarek-subscription-wrapper .icon-box {
  width: 40px !important;
  /* 2.5rem - Force override inline styles */
  height: 40px !important;
  /* 2.5rem - Force override inline styles */
  border-radius: 12px;
  /* 0.75rem */
  display: flex;
  align-items: center;
  justify-content: center;
  /* background managed by utility classes usually, or add defaults */
  background-color: hsla(38, 92%, 50%, 0.1);
  /* default to primary light */
}

.madarek-subscription-wrapper .icon-box i {
  color: var(--primary);
}

.madarek-subscription-wrapper .detail-row {
  transition: background-color 0.2s ease;
}

.madarek-subscription-wrapper .detail-row:hover {
  background-color: hsla(220, 14%, 96%, 0.5);
}

/* Animations */
.madarek-subscription-wrapper .hero-blob {
  position: absolute;
  top: 5rem;
  right: 25%;
  width: 18rem;
  height: 18rem;
  background-color: hsla(38, 92%, 50%, 0.1);
  border-radius: 50%;
  filter: blur(64px);
  animation: madarek-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  z-index: -1;
}

@keyframes madarek-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.madarek-subscription-wrapper .success-checkmark {
  animation: madarek-scaleIn 0.5s ease-out forwards, madarek-pulse-ring 2s ease-out 0.5s infinite;
}

.madarek-subscription-wrapper .success-ring {
  animation: madarek-ring-expand 0.6s ease-out forwards;
}

.madarek-subscription-wrapper .warning-checkmark {
  animation: madarek-scaleIn 0.5s ease-out forwards, madarek-pulse-ring 2s ease-out 0.5s infinite;
}

.madarek-subscription-wrapper .warning-ring {
  animation: madarek-ring-expand 0.6s ease-out forwards;
}

@keyframes madarek-scaleIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes madarek-ring-expand {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes madarek-pulse-ring {
  0% {
    box-shadow: 0 0 0 0 hsl(142 76% 36% / 0.4);
  }

  70% {
    box-shadow: 0 0 0 20px hsl(142 76% 36% / 0);
  }

  100% {
    box-shadow: 0 0 0 0 hsl(142 76% 36% / 0);
  }
}

.madarek-subscription-wrapper .coupon-success {
  animation: madarek-shake 0.3s ease-in-out;
}

@keyframes madarek-shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

.madarek-subscription-wrapper .fade-in-up {
  animation: madarek-fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}

.madarek-subscription-wrapper .delay-1 {
  animation-delay: 0.2s;
}

.madarek-subscription-wrapper .delay-2 {
  animation-delay: 0.4s;
}

.madarek-subscription-wrapper .delay-3 {
  animation-delay: 0.6s;
}

.madarek-subscription-wrapper .delay-4 {
  animation-delay: 0.8s;
}

@keyframes madarek-fadeInUp {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Footer (Standardized) */
.madarek-subscription-wrapper footer {
  background-color: var(--foreground);
  color: white;
}

.madarek-subscription-wrapper footer a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}

.madarek-subscription-wrapper footer a:hover {
  color: white;
}

.madarek-subscription-wrapper .social-icon {
  width: 40px;
  /* 2.5rem */
  height: 40px;
  /* 2.5rem */
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  /* 0.5rem */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.madarek-subscription-wrapper .social-icon:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Confetti */
.confetti {
  /* Confetti is fixed position and appended to body, so it might live outside the wrapper. 
     If generated inside, it's fine. If the script appends to body, we might need global styles 
     OR change script to append to wrapper. 
     For now, leaving confetti global or outside wrapper scope if necessary, 
     BUT if we want strict isolation we should scope it. */
  position: fixed;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 100;
}

/* We can keep confetti un-namespaced generally or ensure it's generated inside the wrapper. */

/* --- Missing Styles Restored --- */

/* Check List */
.madarek-subscription-wrapper .check-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 0.75rem */
  font-size: 14px;
  /* 0.875rem */
  margin-bottom: 12px;
  /* 0.75rem */
}

/* Config Panel */
.madarek-subscription-wrapper .config-panel {
  border: 1px solid var(--border);
  border-radius: 16px;
  /* 1rem */
  padding: 24px;
  /* 1.5rem */
  margin-bottom: 2rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

@media (min-width: 992px) {
  .madarek-subscription-wrapper .config-panel {
    padding: 2rem;
  }
}

/* Summary Panel */
.madarek-subscription-wrapper .summary-panel {
  background: linear-gradient(to right, hsla(220, 14%, 96%, 0.5), hsla(220, 14%, 96%, 0.3));
  border: 1px solid var(--border);
  border-radius: 16px;
  /* 1rem */
  padding: 24px;
  /* 1.5rem */
  margin-bottom: 2rem;
}

@media (min-width: 992px) {
  .madarek-subscription-wrapper .summary-panel {
    padding: 2rem;
  }
}

.madarek-subscription-wrapper .summary-card {
  background-color: white;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Feature Table */
.madarek-subscription-wrapper .feature-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.madarek-subscription-wrapper .feature-table th {
  background-color: var(--foreground);
  color: white;
  padding: 1rem;
  font-weight: 600;
}

.madarek-subscription-wrapper .feature-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
}

.madarek-subscription-wrapper .feature-table tr:last-child td {
  border-bottom: none;
}

/* CTA Bottom */
.madarek-subscription-wrapper .cta-bottom {
  background: linear-gradient(to bottom right, hsla(38, 92%, 50%, 0.1), white, hsla(38, 92%, 50%, 0.05));
  border-radius: 1.5rem;
  padding: 4rem 1rem;
  text-align: center;
}

/* Helpers */
.madarek-subscription-wrapper .d-none-custom {
  display: none !important;
}

/* --- Bootstrap 10px Root Fixes --- */
.madarek-subscription-wrapper h1,
.madarek-subscription-wrapper .h1 {
  font-size: 40px;
}

/* 2.5rem */
.madarek-subscription-wrapper h2,
.madarek-subscription-wrapper .h2 {
  font-size: 32px;
}

/* 2rem */
.madarek-subscription-wrapper h3,
.madarek-subscription-wrapper .h3 {
  font-size: 28px;
}

/* 1.75rem */
.madarek-subscription-wrapper h4,
.madarek-subscription-wrapper .h4 {
  font-size: 24px;
}

/* 1.5rem */
.madarek-subscription-wrapper h5,
.madarek-subscription-wrapper .h5 {
  font-size: 20px;
}

/* 1.25rem */
.madarek-subscription-wrapper h6,
.madarek-subscription-wrapper .h6 {
  font-size: 16px;
}

/* 1rem */
.madarek-subscription-wrapper .lead {
  font-size: 20px !important;
}

/* 1.25rem override */

.madarek-subscription-wrapper .btn {
  font-size: 16px;
  border-radius: 8px !important;
  /* Force standard radius as rem is broken */
}

/* Fix for buttons using utility classes for padding which are now shrunk */
.madarek-subscription-wrapper .btn.px-4 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.madarek-subscription-wrapper .btn.py-2 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.madarek-subscription-wrapper .btn.py-3 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.madarek-subscription-wrapper .form-control {
  font-size: 16px;
}

.madarek-subscription-wrapper .form-select {
  font-size: 16px;
}

.madarek-subscription-wrapper .input-group-text {
  font-size: 16px;
}

.madarek-subscription-wrapper .badge {
  font-size: 0.75em;
}

/* Badges are usually relative */

/* Fix for icons disappearing or being too small */
.madarek-subscription-wrapper i,
.madarek-subscription-wrapper .fa,
.madarek-subscription-wrapper .fa-solid,
.madarek-subscription-wrapper .fa-regular {
  font-size: inherit;
  /* Allow inheriting from parent with fixed pixel size */
}

/* Specifically fix icon-box icon size if needed */
.madarek-subscription-wrapper .icon-box i {
  font-size: 20px;
}

/* Ensure white text is respected in icon boxes (fixes invisible rocket on bg-primary) */
.madarek-subscription-wrapper .icon-box.text-white i {
  color: white !important;
}

/* Fix for rounded corners */
.madarek-subscription-wrapper .rounded-3 {
  border-radius: 16px !important;
}

/* 1rem */
.madarek-subscription-wrapper .rounded-4 {
  border-radius: 24px !important;
}

/* 1.5rem */
.madarek-subscription-wrapper .rounded-pill {
  border-radius: 9999px !important;
}

.madarek-subscription-wrapper .rounded-circle {
  border-radius: 50% !important;
}

.madarek-subscription-wrapper .rounded {
  border-radius: 8px !important;
}

/* --- Bootstrap Spacing Overrides (Fix for 10px root) --- */
/* Mapping: 1=4px, 2=8px, 3=16px, 4=24px, 5=48px (approx standard) */

/* Margins */
.madarek-subscription-wrapper .m-0 {
  margin: 0 !important;
}

.madarek-subscription-wrapper .m-1 {
  margin: 4px !important;
}

.madarek-subscription-wrapper .m-2 {
  margin: 8px !important;
}

.madarek-subscription-wrapper .m-3 {
  margin: 16px !important;
}

.madarek-subscription-wrapper .m-4 {
  margin: 24px !important;
}

.madarek-subscription-wrapper .m-5 {
  margin: 48px !important;
}

.madarek-subscription-wrapper .mt-0,
.madarek-subscription-wrapper .my-0 {
  margin-top: 0 !important;
}

.madarek-subscription-wrapper .mt-1,
.madarek-subscription-wrapper .my-1 {
  margin-top: 4px !important;
}

.madarek-subscription-wrapper .mt-2,
.madarek-subscription-wrapper .my-2 {
  margin-top: 8px !important;
}

.madarek-subscription-wrapper .mt-3,
.madarek-subscription-wrapper .my-3 {
  margin-top: 16px !important;
}

.madarek-subscription-wrapper .mt-4,
.madarek-subscription-wrapper .my-4 {
  margin-top: 24px !important;
}

.madarek-subscription-wrapper .mt-5,
.madarek-subscription-wrapper .my-5 {
  margin-top: 48px !important;
}

.madarek-subscription-wrapper .mb-0,
.madarek-subscription-wrapper .my-0 {
  margin-bottom: 0 !important;
}

.madarek-subscription-wrapper .mb-1,
.madarek-subscription-wrapper .my-1 {
  margin-bottom: 4px !important;
}

.madarek-subscription-wrapper .mb-2,
.madarek-subscription-wrapper .my-2 {
  margin-bottom: 8px !important;
}

.madarek-subscription-wrapper .mb-3,
.madarek-subscription-wrapper .my-3 {
  margin-bottom: 16px !important;
}

.madarek-subscription-wrapper .mb-4,
.madarek-subscription-wrapper .my-4 {
  margin-bottom: 24px !important;
}

.madarek-subscription-wrapper .mb-5,
.madarek-subscription-wrapper .my-5 {
  margin-bottom: 48px !important;
}

.madarek-subscription-wrapper .ms-0,
.madarek-subscription-wrapper .mx-0 {
  margin-left: 0 !important;
}

.madarek-subscription-wrapper .ms-1,
.madarek-subscription-wrapper .mx-1 {
  margin-left: 4px !important;
}

.madarek-subscription-wrapper .ms-2,
.madarek-subscription-wrapper .mx-2 {
  margin-left: 8px !important;
}

.madarek-subscription-wrapper .ms-3,
.madarek-subscription-wrapper .mx-3 {
  margin-left: 16px !important;
}

.madarek-subscription-wrapper .ms-4,
.madarek-subscription-wrapper .mx-4 {
  margin-left: 24px !important;
}

.madarek-subscription-wrapper .ms-5,
.madarek-subscription-wrapper .mx-5 {
  margin-left: 48px !important;
}

.madarek-subscription-wrapper .me-0,
.madarek-subscription-wrapper .mx-0 {
  margin-right: 0 !important;
}

.madarek-subscription-wrapper .me-1,
.madarek-subscription-wrapper .mx-1 {
  margin-right: 4px !important;
}

.madarek-subscription-wrapper .me-2,
.madarek-subscription-wrapper .mx-2 {
  margin-right: 8px !important;
}

.madarek-subscription-wrapper .me-3,
.madarek-subscription-wrapper .mx-3 {
  margin-right: 16px !important;
}

.madarek-subscription-wrapper .me-4,
.madarek-subscription-wrapper .mx-4 {
  margin-right: 24px !important;
}

.madarek-subscription-wrapper .me-5,
.madarek-subscription-wrapper .mx-5 {
  margin-right: 48px !important;
}

/* Paddings */
.madarek-subscription-wrapper .p-0 {
  padding: 0 !important;
}

.madarek-subscription-wrapper .p-1 {
  padding: 4px !important;
}

.madarek-subscription-wrapper .p-2 {
  padding: 8px !important;
}

.madarek-subscription-wrapper .p-3 {
  padding: 16px !important;
}

.madarek-subscription-wrapper .p-4 {
  padding: 24px !important;
}

.madarek-subscription-wrapper .p-5 {
  padding: 48px !important;
}

.madarek-subscription-wrapper .pt-0,
.madarek-subscription-wrapper .py-0 {
  padding-top: 0 !important;
}

.madarek-subscription-wrapper .pt-1,
.madarek-subscription-wrapper .py-1 {
  padding-top: 4px !important;
}

.madarek-subscription-wrapper .pt-2,
.madarek-subscription-wrapper .py-2 {
  padding-top: 8px !important;
}

.madarek-subscription-wrapper .pt-3,
.madarek-subscription-wrapper .py-3 {
  padding-top: 16px !important;
}

.madarek-subscription-wrapper .pt-4,
.madarek-subscription-wrapper .py-4 {
  padding-top: 24px !important;
}

.madarek-subscription-wrapper .pt-5,
.madarek-subscription-wrapper .py-5 {
  padding-top: 48px !important;
}

.madarek-subscription-wrapper .pb-0,
.madarek-subscription-wrapper .py-0 {
  padding-bottom: 0 !important;
}

.madarek-subscription-wrapper .pb-1,
.madarek-subscription-wrapper .py-1 {
  padding-bottom: 4px !important;
}

.madarek-subscription-wrapper .pb-2,
.madarek-subscription-wrapper .py-2 {
  padding-bottom: 8px !important;
}

.madarek-subscription-wrapper .pb-3,
.madarek-subscription-wrapper .py-3 {
  padding-bottom: 16px !important;
}

.madarek-subscription-wrapper .pb-4,
.madarek-subscription-wrapper .py-4 {
  padding-bottom: 24px !important;
}

.madarek-subscription-wrapper .pb-5,
.madarek-subscription-wrapper .py-5 {
  padding-bottom: 48px !important;
}

.madarek-subscription-wrapper .ps-0,
.madarek-subscription-wrapper .px-0 {
  padding-left: 0 !important;
}

.madarek-subscription-wrapper .ps-1,
.madarek-subscription-wrapper .px-1 {
  padding-left: 4px !important;
}

.madarek-subscription-wrapper .ps-2,
.madarek-subscription-wrapper .px-2 {
  padding-left: 8px !important;
}

.madarek-subscription-wrapper .ps-3,
.madarek-subscription-wrapper .px-3 {
  padding-left: 16px !important;
}

.madarek-subscription-wrapper .ps-4,
.madarek-subscription-wrapper .px-4 {
  padding-left: 24px !important;
}

.madarek-subscription-wrapper .ps-5,
.madarek-subscription-wrapper .px-5 {
  padding-left: 48px !important;
}

.madarek-subscription-wrapper .pe-0,
.madarek-subscription-wrapper .px-0 {
  padding-right: 0 !important;
}

.madarek-subscription-wrapper .pe-1,
.madarek-subscription-wrapper .px-1 {
  padding-right: 4px !important;
}

.madarek-subscription-wrapper .pe-2,
.madarek-subscription-wrapper .px-2 {
  padding-right: 8px !important;
}

.madarek-subscription-wrapper .pe-3,
.madarek-subscription-wrapper .px-3 {
  padding-right: 16px !important;
}

.madarek-subscription-wrapper .pe-4,
.madarek-subscription-wrapper .px-4 {
  padding-right: 24px !important;
}

.madarek-subscription-wrapper .pe-5,
.madarek-subscription-wrapper .px-5 {
  padding-right: 48px !important;
}

/* Gaps (Flex) */
.madarek-subscription-wrapper .gap-0 {
  gap: 0 !important;
}

.madarek-subscription-wrapper .gap-1 {
  gap: 4px !important;
}

.madarek-subscription-wrapper .gap-2 {
  gap: 8px !important;
}

.madarek-subscription-wrapper .gap-3 {
  gap: 16px !important;
}

.madarek-subscription-wrapper .gap-4 {
  gap: 24px !important;
}

.madarek-subscription-wrapper .gap-5 {
  gap: 48px !important;
}

/* List group / other rem usages */
.madarek-subscription-wrapper .list-group-item {
  padding: 12px 20px;
  /* 0.75rem 1.25rem override */
}

.madarek-subscription-wrapper .rounded-circle {
  border-radius: 50% !important;
}

.madarek-subscription-wrapper .rounded {
  border-radius: 8px !important;
}

.madarek-subscription-wrapper ul,
.madarek-subscription-wrapper ol,
.madarek-subscription-wrapper li {
  font-size: inherit;
}

/* End of Fixes */

/* Text alignment fix for CTA if needed */
.madarek-subscription-wrapper .text-center {
  text-align: center !important;
}

.help-block { color:red; }

/* ---------- Billing Toggle ---------- */
.madarek-subscription-wrapper .billing-toggle {
    display: inline-flex;
    border: 2px solid var(--primary-color);
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
}

.madarek-subscription-wrapper .billing-toggle input {
    display: none;
}

.madarek-subscription-wrapper .billing-toggle label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 30px;
    margin: 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.4rem;
    background: transparent;
    transition: background-color 0.25s ease, color 0.25s ease;
    white-space: nowrap;
}

.madarek-subscription-wrapper .billing-toggle input:checked + label {
    background: var(--primary-color);
    color: #fff;
}

.madarek-subscription-wrapper .billing-toggle label:first-of-type {
    border-radius: 23px 0 0 23px;
}

.madarek-subscription-wrapper .billing-toggle label:last-of-type {
    border-radius: 0 23px 23px 0;
}

.package-pending-alert {
    background-color: #fff8ee;
    border: 1px solid #ffd7a0;
    border-radius: 14px;
    padding: 20px 24px;
}

.package-pending-alert h6 {
    color: #1f2937;
    font-size: 15px;
}

.package-pending-alert p {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}

.package-pending-alert .icon-wrapper {
    width: 36px;
    height: 36px;
    min-width: 45px;
    border-radius: 50%;
    background-color: #fff1dc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.package-pending-alert .icon-wrapper i {
    color: #f59e0b;
    font-size: 26px;
}

.copy-box {
    padding-right: 42px; /* space for icon */
}

.copy-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    cursor: pointer;
    font-size: 15px;
    color: #9ca3af;
    transition: color 0.2s ease;
}

.copy-icon:hover {
    color: #f59e0b;
}

.hero-section {
    position: relative;
    padding: 100px 0;
    background: #ffffff;
    overflow: hidden;
}

/* Triangle container */
.corner-offer {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #ff8a00, #ff5f00);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    z-index: 50;
}

/* Text inside triangle */
.corner-text {
    position: absolute;
    top: 35%;                
    left: 60%;
    width: 240px;
    transform: translate(-50%, -50%) rotate(45deg);
    text-align: center;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    pointer-events: none;
}

.corner-text strong {
    display: block;
    font-size: 17px;         /* slightly reduced to fit */
    font-weight: 800;
    margin-top: 4px;
}

@media (max-width: 576px) {
    .corner-offer {
        width: 135px;
        height: 135px;
    }

    .corner-text {
        width: 180px;
        font-size: 11px;
    }

    .corner-text strong {
        font-size: 14px;
    }
}