/* ==========================================================================
   TOQUEMONOS.COM - SMILEMAKERS REPLICA SPIN WHEEL MODAL (EXACT VISUAL REPLICA)
   ========================================================================== */

/* STICKY FLOATING TRIGGER HIDDEN BY DEFAULT IN EXACT SMILEMAKERS MODE */
.smile-wheel-sticky-trigger {
    display: none !important;
}

/* --- MODAL OVERLAY --- */
.smile-wheel-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 25000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.smile-wheel-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* --- MODAL CARD WITH EXACT SMILEMAKERS WATERMARKS --- */
.smile-wheel-card {
    background: #fceee9;
    border-radius: 32px;
    padding: 32px 28px 24px 28px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    position: relative;
    transform: scale(0.92);
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #111111;
    overflow: hidden;
}

/* Translucent Product Silhouettes Watermark in Corners */
.smile-wheel-card::before {
    content: '';
    position: absolute;
    top: -25px; right: -25px;
    width: 140px; height: 140px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23C7757C'%3E%3Cpath d='M50 10C35 10 25 25 25 45C25 65 35 90 50 90C65 90 75 65 75 45C75 25 65 10 50 10ZM50 25C55 25 60 30 60 38C60 46 55 50 50 50C45 50 40 46 40 38C40 30 45 25 50 25Z' opacity='0.08'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.12;
    pointer-events: none;
    z-index: 1;
}

.smile-wheel-card::after {
    content: '';
    position: absolute;
    bottom: -25px; left: -25px;
    width: 130px; height: 130px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23C7757C'%3E%3Cpath d='M50 10C35 10 25 25 25 45C25 65 35 90 50 90C65 90 75 65 75 45C75 25 65 10 50 10ZM50 25C55 25 60 30 60 38C60 46 55 50 50 50C45 50 40 46 40 38C40 30 45 25 50 25Z' opacity='0.08'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.12;
    transform: rotate(180deg);
    pointer-events: none;
    z-index: 1;
}

.smile-wheel-overlay.active .smile-wheel-card {
    transform: scale(1);
}

/* CIRCULAR CLOSE BUTTON (SMILEMAKERS STYLE) */
.smile-wheel-close {
    position: absolute;
    top: 18px; right: 18px;
    color: #4a4a4a;
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
    width: 32px; height: 32px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.2s ease;
    z-index: 10;
}

.smile-wheel-close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #111111;
}

/* CANVAS & POINTER CONTAINER */
.smile-wheel-canvas-wrapper {
    position: relative;
    width: 290px;
    height: 290px;
    margin: 0 auto 16px auto;
    z-index: 2;
}

#smile-wheel-canvas {
    width: 290px;
    height: 290px;
}

/* PIN MAP POINTER */
.smile-wheel-pointer {
    position: absolute;
    top: 8px;
    right: 32px;
    width: 34px;
    height: 44px;
    z-index: 5;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
}

/* HEADINGS & SUBTITLES */
.smile-wheel-title {
    font-size: 32px;
    font-weight: 800;
    color: #111111;
    margin: 0 0 6px 0;
    letter-spacing: -0.5px;
    line-height: 1.1;
    position: relative;
    z-index: 2;
}

.smile-wheel-subtitle {
    font-size: 14px;
    font-weight: 500;
    color: #4a4a4a;
    margin: 0 0 18px 0;
    line-height: 1.4;
    padding: 0 10px;
    position: relative;
    z-index: 2;
}

/* FORM INPUTS */
.smile-wheel-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.smile-wheel-input {
    width: 100%;
    height: 48px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    padding: 0 18px;
    font-size: 14px;
    color: #111111;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.smile-wheel-input:focus {
    border-color: #ca767e;
    box-shadow: 0 0 0 3px rgba(202, 118, 126, 0.15);
}

.smile-wheel-submit-btn {
    width: 100%;
    height: 50px;
    background: #ffffff;
    color: #111111;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.smile-wheel-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    background: #ffffff;
}

.smile-wheel-submit-btn.copy-btn {
    background: #C7757C !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(199, 117, 124, 0.3) !important;
}

.smile-wheel-submit-btn.copy-btn:hover {
    background: #B6646B !important;
    box-shadow: 0 6px 18px rgba(199, 117, 124, 0.4) !important;
}

/* CHECKBOX CONSENT */
.smile-wheel-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    font-size: 12px;
    color: #4a4a4a;
    line-height: 1.35;
    margin-top: 4px;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.smile-wheel-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #ca767e;
    border-radius: 4px;
    margin-top: 1px;
    flex-shrink: 0;
    cursor: pointer;
}

/* FOOTER DISCLAIMER */
.smile-wheel-disclaimer {
    font-size: 9.5px;
    color: #777777;
    margin-top: 14px;
    text-align: left;
    line-height: 1.2;
    position: relative;
    z-index: 2;
}

/* RESULT SCREEN */
.smile-wheel-result-card {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    position: relative;
    z-index: 2;
}

.smile-wheel-coupon-box {
    background: #ffffff;
    border: 2px dashed #C7757C;
    border-radius: 16px;
    padding: 16px 24px;
    width: 100%;
    box-sizing: border-box;
}

.smile-wheel-coupon-code {
    font-size: 26px;
    font-weight: 800;
    color: #C7757C;
    letter-spacing: 2px;
    margin: 4px 0;
}