@keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-7px); }
        }


.mail-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            background: #2196f3;
            color: white;
            font-weight: 600;
            font-size: 15px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin-top: 18px;
        }

        .mail-btn:hover { background-color: #1976d2; }
        button.mail-btn svg { width: 22px; height: 22px; animation: bounce 2s infinite; }

        #overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background-color: rgba(0, 0, 0, 0.4);
            display: none;
            z-index: 1000;
        }

        #mailPopup {
            display: none;
            position: fixed;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%) scale(0.7);
            width: 360px;
            background: white;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
            border-radius: 14px;
            z-index: 1001;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        #mailPopup.show {
            display: block;
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }

        #mailPopup form {
            padding: 18px 24px;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        #mailPopup h3 { margin: 0 0 6px; font-weight: 700; color: #333; }
        #mailPopup .gift-title {
            font-weight: 700;
            font-size: 14px;
            color: #FFC107;
            margin-bottom: 8px;
        }

        #mailPopup, #mailPopup * { box-sizing: border-box; }

        input#senderName, textarea#mailContent {
            width: 100%;
            border: 1.5px solid #ccc;
            border-radius: 10px;
            padding: 10px 14px;
            font-size: 15px;
            font-family: inherit;
        }

        input#senderName:focus, textarea#mailContent:focus {
            border-color: #4c89ff;
            outline: none;
        }

        .gift-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 14px;
        }

.giftLabel {
  margin-top: 5px;
  font-size: 13px;
  color: #444;
  text-align: center;
  pointer-events: none;
}

        .giftBtn {
  background: none;
  border: none;
  cursor: pointer;
  width: 60px;
  padding: 0;
  border-radius: 8px;
  transition: background-color 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.giftIconWrapper {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

        .giftBtn:hover { background-color: #f0f0f0; }

        .giftBtn img {
            display: block;
            margin: 0 auto 4px;
        }

        .giftBtn span.label {
            font-size: 12px;
            display: block;
            color: #444;
        }

        .checkmark {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #4caf50;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 13px;
  font-weight: bold;
  pointer-events: none;
  user-select: none;
}

#senderName:not(:placeholder-shown) {
  font-weight: bold;
}

        .giftBtn.selected .checkmark {
  display: flex;
  animation: popIn 0.2s ease;
}

@keyframes popIn {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}


        button[type="submit"] {
            background: #4c89ff;
            color: white;
            border: none;
            border-radius: 10px;
            padding: 12px;
            font-weight: 700;
            font-size: 16px;
            cursor: pointer;
        }

        button[type="submit"]:hover { background-color: #3b6edb; }

        #closePopupBtn {
            position: absolute;
            top: 12px;
            right: 12px;
            background: transparent;
            border: none;
            font-size: 22px;
            font-weight: 700;
            color: #999;
            cursor: pointer;
        }

        #closePopupBtn:hover { color: #555; }