body {
    font-family: "Noto Sans JP", Arial, sans-serif;
    background-color: #f8f9fa;
    /* REMOVE: min-height: 100vh; This is the main culprit for blocking scroll */
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
    padding: 0;
    color: #324A6D;
}
.main-container {
    flex-grow: 1;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
}

.left-panel {
    background-color: white;
    padding: 3rem;
}

.right-panel {
    background-color: #e0f7fa; /* Light blue background for benefits section */
    padding: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.rcbc-logo {
    width: 80px; /* Adjust size as needed */
}

.rcbc-dpp-logo {
    height: 4rem; /* Adjust size as needed */
}

.welcome-text {
    font-size: 5.5rem; /* Large font size */
    line-height: 1.0;
    margin-bottom: 1rem;
}
.dpp-color {
    color: #3783D9;
}
.dpp-bg-color {
    background-color: #007bff;
}
.sub-text {
    color: #6c757d;
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

.payroll-card-img {
    max-width: 60%;
    height: auto;
    margin-bottom: 2rem;
}

.footer-bar {
    background-color: #2562A7;
    color: white;
    padding: 0.75rem 0;
    text-align: center;
    font-size: 0.8rem;
}

.footer-pdic-logo {
    height: 1.5rem;
}

/* Custom styles for the icon circle background */
.modal-icon-bg {
    background-color: #e3f2fd; /* Light blue background matching the image */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Makes it a circle */
    width: 44px; /* Fixed size */
    height: 44px; /* Fixed size */
    flex-shrink: 0; /* Prevents shrinking */
}

    /* Optional: To make the icons inside slightly larger */
    .modal-icon-bg .bi {
        font-size: 1.5rem !important; /* Larger icon size */
    }

.otp-input {
    width: 15%; /* Ensures six inputs fit nicely */
    height: 50px; /* Fixed height */
    font-size: 1.5rem;
    font-weight: 700;
    border: 1px solid #ced4da; /* Standard border */
    padding: 0 !important;
}
    .otp-input.error {
        border-color: #dc3545; /* Red border */
        box-shadow: 0 0 0 2px #dc3545;
    }

.alert-error.hidden {
    display: none;
}

.getstarted-container {
    background-color: #ECF5FF;
    min-height: 100vh; /* Ensure it covers the whole screen */
    /* Set up flexbox for the entire container to arrange header and content */
    display: flex;
    flex-direction: column;
}

.getstarted-content-wrapper {
    flex-grow: 1; /* Make it fill the remaining vertical space */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    color: #324A6D !important;
}

.blank-container {
    padding: 1.5rem 3rem;
}

/* Styling for the main document headings */
.document-title {
    font-size: 2rem; /* Larger than h2 but smaller than h1 */
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.document-subtitle {
    font-size: 0.9rem;
    margin-bottom: 3rem;
    display: block;
}

.section-header-roman {
    font-size: 1.2rem; /* Large and bold for main sections (I., II., etc) */
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Numbered list styling to mimic the tight legal document look */
.legal-list {
    padding-left: 30px;
    list-style: none; /* Remove default list style */
}

    .legal-list > li {
        counter-increment: list-item;
        margin-bottom: 2rem;
        line-height: 1.6;
        text-align: justify;
        /* Create space for the number and align content */
        padding-left: 2rem; /* Indent all content under the number */
    }

        /* Position the number to align with the negative indent */
        .legal-list > li:before {
            content: counter(list-item) ". ";
            font-weight: bold;
            display: inline; /* Keep it inline with the first line of content */
        }

        /* Ensure paragraphs stack correctly without the number interfering */
        .legal-list > li p {
            display: block; /* Paragraphs are block-level to force new lines */
            font-weight: normal;
            margin-bottom: 1rem; /* Space between paragraphs */
        }

            .legal-list > li p:first-child {
                display: inline; /* Keep the first paragraph inline with the number */
                text-indent: 0;
            }

            .legal-list > li p:not(:first-child) {
                margin-top: 1rem; /* Add spacing to paragraphs that are not the first */
                margin-bottom: 1rem;
            }

            .legal-list > li p:last-child {
                margin-bottom: 0;
            }

/* Styling for the main introductory paragraph */
.intro-paragraph {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    text-align: justify;
}

/* Custom list styling for Roman numerals (i, ii, iii...) */
.roman-list {
    padding-left: 0;
    list-style: none;
    counter-reset: roman-counter; /* Initialize Roman counter */
}

    .roman-list > li {
        counter-increment: roman-counter;
        margin-bottom: 1.5rem;
        line-height: 1.6;
        text-align: justify;
        /* Adjust padding/indent for better alignment */
        padding-left: 2rem; /* Indent the entire block */
        text-indent: -2rem; /* Pull the first line back */
    }

        .roman-list > li:before {
            content: counter(roman-counter, lower-roman) ". ";
            font-weight: normal;
            display: inline; /* Ensure it stays inline with the start of the text */
        }

        /* Handle multiple paragraphs within a Roman list item (like in item iii) */
        .roman-list > li p {
            display: inline;
            text-indent: 0; /* Important: reset indent for separate paragraphs */
            margin-top: 1rem; /* Space between paragraphs */
            margin-bottom: 0; /* Remove default paragraph margin */
            padding-left: 0.5rem; /* Small visual indent for subsequent paragraphs */
        }
            /* Remove margin above the very first paragraph if it exists (not strictly needed with this HTML structure, but good for safety) */
            .roman-list > li p:first-child {
                margin-top: 0;
            }


/* Custom list styling for letter bullets (a, b, c...) inside Roman list items */
.alpha-list {
    padding-left: 0;
    list-style: none;
    counter-reset: alpha-counter; /* Initialize Alpha counter */
    margin-top: 1rem; /* Space above sub-list */
    margin-bottom: 0; /* No extra margin below this list */
}

    .alpha-list > li {
        counter-increment: alpha-counter;
        margin-bottom: 0.5rem; /* Space between sub-list items */
        line-height: 1.6;
        text-align: justify;
        padding-left: 1.5rem; /* Indent for sub-list items */
        text-indent: -1.5rem; /* Pull back first line of sub-list item */
    }

        .alpha-list > li:before {
            content: counter(alpha-counter, lower-alpha) ". ";
            font-weight: normal;
            display: inline-block;
            width: 1.5rem; /* Allocate width for letters */
        }

.bold-term {
    font-weight: 600; /* Bold text for terms like CLIENT, RCBC */
}

/* Homepage - Select an option modal styles */
.option-card {
    transition: all 0.3s ease;
    color: #324A6D;
    border-color: rgba(200, 200, 200, 0.5);
}

.option-card:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
    border-color: var(--bs-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


  /* Responsiveness adjustments */
  @media (max-width: 767px) {
    .welcome-text {
      font-size: 2.5rem;
    }

    .left-panel, .right-panel {
      padding: 2rem 1.5rem;
    }

    .right-panel {
      display: none !important;
    }

    .main-container {
      height: auto; /* Allows content height to push the footer down */
      min-height: auto; /* Ensure no residual min-height constraint */
    }

    .benefits-wrapper {
      flex-wrap: wrap;
    }

    /* Terms and Conditions, Client's Acknowledgement */
    .blank-container {
      padding: 1.5rem 1rem;
    }

      .blank-container .app-header {
        margin-bottom: 0px !important;
      }

      .blank-container header {
        margin-bottom: 20px !important;
      }

      .blank-container section div {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 0.8rem;
      }

    .content-container {
      padding: 0px !important;
    }

    .document-title {
      font-size: 1.3rem;
    }

    .document-subtitle {
      margin-bottom: 1rem;
    }

    .section-header-roman {
      font-size: 1rem;
    }

    .legal-list {
      padding-left: 0;
      padding-right: 10px;
      font-size: 0.8rem;
    }

    .acknowledgement-section {
      padding: 0 10px !important;
      font-size: 0.8rem !important;
    }

    .intro-paragraph {
      font-size: 0.8rem;
      margin-bottom: 10px;
    }
  }

  @media (max-width: 414px) {
    .otp-card-container {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }