/* =========================================
   OTPro Pricing – Cards + Toggle
   Replace your file with this consolidated version
   Uses CSS variables for easy theming
========================================= */
:root{
  --ot-green:#94C11F;
  --ot-blue:#045679;
  --ot-blue-dark:#003f66;
  --ot-gray-1:#e0e0e0;
  --ot-text:#444;
}

/* =========================================
   WRAPPER: Background + Font
========================================= */
.otpro-pricing-wrapper {
  background: var(--ot-green); /* OTPro green */
  padding: 3rem 2rem;
  border-radius: 10px;
  max-width: 1400px;
  margin: 0 auto;
  /* modern stack; Inter is optional (enqueue via PHP) */
  font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================
   TOGGLE SECTION
========================================= */
.otpro-toggle-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  gap: 1rem;
}
.toggle-label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--ot-blue);
}
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider.round {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc; border-radius: 26px; transition: 0.4s;
}
.slider.round::before {
  content: ""; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px;
  background-color: white; border-radius: 50%; transition: 0.4s;
}
.switch input:checked + .slider.round { background-color: var(--ot-blue); }
.switch input:checked + .slider.round::before { transform: translateX(24px); }

/* =========================================
   GRID SYSTEM
========================================= */
.otpro-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  justify-content: center;
  align-items: stretch; /* stretch cards to same track height */
}

/* =========================================
   PRICING CARDS
========================================= */
.otpro-pricing-card {
  background: #fff;
  border: 2px solid var(--ot-gray-1);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  width: 100%;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  position: relative;
  z-index: 1;
  color: var(--ot-text);

  /* NEW: make card a vertical flex container so the button can pin to bottom */
  display: flex;
  flex-direction: column;
}

.otpro-pricing-card:hover {
  background-color: var(--ot-blue);
  color: #fff;
  transform: scale(1.04);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  border-color: var(--ot-blue);
}

/* On hover, turn text white EXCEPT the Custom pill (handled below) */
.otpro-pricing-card:hover h2,
.otpro-pricing-card:hover ul.features,
.otpro-pricing-card:hover ul.features li,
.otpro-pricing-card:hover .price:not([data-custom="1"]) {
  color: #fff;
}

.otpro-pricing-card.highlighted { border: 2px solid #4E748B; }

/* =========================================
   TEXT STYLING
========================================= */
.otpro-pricing-card h2 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--ot-blue);
  margin-bottom: .75rem;
}
@media (min-width: 768px){
  .otpro-pricing-card h2{ font-size: 1.7rem; }
}

/* Price: larger + punchy */
.otpro-pricing-card .price {
  color: var(--ot-blue-dark);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.1;
  margin: .25rem 0 .75rem;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px){
  .otpro-pricing-card .price{ font-size: 1.75rem; }
}

/* “Custom” pill/badge */
.otpro-pricing-card .price[data-custom="1"]{
  background: var(--ot-blue);
  color: #fff;
  display: inline-block;
  padding: .35rem .75rem;
  border-radius: 999px;
  letter-spacing: .2px;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}
/* Keep the pill readable when card hover turns the card blue */
.otpro-pricing-card:hover .price[data-custom="1"]{
  background: #fff !important;
  color: var(--ot-blue) !important;
}

/* Features: subtle checkmarks and spacing
   Make features flex-grow so they take remaining space above the button */
.otpro-pricing-card ul.features {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.25rem;
  font-size: 0.95rem;
  color: #555;
  text-align: left;

  flex: 1 1 auto; /* NEW: absorb free vertical space */
}
.otpro-pricing-card ul.features li { 
  margin-bottom: 0.5rem; 
  position: relative;
  padding-left: 1.15rem;
}
.otpro-pricing-card ul.features li::before{
  content: "✓";
  position: absolute;
  left: 0; top: .1rem;
  color: var(--ot-green);
  font-weight: 800;
}
.otpro-pricing-card:hover ul.features li::before{
  color: #fff; opacity: .85;
}

/* =========================================
   SELECT BUTTONS (pin to bottom)
========================================= */
.otpro-select-plan-btn {
  background-color: #fff;
  color: var(--ot-blue);
  border: 2px solid var(--ot-blue);
  padding: .7rem 1.2rem;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;

  margin-top: auto;       /* NEW: pushes button to the bottom of the card */
  align-self: center;     /* keep it centered horizontally */
}
.otpro-pricing-card:hover .otpro-select-plan-btn {
  background-color: #fff;
  color: var(--ot-blue);
}
.otpro-select-plan-btn:hover {
  background-color: var(--ot-blue-dark);
  color: #fff;
  border-color: var(--ot-blue-dark);
}

/* Message below button (only appears when products are still syncing) */
.otpro-pricing-card small{
  display:block;
  margin-top:.5rem;
  color:#a00;
}

/* =========================================
   UTILITY
========================================= */
.hidden { display: none !important; }

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  .otpro-pricing-card,
  .otpro-select-plan-btn,
  .slider.round{ transition: none; }
  .otpro-pricing-card:hover{ transform: none; }
}