:root {
    --bg: #f9f6f7;
    --menutxtcl: 111,115,145;
    --menutxtweight: 600;
    --intlinear: 90,99,129;
    --txtall: 79,82,107;
    --cl1: 127,139,216;
    --pckdf: var(--cl1);
    --whydf: var(--cl1);
    --lbds: 255, 255, 255;
    --lsdb: 56, 58, 70;
    --text: 85, 85, 85;
    --fixedtel: #d581b4;
}
body.dark {
    --bg: #26272d;
    --menutxtcl: 226, 226, 228;
    --intlinear: 45, 45, 58;
    --txtall: 226, 226, 228;
    --cl1: 192,128,223;
    --lbds: 56, 58, 70;
    --lsdb: 255, 255, 255;
    --pckdf: var(--cl1);
    --text: 226, 226, 228;
}

 /* Modern Gateway Dropdown CSS */
  .gateway-cards-container {
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
      list-style: none !important;
      position: relative;
  }

  .gateway-cards-wrapper {
      position: relative;
      width: 100%;
  }

  /* Selected Gateway Display */
  .gateway-selected-display {
      background: #ffffff;
      border: 2px solid #e0e0e0;
      border-radius: 12px;
      padding: 20px 25px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }

  .gateway-selected-display:hover {
      border-color: #4CAF50;
      box-shadow: 0 4px 16px rgba(76,175,80,0.15);
  }

  .gateway-selected-display.active {
      border-color: #4CAF50;
      box-shadow: 0 6px 20px rgba(76,175,80,0.2);
  }

  .gateway-selected-info {
      display: flex;
      align-items: center;
      gap: 20px;
      flex: 1;
  }

  .gateway-selected-icon {
      font-size: 40px;
      color: #4CAF50;
      min-width: 50px;
      text-align: center;
  }

  .gateway-selected-name {
      font-size: 18px;
      font-weight: 600;
      color: #333;
  }

  .gateway-dropdown-arrow {
      font-size: 20px;
      color: #666;
      transition: transform 0.3s ease;
  }

  .gateway-selected-display.active .gateway-dropdown-arrow {
      transform: rotate(180deg);
  }

  /* Dropdown Options */
  .gateway-options-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.12);
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transform: translateY(-10px);
      transition: all 0.3s ease;
      z-index: 1000;
  }

  .gateway-options-dropdown.active {
      max-height: 400px;
      opacity: 1;
      transform: translateY(0);
  }

  .gateway-option {
      padding: 18px 25px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 20px;
      border-bottom: 1px solid #f0f0f0;
  }

  .gateway-option:last-child {
      border-bottom: none;
  }

  .gateway-option:hover {
      background: linear-gradient(90deg, #f0fff4 0%, #ffffff 100%);
      padding-left: 30px;
  }

  .gateway-option.selected {
      background: #f0fff4;
      pointer-events: none;
  }

  .gateway-option-icon {
      font-size: 36px;
      color: #666;
      min-width: 45px;
      text-align: center;
      transition: all 0.3s ease;
  }

  .gateway-option:hover .gateway-option-icon {
      color: #4CAF50;
      transform: scale(1.1);
  }

  .gateway-option.selected .gateway-option-icon {
      color: #4CAF50;
  }

  .gateway-option-name {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      flex: 1;
  }

  .gateway-option.selected .gateway-option-name {
      font-weight: 600;
      color: #2e7d32;
  }

  .gateway-option-check {
      font-size: 22px;
      color: #4CAF50;
      opacity: 0;
      transition: all 0.3s ease;
  }

  .gateway-option.selected .gateway-option-check {
      opacity: 1;
  }

  /* Dark mode */
  body.dark .gateway-selected-display {
      background: rgba(var(--lbds));
      border-color: rgba(255,255,255,0.1);
  }

  body.dark .gateway-options-dropdown {
      background: rgba(var(--lbds));
  }

  body.dark .gateway-option {
      border-bottom-color: rgba(255,255,255,0.05);
  }

  body.dark .gateway-option:hover {
      background: rgba(76,175,80,0.1);
  }

  body.dark .gateway-selected-name,
  body.dark .gateway-option-name {
      color: rgba(var(--txtall));
  }

  body.dark .gateway-option-icon,
  body.dark .gateway-dropdown-arrow {
      color: rgba(var(--txtall));
  }

  /* Mobile */
  @media (max-width: 768px) {
      .gateway-selected-display {
          padding: 15px 20px;
      }

      .gateway-selected-icon {
          font-size: 32px;
      }

      .gateway-selected-name {
          font-size: 16px;
      }

      .gateway-option {
          padding: 15px 20px;
      }

      .gateway-option-icon {
          font-size: 28px;
      }

      .gateway-option-name {
          font-size: 15px;
      }
  }

.stripepay-button {
  color: #000 !important;
  background: lightgrey !important;