:root {
      --bs-primary-rgb: 88, 101, 242; /* Discord-like purple/blue */
      --bs-primary: rgb(var(--bs-primary-rgb));
      --bs-body-bg: #f8f9fc; /* Lighter gray */
      --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      --card-bg: #ffffff;
      --card-border-radius: 0.75rem; /* Slightly larger radius */
      --card-shadow: 0 8px 25px rgba(0, 0, 0, 0.07);
      --input-border-color: #dee2e6;
      --input-focus-border-color: rgba(var(--bs-primary-rgb), 0.5);
      --input-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.2);
      --text-muted: #6c757d;
      --text-dark: #212529;
    }

    body {
      background-color: var(--bs-body-bg);
      font-family: var(--bs-body-font-family);
      color: var(--text-dark);
      font-weight: 400;
    }

    .container {
      max-width: 960px;
    }

    /* Card Styles */
    .order-summary-card,
    .payment-form-card {
      background-color: var(--card-bg);
      border-radius: var(--card-border-radius);
      box-shadow: var(--card-shadow);
      border: none;
    }

    .order-summary-card {
      background-color: #f0f2ff; /* Slightly different background for summary */
    }

    /* Logo */
    .site-logo {
      max-height: 45px;
      filter: drop-shadow(0 2px 3px rgba(0,0,0,0.1));
    }

    /* Order Summary Specific */
    .summary-title, .form-title {
      font-weight: 600;
      color: var(--text-dark);
    }

    .summary-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.95rem;
    }

    .summary-item .item-label {
      color: var(--text-muted);
      font-weight: 500;
    }

    .summary-item .item-value {
      font-weight: 500;
      color: var(--text-dark);
    }

    .total-amount .item-label {
      font-weight: 600;
      font-size: 1rem;
      color: var(--text-dark);
    }

    .total-amount .amount {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--bs-primary);
    }

    /* Form Styles */
    .form-label {
      font-weight: 500;
      margin-bottom: 0.5rem;
      font-size: 0.9rem;
      color: #495057;
    }

    .form-control, .input-group-text {
      border-radius: 0.5rem; /* Consistent radius */
      border: 1px solid var(--input-border-color);
      padding: 0.8rem 1rem;
      font-size: 0.95rem;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .form-control:focus {
      border-color: var(--input-focus-border-color);
      box-shadow: var(--input-focus-box-shadow);
      background-color: #fff; /* Ensure background stays white on focus */
    }

    .input-group-text {
      background-color: #f8f9fa;
      border-right: 0; /* Clean look for prepended icons */
    }
    .input-group > .form-control:not(:first-child) {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
       border-left: 0;
    }
    .input-group > .input-group-text:not(:last-child) {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
       border-right: 0;
    }
    /* Specific for appended icon (CVV) */
     .input-group > .form-control:not(:last-child) {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
    }
     .input-group > .input-group-text:not(:first-child) {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
       border-left: 0; /* Remove left border for appended */
       border-right: 1px solid var(--input-border-color); /* Add right border */
    }
    .cvv-icon {
       border-right: 1px solid var(--input-border-color) !important;
       border-left: 0 !important;
    }


    /* Validation Styles */
    .needs-validation .form-control:invalid {
        border-color: #dc3545;
        background-image: none;
    }
    .needs-validation .form-control:valid {
        border-color: #198754;
        background-image: none;
    }
    .was-validated :invalid ~ .invalid-feedback,
    .was-validated :invalid ~ .valid-feedback {
        display: block;
    }
    .invalid-feedback {
      display: none;
      width: 100%;
      margin-top: 0.3rem;
      font-size: .875em;
      color: #dc3545;
      font-weight: 500;
    }

    /* Card Type Icons */
    .card-type-icon i { transition: color 0.2s ease; }
    .card-type-icon .fa-cc-visa { color: #1A1F71; }
    .card-type-icon .fa-cc-mastercard { color: #EB001B; }
    .card-type-icon .fa-cc-amex { color: #2E77BC; }
    .card-type-icon .fa-cc-discover { color: #FF6600; }
    .card-type-icon .fa-credit-card { color: var(--text-muted); } /* Default */

    /* Button Styles */
    .btn-submit {
      padding: 0.9rem 1.5rem;
      font-size: 1rem;
      font-weight: 600;
      border-radius: 0.5rem;
      background-image: linear-gradient(to right, rgba(var(--bs-primary-rgb), 0.95) 0%, rgba(var(--bs-primary-rgb), 1) 100%);
      border: none;
      transition: transform 0.1s ease-out, box-shadow 0.15s ease;
      box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.3);
    }

    .btn-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(var(--bs-primary-rgb), 0.4);
       background-image: linear-gradient(to right, rgba(var(--bs-primary-rgb), 1) 0%, rgba(var(--bs-primary-rgb), 1) 100%);
    }
     .btn-submit:active {
        transform: translateY(0);
        box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.3);
     }
     .btn-submit:disabled {
        background-image: none;
        background-color: #aab0f1; /* Lighter disabled state */
        box-shadow: none;
        transform: none;
     }

    /* Divider */
    .hr-divider {
      border-top: 1px solid #e9ecef;
    }

    /* Security Info */
    .security-info, .security-info-mobile {
      color: var(--text-muted);
    }
    .security-info-mobile { display: none; }

    /* Responsive */
    @media (max-width: 991.98px) {
       .order-summary-card { margin-bottom: 2rem; }
    }
    @media (max-width: 767.98px) {
      .security-info { display: none; }
      .security-info-mobile { display: block; }
      .payment-form-card { padding: 1.5rem; }
      .total-amount .amount { font-size: 1.3rem; }
      .btn-submit { padding: 0.8rem 1.2rem; font-size: 0.95rem; }
    }