/* Forms */
form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 auto;
}

.form-group h3 {
    margin-bottom: 1rem;
}

.form-group.phone-group, .margined-form-el {
    margin-top: 1.5rem;
}
.tos-checkbox {
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

/* Input fields */
form input, form select, form textarea {
    width: 100%;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-inputs);
    background: var(--color-background);
    transition: all 0.2s ease;
    color: var(--color-text);
    text-align: left;
    box-sizing: border-box;
}
form input[type="date"] {
    text-align: left;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.25rem;
    padding-right: 3rem;
}
form input[type="date"], form select {
    height: 3rem;
}
form select {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 1rem;
    text-indent: 1rem;
}


form input:focus,
form select:focus,
form textarea:focus {
    border-color: var(--color-accent);
}

.form-group label {
    display: inline-block;
    position: relative;
    color: var(--color-text);
    background: var(--color-background);
    padding: 0 0.5rem;
    font-variant: all-small-caps;
    transition: transform 0.3s ease;
}
.form-group.input-group label {
    transform: translate(0, 50%);
    left: 1rem;
}
.form-group.input-group label:has(+input:focus),
.form-group.input-group label:has(+select:focus),
.form-group.input-group label:has(+textarea:focus) {
    transform: translate(0, 0);
}


.form-group.radio-group label, .form-group.slider-group label {
    padding-top: 0.5rem;
    padding-left: 0;
}
.radio-sub-group {
    display: flex;
}
.form-group .radio-sub-group label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    padding-top: 0;
    color: var(--color-text);
    padding-left: 0;
}
.form-group .radio-sub-group label input {
    width: auto;
    padding-left: 0;
}
.checkbox-option label {
    padding: 0 !important; 
    margin: 0;
}

.iti--separate-dial-code .iti__selected-flag {
    border-radius: var(--border-radius-inputs) 0 0 var(--border-radius-inputs) !important;
}

/* Next button */
form button, form input[type="submit"] {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
    color: var(--color-white);
    border: none;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
    margin-top: 1rem;
    width: 100%;
    text-align: center;
    border-radius: var(--border-radius-inputs);
    box-shadow: 0 4px 8px var(--color-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
}

form button:hover, form input[type="submit"]:hover, form input[type="submit"]:active, form input[type="submit"]:focus, form button:active, form button:focus {
    background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent-dark));
}

/* Mobile optimizations */
@media (max-width: 600px) {

    .form-group:not(.line-break) {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        width: 100%;
    }

    .form-group label {
        min-width: auto;
    }

    form input,
    form select {
        font-size: 16px;
    }
}

/* Generic slider styles */
.sliders-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.slider-container label {
    min-width: 120px;  /* Increased from 80px to accommodate longer labels */
}

.slider-container input[type="range"] {
    flex: 1;
}

.range-value {
    min-width: 70px;
    text-align: right;
    color: var(--color-text-secondary);
}

/* Range input styling */
input[type="range"] {
    -webkit-appearance: none;
    height: 6px;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        transparent 40%, 
        var(--color-border) 40%, 
        var(--color-border) 60%, 
        transparent 60%, 
        transparent 100%
    );
    border: 0;
    cursor: pointer;
    box-shadow: none;
}
input[type="range"]::-webkit-slider-thumb {
    background: linear-gradient(135deg, var(--color-accent-secondary), var(--color-accent-secondary-dark));
}
input[type="range"]::-moz-range-thumb {
    background: linear-gradient(135deg, var(--color-accent-secondary), var(--color-accent-secondary-dark));
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent-secondary), var(--color-accent-secondary-dark));
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px var(--color-shadow);
}

input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent-secondary), var(--color-accent-secondary-dark));
    cursor: pointer;
    border: none;
}

/* Activity specific styles */
.visualization-bar {
    height: 2rem;
    border-radius: var(--border-radius-inputs);
    overflow: hidden;
    display: flex;
    margin-bottom: 0.5rem;
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 8px var(--color-shadow);
}

.activity-segment {
    height: 100%;
    transition: width 0.3s ease;
}

.activity-segment.sitting {
    background-color: var(--color-accent);
}
input[type="range"]#sitting_hours::-webkit-slider-thumb {
    background: var(--color-accent);
}
input[type="range"]#sitting_hours::-moz-range-thumb {
    background: var(--color-accent);
}


.activity-segment.lying {
    background-color: var(--color-accent-secondary);
}
input[type="range"]#lying_hours::-webkit-slider-thumb {
    background: var(--color-accent-secondary);
}
input[type="range"]#lying_hours::-moz-range-thumb {
    background: var(--color-accent-secondary);
}

.activity-segment.standing {
    background-color: #81C784;
}
input[type="range"]#standing_hours::-webkit-slider-thumb {
    background: #81C784;
}
input[type="range"]#standing_hours::-moz-range-thumb {
    background: #81C784;
}

.visualization-bar.invalid {
    border-color: var(--color-red);
}

#total_hours {
    text-align: right;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    color: var(--color-text-secondary);
}

#total_hours.invalid {
    color: var(--color-red);
}

/* Activity slider improvements */
.activity-sliders {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.activity-slider {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.activity-slider label {
    min-width: 80px;
}

.activity-slider input[type="range"] {
    flex: 1;
}

.range-value {
    min-width: 70px;
    text-align: right;
    color: var(--color-text-secondary);
}

/* Range input styling */
.iti {
    width: 100%;
}
.iti__flag {
    background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/img/flags.png");
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
        background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/img/flags@2x.png");
    }
}

/* Day options styling */
.checkbox-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9rem;
}

.checkbox-option input[type="checkbox"] {
    width: auto;
    margin: 0 !important;
    padding: 0 !important;
}


.signup-video {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10000000;
    top: 0;
    left: 0;
    padding:0;
}
.signup-video iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.signup-cta-container {
    z-index: 1000000000000;
    position: absolute;
    width: calc(100% - 2rem);
    bottom: 1rem;
    max-width: 900px;
}

.phone-caption {
    font-style: italic;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

/* Discount code form styling */
#discount-form {
    margin-bottom: 1.5rem;
}

#discount-form .form-group {
    margin: 0;
}

#discount-form .input-group {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-grow: 1;
}

#discount-form .input-group input[type="text"] {
    border-radius: var(--border-radius-inputs) 0 0 var(--border-radius-inputs);
    border-right: none;
    margin: 0;
    flex: 1;
}

#discount-form .input-group input[type="submit"] {
    border-radius: 0 var(--border-radius-inputs) var(--border-radius-inputs) 0;
    margin: 0;
    width: auto;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
    color: var(--color-white);
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
    box-shadow: none;
}

#discount-form .input-group input[type="submit"]:hover {
    background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent-dark));
}

p.notice {
    text-align: center;
    padding-bottom: 0.5rem;
}

.coupon-button {
    background: var(--color-overlay);
    border-radius: var(--border-radius);
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    text-decoration: none;
}
.coupon-button:hover, .coupon-button:active, .coupon-button:focus{
    text-decoration: none;
}