/* Tonies Layout Styles - Containers, Positioning, and Structure */

/* Main page container */
.tonies-main-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    height: auto !important;
    padding: var(--spacing-xl) 0 !important;
    gap: var(--spacing-3xl) !important;
    max-width: var(--container-desktop-max) !important;
    margin: 0 auto !important;
    background-color: var(--tonies-background) !important;
    box-sizing: border-box !important;
}

/* Logo container */
.tonies-logo-container {
    width: var(--logo-width) !important;
    height: var(--logo-height) !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tonies-logo-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

/* Content frame */
.tonies-content-frame {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: var(--spacing-2xl) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Header text section */
.tonies-header-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: var(--spacing-sm) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* White container - main card layout */
.tonies-white-container {
    background-color: var(--tonies-white) !important;
    border-radius: var(--corner-smooth-xl) !important;
    padding: var(--padding-container) !important;
    width: var(--white-container-width-desktop) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--gap-2xl) !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

.tonies-standard-container {
    border-radius: var(--corner-smooth-xl) !important;
    padding-left: 24px!important;
    padding-right: 24px!important;
    width: var(--white-container-width-desktop) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--gap-xl) !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Wider container for info/confirmation pages and delete account page */
.tonies-content-frame:has(.tonies-info-content) .tonies-white-container,
.tonies-main-container:has(.tonies-info-content) .tonies-white-container,
.tonies-content-frame:has(#kc-delete-account-form) .tonies-white-container {
    width: var(--white-container-width-info) !important;
}

/* Form layout */
#kc-update-profile-form,
#kc-form-login,
#kc-update-email-form,
#kc-update-password-form,
#kc-reset-password-form,
#kc-delete-account-form,
#kc-passwd-update-form,
#kc-register-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
}

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

/* Input field with message wrapper */
.tonies-input-field-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Label container layout */
.tonies-label-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 0 8px !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Input field layout */
.tonies-input-field {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 6px !important;
    padding: 12px 16px !important;
    border-radius: 18px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    height: var(--input-height) !important;
}

.tonies-input-field input {
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Button container layout */
.tonies-button-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Primary button layout */
.tonies-primary-button {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    gap: 6px !important;
    padding: 0 24px !important;
    height: var(--button-height) !important;
    border-radius: 18px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.tonies-primary-button span {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Info container layout */
.tonies-info-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 332px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Language selector positioning */
#kc-locale {
    position: absolute !important;
    top: 24px !important;
    right: 24px !important;
    z-index: 1000 !important;
}

#kc-locale-wrapper {
    position: relative !important;
}

#kc-locale-dropdown {
    position: relative !important;
    display: inline-block !important;
}

#kc-current-locale-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-radius: var(--corner-smooth-sm) !important;
}

/* Dropdown menu positioning */
.kc-dropdown ul {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    min-width: 120px !important;
    border-radius: var(--corner-smooth-sm) !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    z-index: 1001 !important;
}

.kc-dropdown ul li {
    margin: 0 !important;
    padding: 0 !important;
}

.kc-dropdown ul li a {
    display: block !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    margin: 0 8px !important;
}

/* Info/Confirmation page layout */
.tonies-info-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 24px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tonies-icon-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tonies-icon-container svg {
    width: 64px !important;
    height: 64px !important;
    display: block !important;
}

.tonies-message-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tonies-action-container {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}