.maple-page-container {
    max-width: 420px;
    margin: 0 auto;
    padding: 0 10px;
}

.maple-module-section {
    border-top: 1px solid var(--border);
    margin: 10px 0;
    padding: 10px 10px;
}

.maple-module-section.no-separator {
    border-top: none;
}

.maple-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.maple-section-title h2 {
    margin: 0;
    color: var(--foreground);
}

/* pseudo dropdown for use in text inputs that have dropdowns */
.pseudo-drop-down {
    position: relative;
    display: inline-block;
    width: 100%;
}

.pseudo-drop-down input {
    width: 100%;
    padding-right: 2rem; /* make space for the icon */
}

.pseudo-drop-down::after {
    content: "▼"; /* could also be a background-image */
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* so clicks go through to the input */
    font-size: 0.9rem;
    color: #666;
}


.toggle-section,
.news-archive-button {
    display: inline-block;           /* Allows box-shadow to be applied */
    background: transparent;         /* No background color */
    border: none;                    /* No border */
    border-radius: 4px;
    color: var(--foreground);                  /* Base text color */
    font: inherit;                   /* Inherit font settings for consistency */
    font-size: 0.9em;
    cursor: pointer;                 /* Indicates it's clickable */
    padding: 5px 5px;                      /* Remove default padding */
    text-decoration: none;           /* Remove underline if it’s a link */
    transition: color 0.3s ease, box-shadow 0.3s ease;  /* Smooth transition of color and shadow */
}

/* small tablet screen css */
@media (min-width: 480px) {

}

/* tablet screen css */
@media (min-width: 768px) {

}

/* laptop/desktop screen css */
@media (min-width: 1024px) {

}

/* large screen css */
@media (min-width: 1280px) {
    
}

/* Menu slider styles */
.maple-menu-link-sliding {
    cursor: pointer;
}

.maple-menu-slider {
    overflow: hidden;
    max-height: 0;
    transition: max-height 300ms ease;
    display: flex;              /* Center the inner slider content */
    justify-content: center;    /* Horizontally center content */
    width: 100%;
}

.maple-menu-slider.open {
    /* max-height will be set inline via JS to allow smooth animation to content height */
}

/* Optional inner padding for slider content to visually separate from the link */
.maple-menu-slider .maple-menu-slider-content {
    padding: 10px 0;
    margin-bottom: 16px; /* Added spacing below slider content */
}

/* Contact info layout */
.maple-contact-info {
    display: flex;
    flex-direction: column; /* stacked on small screens */
    gap: 12px;
    width: 100%;
}

.maple-contact-item {
    flex: 1 1 auto;
    border: none; /* Removed border as requested */
    border-radius: 6px;
    background: #fff;
    color: var(--foreground);
}

.maple-contact-item-inner {
    display: flex;
    flex-direction: column; /* vertical inside each container */
    align-items: center;     /* centered horizontally */
    text-align: center;
    padding: 12px 14px;
    gap: 6px;
}

.maple-contact-heading {
    font-weight: 600;
    color: var(--foreground);
}

.maple-contact-body {
    line-height: 1.5;
    white-space: pre-line; /* Preserve line breaks from settings */
}

.maple-contact-body a.maple-email-link {
    color: var(--foreground);
    text-decoration: none;
}

.maple-contact-body a.maple-email-link:hover,
.maple-contact-body a.maple-email-link:focus {
    text-decoration: underline;
}

/* Responsive: horizontal on larger screens */
@media (min-width: 768px) {
    .maple-contact-info {
        flex-direction: row;
    }
}
/* Existing styles above */
.maple-page-container {
    max-width: 420px;
    margin: 0 auto;
    padding: 0 10px;
}

.maple-module-section {
    border-top: 1px solid var(--border);
    margin: 10px 0;
    padding: 10px 10px;
}

.maple-module-section.no-separator {
    border-top: none;
}

.maple-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.maple-section-title h2 {
    margin: 0;
    color: var(--foreground);
}

/* Container for the articles using CSS Grid */
.maple-article-container {
    display: grid;
    gap: 20px;
    padding: 10px 0;
}

/* Each article card styling */
.maple-article {
    background: white;
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 6px;
}

.maple-article.no-separator {
    border-top: none;
}

.toggle-section,
.news-archive-button {
    display: inline-block;           /* Allows box-shadow to be applied */
    background: transparent;         /* No background color */
    border: none;                    /* No border */
    border-radius: 4px;
    color: var(--foreground);                  /* Base text color */
    font: inherit;                   /* Inherit font settings for consistency */
    font-size: 0.9em;
    cursor: pointer;                 /* Indicates it's clickable */
    padding: 5px 5px;                      /* Remove default padding */
    text-decoration: none;           /* Remove underline if it’s a link */
    transition: color 0.3s ease, box-shadow 0.3s ease;  /* Smooth transition of color and shadow */
}

/* small tablet screen css */
@media (min-width: 480px) {

}

/* tablet screen css */
@media (min-width: 768px) {

}

/* laptop/desktop screen css */
@media (min-width: 1024px) {

}

/* large screen css */
@media (min-width: 1280px) {
    
}

/* Menu slider styles */
.maple-menu-link-sliding {
    cursor: pointer;
}

.maple-menu-slider {
    overflow: hidden;
    max-height: 0;
    transition: max-height 300ms ease;
    display: flex;              /* Center the inner slider content */
    justify-content: center;    /* Horizontally center content */
    width: 100%;
}

.maple-menu-slider.open {
    /* max-height will be set inline via JS to allow smooth animation to content height */
}

/* Optional inner padding for slider content to visually separate from the link */
.maple-menu-slider .maple-menu-slider-content {
    padding: 10px 0;
    margin-bottom: 16px; /* Added spacing below slider content */
}

/* Contact info layout */
.maple-contact-info {
    display: flex;
    flex-direction: column; /* stacked on small screens */
    gap: 12px;
    width: 100%;
}

.maple-contact-item {
    flex: 1 1 auto;
    border: none; /* Removed border as requested */
    border-radius: 6px;
    background: #fff;
    color: var(--foreground);
}

.maple-contact-item-inner {
    display: flex;
    flex-direction: column; /* vertical inside each container */
    align-items: center;     /* centered horizontally */
    text-align: center;
    padding: 12px 14px;
    gap: 6px;
}

.maple-contact-heading {
    font-weight: 600;
    color: var(--foreground);
}

.maple-contact-body {
    line-height: 1.5;
    white-space: pre-line; /* Preserve line breaks from settings */
}

.maple-contact-body a.maple-email-link {
    color: var(--foreground);
    text-decoration: none;
}

.maple-contact-body a.maple-email-link:hover,
.maple-contact-body a.maple-email-link:focus {
    text-decoration: underline;
}



/* Responsive: horizontal on larger screens */
@media (min-width: 768px) {
    .maple-contact-info {
        flex-direction: row;
    }
}

/* ================================ */
/* Login and form styles (match LRTCH) */
/* ================================ */

.container { background-color: #fff; margin-left: auto; margin-right: auto; width: 100%; }
.container-sm { max-width: 540px !important; }
.container-md { max-width: 720px !important; }
.container-lg { max-width: 998px !important; }

.login-heading { margin: 0 0 50px; }
.login-type-heading { margin-bottom: 5px; }
.login-type-subheading { margin-bottom: 30px; font-weight: 400; }

.login-main { display: flex; flex-direction: column; }
.login-section { flex: 1 1 auto; }
.login-section:first-child { flex: 1.5 1; }

.login-separator { position: relative; font-size: 21px; font-weight: 700; margin: 40px 0; height: 22px; text-align: center; }
.login-separator::before,
.login-separator::after { position: absolute; display: block; content: ''; background-color: #dadada; width: calc(50% - 25px); height: 3px; top: 50%; margin-top: -1.5px; }
.login-separator::before { left: 0; }
.login-separator::after { right: 0; }

@media only screen and (min-width: 768px) {
  .login-main { flex-direction: row; }
  .profile-main { flex-direction: column; }
  .login-separator { margin-top: 80px; flex-basis: 20%; }
  .login-separator::before,
  .login-separator::after { height: 70px; width: 3px; left: 50%; margin-left: -1.5px; margin-top: unset; top: unset; }
  .login-separator::before { top: -80px; }
  .login-separator::after { right: unset; bottom: -80px; }
}

.form-label { display: block; margin-bottom: 8px; font-weight: 700; }
.form-group { margin-bottom: 20px; }
.form-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; flex-direction: row-reverse; }
.form-check-input { margin-top: 2px; }

/* Inputs */
.form-control { display: block; width: 100%; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
.form-control:focus { color: #495057; background-color: #fff; border-color: #80bdff; outline: 0; box-shadow: 0 0 0 .2rem rgba(0,123,255,.25); }

/* Buttons */
.btn { display: inline-block; color: var(--button-text); vertical-align: middle; user-select: none; background-color: transparent; text-transform: uppercase; border: 1px solid transparent; line-height: 1.5; border-radius: .25rem; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; width: 150px; padding: 12px; font-size: 14px; text-transform: uppercase; text-align: center; }
.btn-primary, .btn-primary.disabled, .btn-primary:disabled { color: var(--button-text); background-color: var(--button-background); border-color: var(--border); }
.btn-primary:hover { color: var(--button-background); background-color: var(--button-text); border-color: var(--accent); }
.btn-link { color: #f37920; background: transparent; border: none; padding: 0; width: auto; text-transform: none; }
.btn-link:hover, .btn-link:focus { color: #bc550a; text-decoration: underline; box-shadow: none; }

/* Anchors */
.forgot-password-link { margin-right: 12px; margin-bottom: 12px; display: inline-block; }

/* Notices */
.notice { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; padding: .75rem 1.25rem; border-radius: .25rem; margin-bottom: 1rem; }
.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; padding: .75rem 1.25rem; border-radius: .25rem; margin-bottom: 1rem; }

/* Make notices and errors span full width at top of login content */
.login .login-main > .notice,
.login .login-main > .error,
.login .profile-main > .notice,
.login .profile-main > .error  { width: 100%; flex: 0 0 100%; order: -1; }

/* OTP screen overrides: keep stacked layout and spacing */
.login .otp-main { flex-direction: column !important; }
.login .login-section { margin-bottom: 16px; }
.login form.login-section { width: 100%; }

/* Center the text above OTP inputs */
.otp-main .form-label { text-align: center; }

/* Segmented OTP input styles */
.otp-inputs { display: flex; gap: 10px; justify-content: center; }
.otp-input {
  width: 44px; height: 52px; text-align: center; font-size: 24px;
  border: 1px solid #ced4da; border-radius: 6px; outline: none;
}
.otp-input:focus { border-color: #80bdff; box-shadow: 0 0 0 .2rem rgba(0,123,255,.25); }
.otp-help { margin-top: 8px; font-size: 0.95rem; color: #555; }
.otp-help.otp-error { color: #721c24; }

@media (max-width: 480px) {
  .otp-input { width: 40px; height: 48px; font-size: 22px; }
}

/* Password input reveal styles (ported from LRTCH) */
.password-container { position: relative; width: 100%; }
.password-container input[type=password],
.password-container input[type=text] { width: 100%; padding: 12px 36px 12px 12px; box-sizing: border-box; }

/* Bootstrap icon eye positioning for toggle */
.bi-eye,
.bi-eye-slash { font-size: 1.5rem; position: absolute; top: 15%; right: 4%; cursor: pointer; color: #505d68; }

/* Floating "Back to Top" Button (moved from maple_fhm to core) */
.back-to-top-button {
    position: fixed;
    bottom: 80px;
    right: 10px;
    background-color: #34495e;
    color: #ffffff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.5rem; /* Adjust icon size */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    opacity: 0; /* Hidden by default */
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, background-color 0.3s;
    z-index: 1000;
}

.back-to-top-button.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top-button:hover {
    background-color: #2c3e50;
}