/* Tonies Components - Visual Styling and Interactive States */

/* Typography Components */
.tonies-headline {
    font-family: var(--font-family) !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: var(--font-size-headline) !important;
    line-height: var(--line-height-normal) !important;
    text-align: center !important;
    color: var(--tonies-text-primary) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
}

.tonies-subheadline {
    font-family: var(--font-family) !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: var(--font-size-subheadline) !important;
    line-height: var(--line-height-normal) !important;
    text-align: center !important;
    color: var(--tonies-text-secondary) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: var(--container-mobile-subheadline) !important;
    display: block !important;
    box-sizing: border-box !important;
    position: relative !important;
}
.tonies-subheadline.apple-subline {
    font-weight: var(--font-weight-medium) !important;
}

.tonies-field-label {
    font-family: var(--font-family) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 1.5em !important;
    color: var(--tonies-text-primary) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
}

.tonies-info-text {
    font-family: var(--font-family) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 1.5em !important;
    text-align: center !important;
    color: var(--tonies-text-secondary) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.tonies-message-text {
    font-family: var(--font-family) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: var(--tonies-text-primary) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-weight: 500 !important;
}

/* Input Field Component */
.tonies-input-field {
    background-color: var(--tonies-white) !important;
    border: 2px solid var(--tonies-border) !important;
    border-radius: var(--corner-smooth-md) !important;
    transition: border-color 0.2s ease !important;
}

.tonies-input-field:focus-within {
    border-color: #E2DBD2 !important;
    outline: none !important;
}

.tonies-input-field.error {
    border-color: var(--tonies-error) !important;
}

.tonies-input-field.error:focus-within {
    border-color: var(--tonies-error) !important;
}

.tonies-input-field.success {
    border-color: var(--tonies-success) !important;
}

.tonies-input-field input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-family: var(--font-family) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 1.5em !important;
    color: var(--tonies-text-primary) !important;
    box-shadow: none !important;
}

.tonies-input-field input::placeholder {
    color: var(--tonies-text-placeholder) !important;
    opacity: 1 !important;
}

.tonies-input-field input:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Error Message Component */
.tonies-error-message {
    color: var(--tonies-error) !important;
    font-family: var(--font-family) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.38em !important;
    padding: 0 8px !important;
    margin: 0 !important;
    display: block !important;
    text-align: left !important;
}

/* Success Message Component */
.tonies-success-message {
    color: var(--tonies-success) !important;
    font-family: var(--font-family) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.38em !important;
    padding: 0 8px !important;
    margin: 0 !important;
    display: block !important;
    text-align: left !important;
}

/* Button Component */
.tonies-primary-button {
    background-color: var(--tonies-primary-red) !important;
    border: 1px solid transparent !important;
    border-radius: var(--corner-smooth-md) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.tonies-primary-button:hover {
    background-color: #B8000D !important;
    text-decoration: none !important;
}

.tonies-primary-button:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(210, 0, 15, 0.3) !important;
    text-decoration: none !important;
}

.tonies-primary-button span {
    font-family: var(--font-family) !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 1em !important;
    letter-spacing: 0.444444434510337% !important;
    color: var(--tonies-white) !important;
    text-align: center !important;
}

/* Language Selector Component */
#kc-current-locale-link {
    color: var(--tonies-text-secondary) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    font-family: var(--font-family) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(95, 91, 86, 0.2) !important;
    border-radius: var(--corner-smooth-sm) !important;
    backdrop-filter: blur(4px) !important;
    cursor: pointer !important;
}

#kc-current-locale-link:hover {
    background-color: var(--tonies-white) !important;
    border-color: rgba(95, 91, 86, 0.3) !important;
    color: var(--tonies-text-primary) !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

#kc-current-locale-link:focus {
    outline: none !important;
    background-color: var(--tonies-white) !important;
    border-color: var(--tonies-primary-red) !important;
    box-shadow: 0 0 0 2px rgba(210, 0, 15, 0.2) !important;
}

/* Language selector arrow indicator */
#kc-current-locale-link::after {
    content: "▼" !important;
    font-size: 10px !important;
    color: var(--tonies-text-placeholder) !important;
    transition: transform 0.2s ease !important;
}

#kc-current-locale-link:hover::after {
    color: var(--tonies-text-secondary) !important;
}

#apple-sign-in {
    background-color: black !important;
}

/* Dropdown Component */
.kc-dropdown ul {
    background-color: var(--tonies-white) !important;
    border: 1px solid rgba(95, 91, 86, 0.2) !important;
    border-radius: var(--corner-smooth-sm) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    list-style: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) !important;
    transition: all 0.2s ease !important;
    backdrop-filter: blur(8px) !important;
}

.kc-dropdown:hover ul {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.kc-dropdown ul li a {
    color: var(--tonies-text-secondary) !important;
    text-decoration: none !important;
    font-family: var(--font-family) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: all 0.15s ease !important;
}

.kc-dropdown ul li a:hover {
    background-color: rgba(210, 0, 15, 0.08) !important;
    color: var(--tonies-primary-red) !important;
    text-decoration: none !important;
}

.kc-dropdown ul li a:focus {
    outline: none !important;
    background-color: rgba(210, 0, 15, 0.12) !important;
    color: var(--tonies-primary-red) !important;
}

/* Support Link Component */
.tonies-support-link {
    color: var(--tonies-primary-red) !important;
    text-decoration: underline !important;
    font-family: var(--font-family) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

.tonies-support-link:hover {
    color: #B8000D !important;
    text-decoration: underline !important;
}

.tonies-support-link:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(210, 0, 15, 0.3) !important;
    border-radius: 2px !important;
}

/* Password Toggle Button */
.tonies-password-toggle {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.tonies-password-toggle:hover {
    opacity: 0.7 !important;
}

.tonies-password-toggle svg {
    width: 24px !important;
    height: 24px !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Checkbox Component */
.tonies-checkbox-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Reduce spacing between consecutive checkboxes */
.tonies-checkbox-container + .tonies-checkbox-container {
    margin-top: -12px !important;
}

/* Newsletter explanation text */
.tonies-newsletter-explanation {
    margin-top: 8px !important;
    padding-left: 32px !important; /* Align with checkbox text */
    width: 100% !important;
}

.tonies-explanation-text {
    font-family: var(--font-family) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.4em !important;
    color: var(--tonies-text-secondary) !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tonies-checkbox-wrapper {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 0 8px !important;
    width: 100% !important;
    margin: 0 !important;
}

.tonies-checkbox-wrapper input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    border: 2px solid #E5E5E5 !important;
    border-radius: 6px !important;
    background-color: var(--tonies-white) !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.tonies-checkbox-wrapper input[type="checkbox"]:checked {
    background-color: #1A7125 !important;
    border-color: #1A7125 !important;
}

.tonies-checkbox-wrapper input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url('../img/checkmark-icon.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.tonies-checkbox-wrapper input[type="checkbox"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px #0099FF !important;
    border-radius: 6px !important;
}

.tonies-checkbox-wrapper input[type="checkbox"]:hover:not(:checked) {
    border-color: #1A7125 !important;
}

.tonies-checkbox-wrapper input[type="checkbox"]:checked:hover {
    background-color: #599257 !important;
    border-color: #599257 !important;
}

.tonies-checkbox-label {
    cursor: pointer !important;
    margin: 0 !important;
    padding: 2px 0 0 0 !important;
    flex: 1 !important;
    display: flex !important;
    align-items: flex-start !important;
}

.tonies-checkbox-text {
    font-family: Wonder, var(--font-family) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5em !important;
    color: #333333 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.tonies-input-field.disabled {
    background-color: #DCD7D3 !important;
    border-color: #F4F1ED !important;
}

.tonies-input-field.disabled input {
    background-color: transparent !important;
    color: #534F4F !important;
    cursor: not-allowed !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 1.25em !important;
}

/* Button Container with Gap */
.tonies-button-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
}

/* Tertiary Button Component */
.tonies-tertiary-button {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--corner-smooth-md) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 24px !important;
    height: 56px !important;
}

.tonies-tertiary-button:hover {
    background-color: rgba(210, 0, 15, 0.08) !important;
    text-decoration: none !important;
}

.tonies-tertiary-button:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(210, 0, 15, 0.3) !important;
    text-decoration: none !important;
}

.tonies-tertiary-button span {
    font-family: var(--font-family) !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 1em !important;
    letter-spacing: 0.444444434510337% !important;
    color: var(--tonies-primary-red) !important;
    text-align: center !important;
}

/* Secondary Action Container */
.tonies-secondary-action {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
    width: 332px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Signup Text */
.tonies-signup-text {
    font-family: var(--font-family) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 1.5em !important;
    color: var(--tonies-text-secondary) !important;
    text-align: center !important;
    margin: 0 !important;
    width: 327px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Secondary Button Component */
.tonies-secondary-button {
    background-color: transparent !important;
    border: 2px solid var(--tonies-primary-red) !important;
    border-radius: var(--corner-smooth-md) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 24px !important;
    height: 56px !important;
    width: 100% !important;
}

.tonies-secondary-button:hover {
    background-color: rgba(210, 0, 15, 0.08) !important;
    text-decoration: none !important;
}

.tonies-secondary-button:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(210, 0, 15, 0.3) !important;
    text-decoration: none !important;
}

.tonies-secondary-button span {
    font-family: var(--font-family) !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 1em !important;
    letter-spacing: 0.444444434510337% !important;
    color: var(--tonies-primary-red) !important;
    text-align: center !important;
}

/* Error Page Specific Components */
.tonies-error-display {
    background-color: #FFF8F8 !important;
    border: 1px solid #FFE5E5 !important;
    border-radius: var(--corner-smooth-md) !important;
    padding: 16px !important;
    margin: 16px 0 !important;
}

.tonies-error-display .tonies-message-text {
    color: var(--tonies-error) !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

.tonies-error-guidance {
    margin: 16px 0 !important;
}

.tonies-error-guidance .tonies-message-text {
    color: var(--tonies-text-secondary) !important;
    margin: 0 !important;
}

.tonies-support-section {
    margin-top: 24px !important;
    padding-top: 16px !important;
    border-top: 1px solid #E5E5E5 !important;
    text-align: center !important;
}

.tonies-support-section .tonies-message-text {
    color: var(--tonies-text-secondary) !important;
    margin: 0 0 8px 0 !important;
    font-size: 14px !important;
}

/* Select Dropdown Component */
.tonies-input-field select {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-family: var(--font-family) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 1.5em !important;
    color: var(--tonies-text-primary) !important;
    box-shadow: none !important;
    width: 100% !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding: 0 12px !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238F8F8F' d='M6 8.825L2.175 5l.708-.708L6 7.409l3.117-3.117L9.825 5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
}

.tonies-input-field select:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.tonies-input-field select option {
    font-family: var(--font-family) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    color: var(--tonies-text-primary) !important;
    background-color: var(--tonies-white) !important;
    padding: 8px 12px !important;
}

/* reCAPTCHA Container */
.tonies-recaptcha-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 16px 0 !important;
    width: 100% !important;
}

.tonies-recaptcha-container .g-recaptcha {
    transform: scale(0.9) !important;
    transform-origin: center !important;
}

/* Enhanced Checkbox Styles for Registration */
.tonies-checkbox-container {
    margin: 16px 0 !important;
}

.tonies-checkbox-wrapper input[type="checkbox"] {
    margin-top: 2px !important;
}

.tonies-checkbox-text a {
    color: var(--tonies-primary-red) !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

.tonies-checkbox-text a:hover {
    color: #B8000D !important;
    text-decoration: underline !important;
}

.tonies-checkbox-text a:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(210, 0, 15, 0.3) !important;
    border-radius: 2px !important;
}

/* Form Validation States */
.tonies-input-field.error {
    border-color: var(--tonies-error) !important;
}

.tonies-input-field.success {
    border-color: var(--tonies-success) !important;
}

/* Disabled Submit Button State */
input[type="submit"]:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background-color: #CCCCCC !important;
}

input[type="submit"]:disabled:hover {
    background-color: #CCCCCC !important;
}

/* Spacing utilities for info content */
.tonies-spacing-top-16 {
    margin-top: 16px;
}

.tonies-spacing-top-24 {
    margin-top: 24px;
}

/* Hide newsletter checkbox by default until country is determined */
.tonies-newsletter-container {
    display: none !important;
}

/* Show newsletter checkbox for non-US users */
.tonies-newsletter-container.show {
    display: block !important;
}

/* Ensure newsletter is hidden for US users */
.tonies-newsletter-container.hide {
    display: none !important;
}