/* ══════════════════════════════════════════════════════════════
           MYFASDELI PAGE OVERRIDES & NEW SECTIONS (Premium Upgrade)
         ══════════════════════════════════════════════════════════════ */

    /* Modern card overrides */
    .myfasdeli-card {
      border-radius: 20px !important;
      border: 1px solid rgba(11, 53, 104, 0.08) !important;
      box-shadow: 0 20px 50px rgba(6, 27, 58, 0.05) !important;
      padding: 44px 40px !important;
      transition: box-shadow 300ms ease;
      height: 100% !important;
    }

    .myfasdeli-header h2 {
      font-size: 32px !important;
      letter-spacing: -0.02em;
      color: var(--navy);
    }

    .myfasdeli-header .header-line {
      width: 48px !important;
      height: 4px !important;
      border-radius: 4px !important;
    }

    /* Features list (1 column stack) in left card */
    .myfasdeli-features-list {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .myfasdeli-features-list .m-feature-item {
      padding: 20px 24px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--white);
      box-shadow: 0 4px 20px rgba(6, 27, 58, 0.02);
      transition: all 350ms cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .myfasdeli-features-list .m-feature-item:hover {
      transform: translateX(6px);
      box-shadow: 0 12px 30px rgba(6, 27, 58, 0.06);
      border-color: rgba(245, 130, 32, 0.25);
    }

    .myfasdeli-features-list .m-feature-icon {
      width: 52px;
      height: 52px;
      background: rgba(245, 130, 32, 0.08);
      color: var(--orange);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 300ms ease;
      flex-shrink: 0;
    }

    .myfasdeli-features-list .m-feature-item:hover .m-feature-icon {
      background: var(--orange);
      color: var(--white);
      transform: scale(1.06);
    }

    .myfasdeli-features-list .m-feature-text h4 {
      font-size: 16px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 4px;
      font-family: "Poppins", Arial, sans-serif;
    }

    .myfasdeli-features-list .m-feature-text p {
      font-size: 13.5px;
      color: var(--muted);
      margin: 0;
      line-height: 1.5;
    }

    /* Mockup tilt/hover rotation */
    .phone-mockup-wrapper {
      border: 11px solid #1a2536 !important;
      border-radius: 38px !important;
      box-shadow: 0 30px 60px rgba(6, 27, 58, 0.16) !important;
      transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 450ms ease !important;
    }

    .phone-mockup-wrapper:hover {
      transform: translateY(-8px) rotate(-1deg) scale(1.02);
      box-shadow: 0 40px 80px rgba(6, 27, 58, 0.24) !important;
    }

    /* Download box at bottom of right card */
    .myfasdeli-download-box {
      border-top: 1px dashed var(--line) !important;
      padding-top: 36px !important;
      margin-top: 36px !important;
    }

    .store-btn {
      border-radius: 12px !important;
      padding: 10px 22px !important;
      transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /* Steps grid adjustments in loyalty card */
    .loyalty-step-item h4 {
      font-size: 13px;
      font-weight: 700;
      margin: 8px 0 4px;
      color: var(--navy);
    }

    .loyalty-step-item p {
      font-size: 11px;
      margin: 0;
      color: var(--navy);
      line-height: 1.4;
    }

    /* ─── CARA MENDAPATKAN POIN SECTION ─── */
    .steps-section {
      background: var(--white);
      padding: 96px 0;
      position: relative;
    }

    .steps-container {
      display: grid;
      grid-template-columns: repeat(var(--step-count, 4), 1fr);
      gap: clamp(12px, 2.5vw, 28px);
      margin-top: 60px;
      position: relative;
    }

    .step-item {
      text-align: center;
      position: relative;
      z-index: 2;
    }

    .step-icon-outer {
      width: 104px;
      height: 104px;
      border-radius: 50%;
      background: var(--white);
      box-shadow: 0 12px 36px rgba(6, 27, 58, 0.07);
      border: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 24px;
      position: relative;
      transition: transform 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 350ms ease, border-color 350ms ease;
    }

    .step-item:hover .step-icon-outer {
      transform: translateY(-6px);
      box-shadow: 0 16px 40px rgba(245, 130, 32, 0.18);
      border-color: rgba(245, 130, 32, 0.35);
    }

    .step-icon-inner {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: var(--light-gray);
      color: var(--navy);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 300ms ease, color 300ms ease;
    }

    .step-item:hover .step-icon-inner {
      background: rgba(245, 130, 32, 0.1);
      color: var(--orange);
    }

    .step-icon-inner svg {
      width: 34px;
      height: 34px;
    }

    .step-number {
      position: absolute;
      top: -2px;
      left: -2px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--orange);
      color: var(--white);
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2.5px solid var(--white);
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
      font-family: "Poppins", Arial, sans-serif;
    }

    .step-item h3 {
      font-size: 18px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 10px;
      font-family: "Poppins", Arial, sans-serif;
      letter-spacing: -0.01em;
    }

    .step-item p {
      font-size: 13.5px;
      color: var(--navy);
      line-height: 1.5;
      margin: 0;
      padding: 0 6px;
    }

    /* Connecting Dotted Line */
    .steps-connector-line {
      position: absolute;
      top: 52px;
      left: calc(100% / var(--step-count, 4) / 2);
      right: calc(100% / var(--step-count, 4) / 2);
      height: 2px;
      background-image: linear-gradient(to right, rgba(3, 38, 90, 0.35) 40%, rgba(255, 255, 255, 0) 0%);
      background-position: top;
      background-size: 12px 2px;
      background-repeat: repeat-x;
      z-index: 1;
      transition: all 0.4s ease;
    }

    /* Optimization when 5 or 6 steps are displayed in 1 row */
    @media (min-width: 993px) {
      .steps-container[style*="--step-count: 5"] .step-icon-outer,
      .steps-container[style*="--step-count: 6"] .step-icon-outer,
      .steps-container[style*="--step-count: 7"] .step-icon-outer {
        width: 92px;
        height: 92px;
        margin-bottom: 18px;
      }
      .steps-container[style*="--step-count: 5"] .step-icon-inner,
      .steps-container[style*="--step-count: 6"] .step-icon-inner,
      .steps-container[style*="--step-count: 7"] .step-icon-inner {
        width: 70px;
        height: 70px;
      }
      .steps-container[style*="--step-count: 5"] .step-icon-inner svg,
      .steps-container[style*="--step-count: 6"] .step-icon-inner svg,
      .steps-container[style*="--step-count: 7"] .step-icon-inner svg {
        width: 28px;
        height: 28px;
      }
      .steps-container[style*="--step-count: 5"] .steps-connector-line,
      .steps-container[style*="--step-count: 6"] .steps-connector-line,
      .steps-container[style*="--step-count: 7"] .steps-connector-line {
        top: 46px;
      }
      .steps-container[style*="--step-count: 5"] .step-item h3,
      .steps-container[style*="--step-count: 6"] .step-item h3 {
        font-size: 16.5px;
      }
      .steps-container[style*="--step-count: 5"] .step-item p,
      .steps-container[style*="--step-count: 6"] .step-item p {
        font-size: 13px;
        padding: 0 2px;
      }
    }

    /* Hover Animation untuk Garis */
    .steps-container:hover .steps-connector-line {
      background-image: linear-gradient(to right, var(--orange) 40%, rgba(255, 255, 255, 0) 0%);
      animation: dash-flow 0.8s linear infinite;
    }

    @keyframes dash-flow {
      from {
        background-position: 0 top;
      }

      to {
        background-position: 12px top;
      }
    }

    /* ─── SYARAT & KETENTUAN (BENEFITS) SECTION ─── */
    .benefits-section {
      background: var(--light-gray);
      padding: 96px 0;
    }

    .benefits-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
      margin-top: 52px;
    }

    .benefit-card {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 36px 28px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 22px;
      box-shadow: var(--shadow-soft);
      transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 350ms ease, border-color 350ms ease;
      height: 100%;
    }

    .benefit-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow);
      border-color: rgba(245, 130, 32, 0.35);
    }

    .benefit-icon-circle {
      width: 58px;
      height: 58px;
      border-radius: 14px;
      /* SaaS square icon style */
      background: rgba(245, 130, 32, 0.08);
      /* light orange */
      color: var(--orange);
      /* orange icon */
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 300ms ease, color 300ms ease, transform 300ms ease;
      flex-shrink: 0;
    }

    .benefit-card:hover .benefit-icon-circle {
      background: var(--orange);
      color: var(--white);
      transform: scale(1.05);
    }

    .benefit-icon-circle svg {
      width: 28px;
      height: 28px;
    }

    .benefit-info h3 {
      font-size: 19px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 8px;
      font-family: "Poppins", Arial, sans-serif;
      letter-spacing: -0.01em;
    }

    .benefit-info p {
      font-size: 14px;
      color: var(--navy);
      line-height: 1.65;
      margin: 0;
    }

    /* Responsive Overrides */
    @media (max-width: 1200px) {
      .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }
    }

    @media (max-width: 992px) {
      .steps-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
      }

      .steps-connector-line {
        display: none;
      }
    }

    @media (max-width: 576px) {
      .steps-container {
        grid-template-columns: 1fr;
        gap: 36px;
      }

      .benefits-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .benefit-card {
        padding: 28px 24px;
      }
    }

    /* ─── LOYALTY PROGRAM TIER CARDS ─── */
    .tiers-section {
      background: var(--white);
      padding: 96px 0;
    }

    .loyalty-tiers-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 20px;
      margin-top: 52px;
    }

    .tier-card {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: var(--shadow-soft);
      transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 350ms ease, border-color 350ms ease;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .tier-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 40px rgba(6, 27, 58, 0.08);
      border-color: rgba(245, 130, 32, 0.25);
    }

    /* Card Header backgrounds based on tier */
    .tier-card-header {
      padding: 32px 20px 24px;
      text-align: center;
      border-bottom: 1px solid var(--line);
      background: #f0f4fa; /* Default background from Tier Mitra for custom tiers */
    }

    .tier-bronze .tier-card-header {
      background: #fdfaf6;
    }

    .tier-silver .tier-card-header {
      background: #f6f8fa;
    }

    .tier-gold .tier-card-header {
      background: #fdfbf7;
    }

    .tier-platinum .tier-card-header {
      background: #f5f7f8;
    }

    .tier-mitra .tier-card-header {
      background: #f0f4fa;
    }

    /* Pure CSS Membership Card Mockups */
    .membership-card-graphic {
      width: 140px;
      height: 84px;
      border-radius: 8px;
      margin: 0 auto 20px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 10px 12px;
      color: var(--white);
      font-family: "Poppins", Arial, sans-serif;
      background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    }

    .membership-card-graphic::after {
      content: "";
      position: absolute;
      top: 0;
      left: -150%;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) 100%);
      transform: skewX(-25deg);
      transition: left 750ms ease;
    }

    .tier-card:hover .membership-card-graphic::after {
      left: 150%;
    }

    /* Card tier background images from design assets */
    .tier-bronze .membership-card-graphic {
      background: url("../../assets/membership/card-bronze.webp") center/cover no-repeat;
    }

    .tier-silver .membership-card-graphic {
      background: url("../../assets/membership/card-silver.webp") center/cover no-repeat;
    }

    .tier-gold .membership-card-graphic {
      background: url("../../assets/membership/card-gold.webp") center/cover no-repeat;
    }

    .tier-platinum .membership-card-graphic {
      background: url("../../assets/membership/card-platinum.webp") center/cover no-repeat;
    }

    .tier-mitra .membership-card-graphic {
      background: url("../../assets/membership/card-mitra.webp") center/cover no-repeat;
      border: 1px solid rgba(243, 198, 63, 0.4);
    }

    .card-logo {
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-align: left;
      opacity: 0.95;
    }

    .card-chip {
      width: 16px;
      height: 12px;
      background: #f3c63f;
      border-radius: 2px;
      opacity: 0.85;
    }

    .card-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: auto;
    }

    .card-holder {
      font-size: 7px;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      opacity: 0.8;
    }

    .card-tier-name {
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    /* Tier Text Details */
    .tier-name {
      font-size: 18px;
      font-weight: 700;
      color: var(--navy);
      margin-bottom: 4px;
      font-family: "Poppins", Arial, sans-serif;
    }

    .tier-req {
      font-size: 11px;
      font-weight: 600;
      color: var(--navy);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .tier-req-highlight {
      color: var(--orange) !important;
    }

    /* Tier Benefits List */
    .tier-benefits-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    .tier-benefits-list li {
      padding: 16px 20px;
      font-size: 13px;
      color: var(--text);
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      line-height: 1.5;
      text-align: left;
    }

    .tier-benefits-list li:last-child {
      border-bottom: none;
    }

    .tier-benefits-list li::before {
      content: "•";
      color: var(--orange);
      font-weight: bold;
      display: inline-block;
      width: 1em;
      margin-left: -1em;
    }

    .tier-card-footer {
      padding: 16px 20px 24px;
      background: #fafbfc;
      border-top: 1px solid rgba(0, 0, 0, 0.03);
      text-align: center;
    }

    .tier-footnote {
      font-size: 10.5px;
      color: var(--navy);
      line-height: 1.4;
      margin: 0;
    }

    /* Responsive styling for tiers */
    @media (max-width: 1400px) {
      .loyalty-tiers-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 992px) {
      .loyalty-tiers-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 576px) {
      .loyalty-tiers-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Download Buttons 100% width on mobile screens */
    @media (max-width: 768px) {
      .download-buttons {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
      }

      .download-buttons .store-btn {
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
      }
    }