/* Extracted from profile.html */
:root {
      --blue-dark: #021C3F;
      --blue-light: #004C93;
      --green-accent: #20D68F;
      --yellow-accent: #FFD84D;
      --white: #ffffff;
    }

    /* Override only the profile panel area */
    .profile-auth-wrapper {
      position: relative;
      padding: 60px 0;
    }

    /* Glass profile panel – identical to login panel */
    .profile-panel {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 20px;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
      padding: 40px 35px;
      color: #fff;
    }

    /* Make form labels white (match login) */
    .profile-panel .form-group label {
      color: #fff;
      font-weight: 500;
    }

    /* Make inputs match login form */
    .profile-panel .form-control,
    .profile-panel textarea.form-control {
      background: rgba(255, 255, 255, 0.95) !important;
      border-radius: 10px;
      border: 1px solid #e8e8e8;
      color: #0a1a3f !important;
      font-weight: 500;
    }

    /* BACK button – exactly like login */
    .btn-back {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 130px;
      padding: 8px 12px;
      background: rgba(255, 255, 255, 0.10);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;
      color: #fee023;
      cursor: pointer;
      transition: all 0.12s ease-out !important;
      margin-bottom: 14px;
    }

    .btn-back:hover {
      border-color: #fee023;
      box-shadow: 0 0 10px rgba(254, 224, 35, 0.45);
      transform: translateY(-2px);
    }

    /* Save Changes button identical to Login button */
    .btn-save {
      margin-top: 10px;
    }

    .btn-save i {
      margin-left: 6px;
    }

    @media (max-width: 768px) {
      .profile-panel {
        padding: 30px 25px;
      }
    }

    /* Make the profile panel narrower without removing anything */
    .profile-panel {
      max-width: 640px;
      /* adjust this number if you want it narrower or wider */
      margin: 0 auto;
      /* center it */
    }

    /* Profile photo box (right side of Back button) */
    .profile-photo-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    /* Circular avatar */
    .profile-photo {
      width: 86px;
      /* adjust size if you want bigger/smaller */
      height: 86px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid rgba(255, 255, 255, 0.65);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
      background: rgba(255, 255, 255, 0.06);
    }

    /* Upload label (clickable) */
    .upload-label {
      display: inline-block;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      color: var(--yellow-accent);
      text-decoration: underline;
    }

    .upload-label:hover {
      color: var(--green-accent);
    }

    /* Ensure small screens layout nicely */
    @media (max-width: 576px) {
      .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }

      .profile-photo {
        width: 72px;
        height: 72px;
      }
    }

    /* Remove unnecessary spacing above the back button + profile photo row */
    .profile-header-row {
      margin-top: 0 !important;
      padding-top: 0 !important;
    }

    /* Back button: remove hidden top margin */
    .btn-back {
      margin-top: 0 !important;
      padding-top: 6px;
      /* keeps it visually balanced */
    }

    /* Profile photo box alignment fix */
    .profile-photo-box {
      margin-top: 0 !important;
      padding-top: 0 !important;
    }

    /* Align image tighter */
    .profile-photo {
      margin-top: 0 !important;
    }

    /* === MODERN SLIDE-IN ALERT === */
    #toastAlert {
      position: fixed;
      top: 22px;
      right: -350px;
      min-width: 250px;
      max-width: 340px;
      padding: 14px 18px;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 600;
      color: #fff;
      z-index: 999999;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: right 0.45s ease, opacity 0.3s ease;
      opacity: 0;
    }

    #toastAlert.show {
      right: 22px;
      opacity: 1;
    }

    #toastAlert.success {
      background: linear-gradient(135deg, #1fbf62, #17a24f);
    }

    #toastAlert.error {
      background: linear-gradient(135deg, #e74c3c, #c0392b);
    }

    #toastAlert i {
      font-size: 18px;
    }

    /* === Soap Bubbles (Limited Color Palette Version) === */
    .bubble-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 2;
      overflow: hidden;
    }

    .bubble {
      position: absolute;
      bottom: -60px;
      border-radius: 50%;

      /* Palette-based soapy look */
      background: radial-gradient(circle at 30% 30%,
          rgba(255, 255, 255, 0.98) 0%,
          /* bright soapy highlight */
          rgba(255, 255, 255, 0.65) 35%,
          /* soft white */
          rgba(254, 224, 35, 0.20) 65%,
          /* yellow tint */
          rgba(76, 175, 80, 0.10) 90%
          /* faint green rim */
        );

      border: 1px solid rgba(255, 255, 255, 0.85);

      /* subtle colored shadow (blue is allowed) */
      box-shadow: 0 4px 16px rgba(1, 36, 74, 0.25);

      opacity: 0.9;
      transform: translateY(0) scale(0.8);
      animation: bubbleRise linear forwards;
    }

    /* Bubble float animation */
    @keyframes bubbleRise {
      0% {
        transform: translateY(0) scale(0.75);
        opacity: 0;
      }

      20% {
        opacity: 0.9;
      }

      60% {
        transform: translateY(-100vh) scale(1.0);
        opacity: 0.85;
      }

      100% {
        transform: translateY(-160vh) scale(1.05);
        opacity: 0;
      }
    }


    /* Water trail drop (mouse) */
    .water-drop {
      position: absolute;
      pointer-events: none;
      border-radius: 50%;

      /* Palette-only water look:
       white highlight + yellow/green tint, blue shadow */
      background: radial-gradient(circle at 30% 30%,
          rgba(255, 255, 255, 0.95) 0%,
          /* highlight */
          rgba(255, 255, 255, 0.65) 35%,
          rgba(254, 224, 35, 0.30) 65%,
          /* #fee023 yellow tint */
          rgba(76, 175, 80, 0.15) 100%
          /* #4CAF50 outer tint */
        );

      box-shadow:
        0 0 10px rgba(1, 36, 74, 0.45),
        /* #01244a glow */
        0 0 4px rgba(255, 255, 255, 0.85);

      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
      z-index: 9999;
      animation: waterFade 0.9s ease-out forwards;
    }

    @keyframes waterFade {
      0% {
        transform: translate(calc(-50% + 0px), calc(-50% + 0px)) scale(1);
        opacity: 1;
      }

      60% {
        transform: translate(calc(-50% + var(--drift-x)),
            calc(-50% + var(--drift-y))) scale(0.85);
        opacity: 0.7;
      }

      100% {
        transform: translate(calc(-50% + var(--drift-x)),
            calc(-50% + var(--drift-y))) scale(0.4);
        opacity: 0;
      }
    }