/* === FORM === */
.zip-form {
    max-width: 600px;
    margin: 0; /* 🔥 Left aligned */
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; /* mobile friendly */
}

/* INPUT WRAP */
.zip-input-wrap {
    position: relative;
    width: 300px;
}

/* INPUT */
.zip-input-wrap input {
    width: 100%;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 0px;
    outline: none;
    font-size: 16px;
    transition: 0.2s;
}

.zip-input-wrap input:focus {
    border-color: #bf1238;
}

/* LABEL */
.zip-input-wrap label {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    background: #fff;
    padding: 0 5px;
    color: #888;
    transition: 0.2s;
    pointer-events: none;
}

.zip-input-wrap input:focus + label,
.zip-input-wrap input:not(:placeholder-shown) + label {
    top: -8px;
    font-size: 12px;
    color: #bf1238;
}

/* === BUTTON === */
#zip-btn {
	font-size: 18px;
	text-transform: uppercase;
    padding: 13px 20px;
    background: #bf1238;
    color: #fff;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    font-weight: 700;
    position: relative;
    transition: 0.2s;
    white-space: nowrap; /* 🔥 prevents breaking */
}

#zip-btn:hover { 
    transform: translateY(-1px); 
    background: #ffffff;
	color: #bf1238;
}

#zip-btn:disabled { 
    opacity: 0.7; 
    cursor: not-allowed; 
}

/* LOADER */
.btn-loader {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    animation: spin 0.6s linear infinite;
}

@keyframes spin { 
    to { transform: rotate(360deg) translateY(-50%); } 
}

/* MESSAGE (full width below) */
.zip-message {
    width: 100%;
    margin-top: 8px;
    font-size: 16px;
    color: #bf1238;
    min-height: 18px;
}
    /* === POPUP === */
    .zip-popup {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.6);
        justify-content: center;
        align-items: center;
        z-index: 9999;
        animation: fadeIn 0.25s ease;
    }

    .zip-popup-box {
        background: #fff;
        padding: 28px;
        border-radius: 0px;
        text-align: center;
        max-width: 380px;
        width: 90%;
        position: relative;
        animation: scaleIn 0.25s ease;
    }

    .zip-icon { font-size: 36px; margin-bottom: 10px; }

    .zip-btn-primary {
        display: inline-block;
        margin-top: 15px;
        padding: 10px 20px;
        background: #bf1238;
        color: #fff;
        text-decoration: none;
        border-radius: 6px;
        transition: 0.2s;
    }

    .zip-btn-primary:hover { opacity: 0.9; background: #000000; }

    .zip-close {
        position: absolute;
        top: 10px;
        right: 15px;
        cursor: pointer;
        font-size: 18px;
    }

    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes scaleIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
		
	@media only screen and ( max-width: 768px ) {
		/* INPUT WRAP */
			.zip-input-wrap {
    		width: 250px;
		}
		}