/* =============================================
   IPTVSTORE — Pricing Cards Section
   Redesigned: "ticket-stub" card language —
   perforated divider between header and tiers,
   flat accent tab instead of diagonal ribbon,
   dark elevated card for featured/locked plans
   instead of full-color flood.
   ============================================= */

  :root{
    --pink:#C2185B;
    --pink-dark:#8E1044;
    --pink-light:#F06292;
    --ink:#111827;
    --muted:#6b7280;
    --card-line:#f0c6d8;
  }
  *{ box-sizing:border-box; }
  body{
    margin:0;
    font-family:'Inter', Arial, sans-serif;
    background:#ffffff;
  }

  .price-section{
    background:#ffffff;
    padding: 64px 16px 76px 16px;
  }

  .price-section-header{
    text-align:center;
    max-width:640px;
    margin:0 auto 48px auto;
  }
  .price-section-header span.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:var(--pink-dark);
    background:#fdeef4;
    border:1px solid #f3b8d1;
    padding:6px 16px;
    border-radius:8px;
    font-size:11px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    margin-bottom:16px;
  }
  .price-section-header span.eyebrow::before{
    content:'';
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--pink);
    flex-shrink:0;
  }
  .price-section-header h2{
    color:var(--ink);
    font-weight:800;
    font-size:clamp(24px, 4vw, 36px);
    margin:0 0 10px 0;
    letter-spacing:-0.3px;
  }
  .price-section-header .underline{
    display:none;
  }
  .price-section-header p{
    color:var(--muted);
    font-size:14px;
    margin:0;
    line-height:1.6;
  }

  /* ===== Card grid ===== */
  .price-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:stretch;
    gap:20px;
    max-width:1140px;
    margin:0 auto;
  }

  .price-card{
    box-sizing:border-box;
    width:100%;
    background:linear-gradient(160deg, #fde6ef 0%, #fbc7dd 100%);
    border-radius:16px;
    padding:22px 20px 18px 20px;
    text-align:center;
    box-shadow:0 1px 2px rgba(15,23,42,0.04), 0 12px 28px rgba(194, 24, 91,0.10);
    border:1px solid #f3b8d1;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, border-color 0.35s ease;
  }
  .price-card:hover{
    transform:translateY(-4px);
    box-shadow:0 1px 2px rgba(15,23,42,0.04), 0 18px 34px rgba(194, 24, 91,0.18);
    border-color:var(--pink-light);
  }

  /* flat accent tab, top-left — replaces animated gradient bar */
  .price-card::before{
    content:'';
    position:absolute;
    top:0; left:22px;
    width:34px;
    height:4px;
    background:var(--pink);
    border-radius:0 0 3px 3px;
  }

  /* soft corner glow, static */
  .price-card::after{
    content:'';
    position:absolute;
    width:160px;
    height:160px;
    top:-90px;
    right:-90px;
    background:radial-gradient(circle, rgba(194, 24, 91,0.10) 0%, rgba(194, 24, 91,0) 70%);
    border-radius:50%;
    pointer-events:none;
  }

  /* card-bottom-fill now used only as a very subtle footer wash on standard cards */
  .card-bottom-fill{
    position:absolute;
    left:0; right:0; bottom:0;
    height:1px;
    background:transparent;
    pointer-events:none;
    z-index:0;
  }

  .price-card.featured{
    background:linear-gradient(160deg, #fbb8d3 0%, #f78fb7 100%);
    border:1px solid var(--pink-light);
    box-shadow:0 1px 2px rgba(15,23,42,0.1), 0 18px 36px rgba(194, 24, 91,0.22);
    transform:translateY(-6px);
  }
  .price-card.featured:hover{ transform:translateY(-9px); }
  .price-card.featured::before{ background:var(--pink-dark); }
  .price-card.featured::after{ background:radial-gradient(circle, rgba(194, 24, 91,0.20) 0%, rgba(194, 24, 91,0) 70%); }

  /* Popular badge — flat pill, centered, sits on the top edge (no diagonal ribbon) */
  .plan-badge{
    position:absolute;
    top:14px;
    left:50%;
    transform:translateX(-50%);
    background:#ffffff;
    color:var(--pink-dark);
    font-size:10px;
    font-weight:700;
    letter-spacing:0.8px;
    text-transform:uppercase;
    padding:5px 16px;
    border-radius:20px;
    box-shadow:0 4px 10px rgba(0,0,0,0.25);
    z-index:2;
  }
  /* Icon sits lower on cards that have the Popular badge, so nothing overlaps */
  .plan-badge + .price-icon{
    margin-top:30px;
  }

  .price-icon{
    width:44px;
    height:44px;
    border-radius:12px;
    margin:6px auto 12px auto;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    background:#ffffff;
    color:var(--pink-dark);
    flex-shrink:0;
    position:relative;
    z-index:1;
    box-shadow:0 2px 8px rgba(194, 24, 91,0.15);
  }
  .price-card.featured .price-icon{
    background:#ffffff;
    color:var(--pink-dark);
  }

  .price-card h3{
    font-size:20px;
    font-weight:800;
    margin:0 0 5px 0;
    color:var(--ink);
    line-height:1.3;
    flex-shrink:0;
    position:relative;
    z-index:1;
    letter-spacing:-0.1px;
  }
  .price-card.featured h3{ color:var(--ink); }

  .plan-desc-wrap{
    min-height:32px;
    margin:0 0 16px 0;
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
  }
  .plan-desc{
    font-size:12.5px;
    line-height:1.6;
    color:var(--muted);
    margin:0;
    font-weight:400;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .price-card.featured .plan-desc{ color:#7a4a5c; }

  /* perforated "ticket-stub" divider above the tier list */
  .tier-list{
    list-style:none;
    margin:0 0 18px 0;
    padding:14px 0 0 0;
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:0;
    position:relative;
    z-index:1;
    border-top:1px dashed #e7a9c4;
  }
  .price-card.featured .tier-list{ border-top-color:rgba(142,16,68,0.25); }
  .tier-list::before,
  .tier-list::after{
    content:'';
    position:absolute;
    top:-6px;
    width:12px;
    height:12px;
    background:#ffffff;
    border-radius:50%;
    border:1px solid var(--card-line);
  }
  .tier-list::before{ left:-32px; }
  .tier-list::after{ right:-32px; }
  .price-card.featured .tier-list::before,
  .price-card.featured .tier-list::after{ background:#ffffff; border-color:var(--pink-light); }

  .tier-list li{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    padding:6px 2px;
    border-bottom:1px solid #f5d3e2;
    font-size:12.5px;
  }
  .price-card.featured .tier-list li{ border-bottom-color:rgba(142,16,68,0.14); }
  .tier-list li:last-child{ border-bottom:none; }

  .tier-label{
    color:var(--muted);
    font-weight:500;
    text-align:left;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .price-card.featured .tier-label{ color:#7a4a5c; }
  .tier-label::before{
    content:'';
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--pink);
    flex-shrink:0;
  }
  .tier-price{
    font-weight:700;
    color:var(--ink);
    text-align:right;
    white-space:nowrap;
  }
  .price-card.featured .tier-price{ color:var(--ink); }
  .tier-price em{
    font-style:normal;
    font-weight:500;
    font-size:10px;
    color:#9ca3af;
    display:block;
  }
  .price-card.featured .tier-price em{ color:#a06b7c; }

  /* ===== Button — rounded-rect (matches card radius language), shine sweep kept ===== */
  .btn-whatsapp-order{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    background:var(--pink);
    color:#fff;
    font-weight:700;
    font-size:13px;
    letter-spacing:0.2px;
    text-decoration:none;
    padding:13px 10px;
    border-radius:11px;
    box-shadow:0 8px 18px rgba(194, 24, 91,0.28);
    transition:transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    flex-shrink:0;
    overflow:hidden;
    z-index:1;
  }
  .btn-whatsapp-order span{ position:relative; z-index:2; }
  .btn-whatsapp-order::before{
    content:'';
    position:absolute;
    top:0;
    left:-75%;
    width:50%;
    height:100%;
    background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform:skewX(-20deg);
    transition:left 0.6s ease;
  }
  .btn-whatsapp-order:hover::before{ left:130%; }
  .btn-whatsapp-order:hover{
    transform:translateY(-2px);
    background:var(--pink-dark);
    box-shadow:0 12px 24px rgba(194, 24, 91,0.38);
    color:#fff;
  }
  .price-card.featured .btn-whatsapp-order{
    background:var(--pink-dark);
    box-shadow:0 8px 18px rgba(142,16,68,0.35);
  }
  .price-card.featured .btn-whatsapp-order:hover{
    background:var(--ink);
  }

  .price-footer-note{
    text-align:center;
    color:#9ca3af;
    font-size:11.5px;
    margin-top:40px;
  }

  /* ===== Responsive columns: 4 / 2 / 2 (compact) ===== */
  .price-card{ width:calc(50% - 8px); }

  @media (min-width:992px){
    .price-card{ width:calc(25% - 15px); }
  }

  /* ===== Compact mobile sizing — one card per row, narrower & smaller ===== */
  @media (max-width:575.98px){
    .price-grid{ gap:14px; }
    .price-card{
      width:86%;
      max-width:280px;
      margin:0 auto;
      padding:14px 12px 12px 12px;
      border-radius:12px;
    }
    .price-icon{
      width:34px;
      height:34px;
      font-size:14px;
      margin:3px auto 7px auto;
      border-radius:9px;
    }
    .plan-badge + .price-icon{ margin-top:24px; }
    .price-card h3{ font-size:15px; margin:0 0 3px 0; }
    .plan-desc-wrap{ display:none; }
    .tier-list{ margin:0 0 10px 0; padding-top:8px; }
    .tier-list li{ padding:4px 1px; font-size:10.5px; }
    .tier-list::before,
    .tier-list::after{ display:none; }
    .tier-price em{ font-size:8.5px; }
    .btn-whatsapp-order{ font-size:10.5px; padding:9px 6px; border-radius:8px; }
    .price-card-compact{ width:86%; max-width:280px; margin:0 auto; padding:12px 10px 10px 10px; }
    .price-card-compact .price-icon{ width:28px; height:28px; font-size:12px; margin:3px auto 6px auto; }
    .price-card-compact h3{ font-size:14px; }
    .price-card-compact .tier-list{ margin:0 0 8px 0; padding-top:7px; }
    .price-card-compact .tier-list li{ font-size:10px; padding:3px 1px; }
    .price-card-compact .btn-whatsapp-order{ font-size:10px; padding:8px 6px; }
  }

  /* ===== Very small phones — shrink a touch further, still one per row ===== */
  @media (max-width:359.98px){
    .price-card,
    .price-card-compact{
      width:92%;
      max-width:250px;
    }
  }

  /* pink-locked plans render the same unified light-pink card style */
  .price-card.pink-locked{
    background:linear-gradient(160deg, #fbb8d3 0%, #f78fb7 100%);
    border:1px solid var(--pink-light);
    box-shadow:0 1px 2px rgba(15,23,42,0.1), 0 16px 32px rgba(194, 24, 91,0.20);
  }
  .price-card.pink-locked::before{ background:var(--pink-dark); }
  .price-card.pink-locked .plan-desc{ color:#7a4a5c; }
  .price-card.pink-locked h3{ color:var(--ink); }
  .price-card.pink-locked .price-icon{
    background:#ffffff;
    color:var(--pink-dark);
  }
  .price-card.pink-locked .tier-list{ border-top-color:rgba(142,16,68,0.25); }
  .price-card.pink-locked .tier-list::before,
  .price-card.pink-locked .tier-list::after{ background:#ffffff; border-color:var(--pink-light); }
  .price-card.pink-locked .tier-list li{ border-bottom-color:rgba(142,16,68,0.14); }
  .price-card.pink-locked .tier-label{ color:#7a4a5c; }
  .price-card.pink-locked .tier-label::before{ background:var(--pink-dark); }
  .price-card.pink-locked .tier-price{ color:var(--ink); }
  .price-card.pink-locked .tier-price em{ color:#a06b7c; }
  .price-card.pink-locked .btn-whatsapp-order{
    background:var(--pink-dark);
    box-shadow:0 8px 18px rgba(142,16,68,0.35);
  }
  .price-card.pink-locked .btn-whatsapp-order:hover{
    background:var(--ink);
  }

  /* =====================================================================
     Row 2 cards — same structure/layout as row 1, just slightly smaller
     ===================================================================== */
  .price-card-compact{
    padding:18px 16px 15px 16px;
  }
  .price-card-compact .price-icon{
    width:38px;
    height:38px;
    font-size:15px;
    margin:4px auto 9px auto;
  }
  .price-card-compact h3{
    font-size:18px;
  }
  .price-card-compact .plan-desc-wrap{
    min-height:28px;
    margin:0 0 12px 0;
  }
  .price-card-compact .plan-desc{
    font-size:11px;
  }
  .price-card-compact .tier-list{
    margin:0 0 14px 0;
    padding-top:11px;
  }
  .price-card-compact .tier-list li{
    padding:5px 2px;
    font-size:11.5px;
  }
  .price-card-compact .tier-price em{
    font-size:9px;
  }
  .price-card-compact .btn-whatsapp-order{
    font-size:12px;
    padding:11px 10px;
  }