/* ===== Reset & Base ===== */ 
* { 
    margin: 0; 
    padding: 0;
     box-sizing: border-box; 
     font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 
    } 
body { 
    min-height: 100vh; 
    background: linear-gradient(135deg, #1d2671, #c33764); 
    display: flex;
     align-items: center;
     justify-content: center;
 }
 /* ===== Main Container ===== */
  .container {
     background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(15px); 
      padding: 30px 35px;
       width: 380px; border-radius: 16px; 
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
        color: #fff;
     }
   /* ===== Heading ===== */
    .container h2 {
         text-align: center;
          margin-bottom: 25px; 
          font-size: 26px; 
          letter-spacing: 1px;
         }
     /* ===== Paragraph ===== */
      form p { 
        margin-bottom: 8px;
         font-size: 14px;
          opacity: 0.9; 
        } 
     /* ===== Input ===== */ 
     form input {
         width: 100%;
          padding: 12px 14px;
          border-radius: 8px; 
          border: none;
           outline: none; 
           font-size: 16px;
            margin-bottom: 20px;
         }
      /* ===== Dropdown Section ===== */ 
      .dropdown { 
        display: flex; 
        align-items: center; 
        justify-content: space-between; 
        gap: 15px;
         margin-bottom: 25px; 
    }
       /* ===== From & To Boxes ===== */ 
       .from, .to { 
        width: 45%; 
    }
        /* ===== Labels ===== */
         label {
             display: block;
             font-size: 14px;
              margin-bottom: 6px;
             } 
        /* ===== Select Wrapper ===== */ 
        .select { 
            display: flex; 
            align-items: center;
             gap: 8px;
              background: #fff; 
              border-radius: 8px; 
              padding: 8px 10px; 
            } 
        .select select { 
            border: none; 
            outline: none;
             background: transparent; 
             font-size: 14px; cursor: pointer;
              width: 100%;
             }
         .select { 
            display: flex; 
            align-items: center; 
            gap: 10px; background: #fff;
             border-radius: 8px;
              padding: 8px 10px; 
            } 
         /* ===== Flag Image ===== */ 
         .select img { 
            width: 26px; 
            height: 18px; 
            object-fit: cover; 
            border-radius: 3px;
         } 
         /* ===== Select Box ===== */ 
         select { 
            border: none; 
            outline: none;
             background: transparent; width: 100%;
              font-size: 14px;
             cursor: pointer;
             }
          /* ===== Swap Icon ===== */ 
          .sign {
             font-size: 22px;
             color: #fff;
              cursor: pointer; 
              transition: transform 0.3s ease;
             }
           .sign:hover { 
            transform: rotate(180deg); 
        } 
           /* ===== Button ===== */
            button {
                 width: 100%;
                  padding: 14px;
                   border-radius: 10px;
                    border: none; 
                    background: linear-gradient(135deg, #ff8a00, #e52e71); 
                    color: #fff; font-size: 16px;
                     font-weight: bold;
                     cursor: pointer; 
                     transition: transform 0.3s ease, box-shadow 0.3s ease; 
                    } 
            button:hover {
                 transform: translateY(-2px); 
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); 
            }
             /* ===== Button Active ===== */
              button:active {
                 transform: translateY(0);
                  box-shadow: none;
                 }