/* ========================================================================
   Pricing Section v2 – deck-style cards with mobile stacking
   ===================================================================== */
.new-pricing .pricing-stack{
  display:flex;
  gap:var(--space-8);
  justify-content:center;
  flex-wrap:wrap;
  position:relative;
}

.plan-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-8);
    width: 100%;
    max-width: 360px;
    position: relative;
    transition: transform .35s var(--transition-bounce),box-shadow .35s;
    cursor: pointer;
    will-change: transform;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.plan-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);}
.plan-card:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}

.plan-card .plan-header h3{
  font-family:var(--font-display);
  font-size:var(--text-2xl);
  font-weight:700;
  margin-bottom:var(--space-1);
}
.plan-card .plan-header p{color:var(--color-text-muted);margin-bottom:var(--space-4);}

.plan-price {
    display: flex;
    align-items: baseline;
    margin-bottom: var(--space-2);
    justify-content: center;
}
.price-main{font-family:var(--font-display);font-size:var(--text-5xl);font-weight:700;}
.price-period {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-left: var(--space-2);
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: baseline;
    width: -webkit-fill-available;
    gap: var(--space-1);
}
.price-sub{color:var(--color-text-light);margin-bottom:var(--space-4);}

.plan-features{margin:0 0 var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);}
.plan-features li {
    display: flex;
    font-size: var(--text-sm);
    color: var(--color-text-light);
}
.plan-features li::before {
    content: "✓";
    color: var(--color-primary);
    font-weight: 700;
    margin-right: var(--space-1);
}
.plan-features li:has(.urlPrimjer) {
    flex-direction: row;
    flex-wrap: wrap;
}
.plan-card .primary-btn{width:100%;}
.plan-features li * {
    width: min-content;
}
span.urlPrimjer {
    font-family: 'Courier New', Courier, monospace;
    margin: 0 var(--space-2);
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: var(--space-2);
    width: 100%;
    justify-content: flex-end;
}
span.urlPrimjer em {
    font-weight: 900;
    color: var(--color-primary);
    font-style: normal;
    width: max-content;
}
.badge{
  position:absolute;top:-14px;right:var(--space-6);
  background:var(--color-secondary);color:var(--color-bg-darker);
  font-size:var(--text-xs);font-weight:700;padding:2px 10px;border-radius:var(--radius-full);
}

/* Colour accents (optional) */
.plan-free   .price-main,.plan-free .plan-header > h3{
  color:#107bb9 !important;
}     
.plan-premium .price-main,.plan-premium .plan-header > h3{
  color:#f59e0b !important;
}   
.plan-lifetime .price-main, .plan-lifetime .plan-header > h3 {
    color: #ec4899 !important;
}

/* ------------------ Mobile “deck” behaviour ----------------------------- */
@media(max-width:767px){
  .new-pricing .pricing-stack{
    flex-direction:column;
    gap:0;
  }
  .plan-card{
    /* stack them like a card deck */
    margin:0 auto calc(var(--space-8)*1.5);
    transform:translateY(var(--stack-offset,0)) scale(var(--stack-scale,1));
    transition:transform .45s var(--transition-bounce),box-shadow .35s;
  }
  .plan-card:not(.expanded){
    --stack-scale:.95;
    --stack-offset:-10px;
    opacity:.9;
  }
  .plan-card.expanded{
    --stack-scale:1;
    --stack-offset:0;
    box-shadow:var(--shadow-lg);
  }
}

/* Footnote */
.new-pricing .pricing-footnote{
  text-align:center;
  color:var(--color-text-light);
  margin-top:var(--space-12);
  max-width:600px;
  margin-left:auto;margin-right:auto;
}


/* ========================================================================
   All-Plans-Include block
   ===================================================================== */
.plan-common{
  max-width:800px;
  margin:var(--space-12) auto;
  text-align:center;
}

.plan-common h4{
  font-family:var(--font-display);
  font-size:var(--text-lg);
  font-weight:700;
  margin-bottom:var(--space-4);
}

.common-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-4);
}

.common-features li {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--text-sm);
    color: var(--color-text-light);
    text-align: left;
    justify-content: flex-start;
}

.common-features i{
  font-size:1rem;
  color:var(--color-primary);
}

@media (max-width:479px){
  .common-features li{
    flex:1 1 100%;      /* force single column for tiny screens */
  }
}

.plan-price-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.plan-price .price-period {
  font-size: 0.9rem;
  line-height: 1.2;
}

.billing-term.toggleable-term {
  cursor: pointer;
  font-weight: 500;
  text-decoration: underline dotted;
  transition: color 0.2s ease;
}

.billing-term.toggleable-term:hover {
  color: #005bcc;
}