/* ===== Light modal base ===== */
    .banner-modal .modal-content {
      background: #ffffff;
      border: 0;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 20px 50px rgba(68, 35, 59, 0.18);
    }

    .banner-modal .modal-header {
      background: #fff8f3;
      border-bottom: 1px solid rgba(254, 131, 63, 0.25);
      padding: 0.85rem 1.25rem;
    }

    .banner-modal .modal-title {
      font-family: var(--brand-font-family-heading);
      font-weight: 700;
      color: var(--brand-color-theme-2);
      font-size: 1.25rem;
      margin: 0;
    }

    .banner-modal .modal-body {
      padding: 0;
      background: #ffffff;
    }

    .banner-modal .modal-body img {
      display: block;
      width: 100%;
      height: auto;
    }

    .banner-modal .modal-footer {
      background: #fff8f3;
      border-top: 1px solid rgba(254, 131, 63, 0.25);
      padding: 0.75rem 1.25rem;
      gap: 0.5rem;
    }

    /* Vertical modal width */
    #verticalModal .modal-dialog {
      max-width: 460px;
    }

    #verticalModal .modal-body img {
      max-height: 75vh;
      object-fit: contain;
      margin: 0 auto;
    }

    /* ===== Buttons ===== */
    .btn-brand {
      font-family: var(--brand-font-family-poppins);
      font-weight: 500;
      background: var(--brand-color-theme-1);
      border: 1px solid var(--brand-color-theme-1);
      color: #fff;
      border-radius: 50px;
      padding: 0.5rem 1.25rem;
      transition: all 0.25s ease;
    }

    .btn-brand:hover,
    .btn-brand:focus {
      background: var(--brand-color-theme-2);
      border-color: var(--brand-color-theme-2);
      color: #fff;
    }

    .btn-brand-outline {
      font-family: var(--brand-font-family-poppins);
      font-weight: 500;
      background: transparent;
      border: 1px solid var(--brand-color-theme-2);
      color: var(--brand-color-theme-2);
      border-radius: 50px;
      padding: 0.5rem 1.25rem;
      transition: all 0.25s ease;
    }

    .btn-brand-outline:hover,
    .btn-brand-outline:focus {
      background: var(--brand-color-theme-2);
      color: #fff;
    }

    /* Font Awesome cross button */
    .btn-close-fa {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      margin-left: auto;
      border: 0;
      border-radius: 50%;
      background: rgba(68, 35, 59, 0.08);
      color: var(--brand-color-theme-2);
      font-size: 1rem;
      transition: all 0.25s ease;
    }

    .btn-close-fa:hover {
      background: var(--brand-color-theme-1);
      color: #fff;
    }

    .btn-close-fa:focus {
      outline: none;
      box-shadow: 0 0 0 0.2rem rgba(254, 131, 63, 0.35);
    }

    /* ===== "Continue" hint (Modal 1) ===== */
    .continue-hint {
      font-family: var(--brand-font-family-poppins);
      font-size: 0.9rem;
      color: var(--brand-color-theme-2);
      transition: color 0.25s ease;
    }

    .continue-hint.is-alert {
      color: var(--brand-color-theme-4);
      font-weight: 600;
      animation: hintShake 0.5s ease;
    }

    .btn-continue {
      min-width: 180px;
      animation: btnPulse 2s ease-in-out infinite;
    }

    .btn-continue.is-alert {
      animation: btnPulseStrong 0.6s ease 2;
    }

    @keyframes btnPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(254, 131, 63, 0.45); }
      50%      { box-shadow: 0 0 0 10px rgba(254, 131, 63, 0); }
    }

    @keyframes btnPulseStrong {
      0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(254, 131, 63, 0.7); }
      50%  { transform: scale(1.08); box-shadow: 0 0 0 14px rgba(254, 131, 63, 0); }
      100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(254, 131, 63, 0); }
    }

    @keyframes hintShake {
      0%, 100% { transform: translateX(0); }
      20%, 60% { transform: translateX(-6px); }
      40%, 80% { transform: translateX(6px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .btn-continue,
      .btn-continue.is-alert,
      .continue-hint.is-alert { animation: none; }
    }

    /* Light backdrop */
    .modal-backdrop.show {
      opacity: 0.55;
    }