/* Form Styling CSS - Signup Form and Thank You Message */

/* Form positioned proportionally relative to join-club-content container */
.signup-form {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Name field - based on actual measurements: x=255, y=613, w=682, h=65 on 1000x1500 form */
.signup-form input[name="name"] {
    position: absolute;
    left: calc(255 / 1000 * 100%); /* 25.5% */
    top: calc(613 / 1500 * 100%); /* 40.8% */
    width: calc(682 / 1000 * 100%); /* 68.2% */
    height: calc(65 / 1500 * 100%); /* 4.3% */
    border: none;
    background: transparent;
    font-size: calc(32 / 1530 * 100vh); /* Container-based scaling */
    font-family: 'Courier New', monospace;
    color: #333;
    font-weight: bold;
    outline: none;
    text-align: left;
    padding: 0;
    line-height: 1.2;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
}

/* Cell/Phone field - based on actual measurements: x=255, y=720, w=682, h=65 on 1000x1500 form */
.signup-form input[name="phone"] {
    position: absolute;
    left: calc(255 / 1000 * 100%); /* 25.5% */
    top: calc(720 / 1500 * 100%); /* 48% */
    width: calc(682 / 1000 * 100%); /* 68.2% */
    height: calc(65 / 1500 * 100%); /* 4.3% */
    border: none;
    background: transparent;
    font-size: calc(32 / 1530 * 100vh); /* Container-based scaling */
    font-family: 'Courier New', monospace;
    color: #333;
    font-weight: bold;
    outline: none;
    text-align: left;
    padding: 0;
    line-height: 1.2;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
}

/* Email field - based on actual measurements: x=255, y=828, w=682, h=65 on 1000x1500 form */
.signup-form input[name="email"] {
    position: absolute;
    left: calc(255 / 1000 * 100%); /* 25.5% */
    top: calc(828 / 1500 * 100%); /* 55.2% */
    width: calc(682 / 1000 * 100%); /* 68.2% */
    height: calc(65 / 1500 * 100%); /* 4.3% */
    border: none;
    background: transparent;
    font-size: calc(32 / 1530 * 100vh); /* Container-based scaling */
    font-family: 'Courier New', monospace;
    color: #333;
    font-weight: bold;
    outline: none;
    text-align: left;
    padding: 0;
    line-height: 1.2;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
}

/* Pick me! pick me! checkbox - based on measurements: checkbox 64w x 58h at x=83, y=972 on 1000x1500 form */
.signup-form input[type="checkbox"] {
    position: absolute;
    left: calc(83 / 1000 * 100%); /* 8.3% */
    top: calc(972 / 1500 * 100%); /* 64.8% */
    width: calc(64 / 1000 * 100%); /* 6.4% */
    height: calc(58 / 1500 * 100%); /* 3.9% */
    appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0; /* Hide default checkbox */
    z-index: 10001; /* Above form content but below checkmark */
}

/* Checkmark image - at x=79, y=932, size 93x98 on 1000x1500 form */
.signup-form input[type="checkbox"]::before {
    content: "";
    position: absolute;
    left: calc(79 / 1000 * 100%); /* Direct position: 7.9% */
    top: calc(932 / 1500 * 100%); /* Direct position: 62.1% */
    width: calc(93 / 1000 * 100%); /* 9.3% width */
    height: calc(98 / 1500 * 100%); /* 6.5% height */
    background-image: url('../images/slide-outs/checkmark-for-form.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10002; /* Above everything including form overlay and TV */
    pointer-events: none; /* Don't block clicks */
}

.signup-form input[type="checkbox"]:checked::before {
    opacity: 1;
}

/* Removed orphaned .success-checkmark class - not used in HTML */

@keyframes successCheckmark {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Focus effects */
.signup-form input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-radius: calc(3 / 1000 * 100vh);
}

.signup-form input::placeholder {
    color: #999;
    font-weight: normal;
    opacity: 0.7;
}

/* Submit button positioned at bottom right with 30% width and 5% padding */
.signup-form button {
    position: absolute;
    bottom: calc(51 / 1530 * 100%);
    right: calc(51 / 1016 * 100%);
    width: calc(305 / 1016 * 100%);
    height: calc(70 / 1530 * 100%);
    background: transparent;
    border: calc(5 / 1530 * 100vh) solid #333;
    color: #333;
    font-family: 'Courier New', monospace;
    font-size: calc(18 / 1530 * 100vh);
    font-weight: 900;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.signup-form button:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: #000;
}

/* Custom Validation Tooltips - Match browser help text styling */
.custom-validation-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    z-index: 10001;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    pointer-events: none;
    animation: fadeInTooltip 0.2s ease-in;
}

.custom-validation-tooltip::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 16px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(0, 0, 0, 0.9);
}

/* Thank You Message - Help text style */
.thank-you-help-text {
    position: fixed;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    z-index: 10001;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    animation: fadeInTooltip 0.3s ease-in;
    transition: opacity 0.5s ease;
}

@keyframes fadeInTooltip {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Success Checkmark Element */
.success-checkmark-element {
    position: absolute;
    left: calc(79 / 1000 * 100%); /* 7.9% */
    top: calc(932 / 1500 * 100%); /* 62.1% */
    width: calc(93 / 1000 * 100%); /* 9.3% */
    height: calc(98 / 1500 * 100%); /* 6.5% */
    z-index: 10002;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
}

.success-checkmark-element img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.success-checkmark-element.show {
    opacity: 1;
    transform: scale(1);
}