@charset "UTF-8";

/* Online School Page Specific Styles */
/* Previously defined styles ... managed by append/replace logic effectively, but here I'm overwriting with full content since the file is small */

.school-intro-section {
    padding: 80px 0;
}

.school-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 100px;
    gap: 60px;
}

.school-row:last-child {
    margin-bottom: 0;
}

.school-row.reverse {
    flex-direction: row-reverse;
}

.school-img {
    flex: 1;
}

.school-text {
    flex: 1;
}

/* Image Placeholder specific to this page */
.school-img .img-placeholder {
    width: 100%;
    height: 300px;
    background-color: #ccc;
    border-radius: 20px;
    position: relative;
}

.school-img .img-placeholder.pink-border {
    border: 10px solid #e4dbff;
    /* Pink color matching reference roughly */
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.school-img-photo {
    width: 100%;
    height: auto;
    border-radius: 20px;
    display: block;
}

.school-img-photo.pink-border {
    border: 10px solid #e4dbff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.school-title {
    color: #333;
    /* Dark grey as requested */
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 1.5;
}

.school-text p {
    font-size: 17px;
    line-height: 1.7;
    color: #333;
}


.school-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.feature-img-placeholder {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background-color: #eee;
    margin-bottom: 30px;
    position: relative;
    /* Simulating the number badge inclusion */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-weight: bold;
    font-size: 1.5rem;
}

.feature-img {
    width: 250px;
    height: auto;
    margin-bottom: 30px;
    display: block;
}

.feature-title {
    font-size: 23px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #333;
}

.feature-desc {
    font-size: 17px;
    line-height: 1.7;
    text-align: left;
    /* Text aligns left in the block */
    width: 100%;
}

.lesson-steps {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 60px;
}

.lesson-step {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    border: 4px solid;
    border-radius: 20px;
    background-color: #fffaf0;
    /* Lightest yellow base, overridden below or similar */
    background: #fff;
    overflow: hidden;
    padding: 30px 40px;
    gap: 40px;
}

.lesson-step.border-yellow {
    border-color: #ffcc00;
    background-color: #fffae6;
}

.lesson-step.border-blue {
    border-color: #0099ff;
    background-color: #e6f7ff;
}

.lesson-step.border-green {
    border-color: #66cc33;
    background-color: #f0fff0;
}

.lesson-step.border-pink {
    border-color: #ff99cc;
    background-color: #fff0f5;
}

.step-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    /* Horizontal layout */
    align-items: center;
    /* Vertical center alignment */
    gap: 30px;
    /* Space between icon and text */
}

.step-icon {
    width: 100px;
    height: auto;
    flex-shrink: 0;
}

.step-desc {
    font-size: 17px;
    line-height: 1.7;
    color: #333;
}

.step-img {
    flex: 0 0 400px;
    /* Fixed width for image container roughly */
}

.step-img .img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 250px;
    border-radius: 10px;
    background-color: #ddd;
}

.step-img-photo {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}


.recommend-box {
    border: 10px solid #ddd;
    border-radius: 30px;
    padding: 60px;
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 50px;
    background: #fff;
    /* overflow: hidden; */
}

.recommend-content {
    flex: 1;
    z-index: 2;
    display: flex;
    /* Enable flex for inner content */
    gap: 40px;
    align-items: center;
}

.recommend-text {
    flex: 1;
}

.recommend-title-img-placeholder {
    font-size: 30px;
    font-weight: 700;
    color: #ff6666;
    /* Reddish color for title */
    text-align: center;
    margin-bottom: 40px;
    background: #eee;
    padding: 10px;
    border-radius: 10px;
}

.recommend-list {
    list-style: none;
    padding: 0;
}

.recommend-list li {
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 15px;
    padding-left: 20px;
    position: relative;
    line-height: 1.7;
}

.recommend-list li::before {
    content: '●';
    color: #333;
    position: absolute;
    left: 0;
    top: 0;
}

.recommend-img {
    flex: 0 0 45%;
    /* Large width for image */
    max-width: 500px;
}

.recommend-img-photo {
    width: 100%;
    height: auto;
    display: block;
}


/* Mobile Responsive for Recommend Section */
@media (max-width: 768px) {
    .recommend-title-img-placeholder {
        font-size: 20px;
    }

    .recommend-box {
        padding: 30px 20px;
        flex-direction: column;
    }

    .recommend-content {
        flex-direction: column;
        gap: 30px;
    }

    .recommend-img {
        flex: auto;
        width: 100%;
        max-width: 100%;
    }
}


.price-box {
    background-color: #eefaff;
    /* Light purple background */
    border-radius: 20px;
    padding: 20px 40px 60px;
}

.price-top-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.info-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}

.price-label {
    background-color: #1689bd;
    /* Dark purple */
    color: #fff;
    padding: 10px 60px;
    border-radius: 30px;
    /* Pill shape */
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 15px;
    text-align: center;
    min-width: 200px;
}

.price-label.center {
    margin: 40px auto 30px;
    display: table;
    /* To center with margin auto */
    padding: 10px 80px;
}

.target-text {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.admission-text {
    font-weight: 700;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.admission-text .price-val {
    font-size: 24px;
}

.admission-text .note {
    font-size: 14px;
    font-weight: normal;
}

.price-separator {
    border: none;
    border-top: 2px solid #590f70;
    margin: 0;
}

.course-type-title {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.course-table {
    display: grid;
    gap: 2px;
    /* Gap for border effect if using bg color on grid? No, lets use gap for separation */
    background-color: #999;
    /* Border color for grid items if using gap trick, or just styled items */
    background-color: transparent;
    border: 1px solid #333;
    margin-bottom: 30px;
}

.course-table.two-col {
    grid-template-columns: 1fr 1fr;
}

.course-table.one-col {
    grid-template-columns: 1fr;
}

.table-item {
    background-color: #fff;
    text-align: center;
    border-right: 1px solid #333;
    /* Manual border handling */
}

/* Remove right border from last item in row */
.course-table.two-col .table-item:last-child {
    border-right: none;
}

.t-header {
    background-color: #b6e8ff;
    /* Lighter purple Header */
    padding: 15px;
    border-bottom: 1px solid #333;
    height: 80px;
    /* Fixed height for alignment */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.t-header h4 {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

.t-header p {
    font-size: 13px;
    color: #333;
}

.t-price {
    padding: 30px;
    font-size: 22px;
    font-weight: 700;
    color: #333;
}


.schedule-box-frame {
    border: 15px solid #ccc;
    /* Thick grey border */
    padding: 60px 40px;
    position: relative;
    background: #fff;
    margin: 20px;
    /* To allow space for absolute positioned triangles if they stick out, though design has them inside mostly */
}

/* Corner Triangles */
.corner-triangle {
    position: absolute;
    width: 80px;
    height: 80px;
    background: #00bfff;
    /* Bright blue */
    z-index: 10;
}

.corner-triangle.top-left {
    top: -25px;
    /* Adjust to overlap border */
    left: -25px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.corner-triangle.bottom-right {
    bottom: -25px;
    right: -25px;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.schedule-main-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #00bfff;
    /* Blue title */
    margin-bottom: 50px;
    letter-spacing: 0.1em;
}

.schedule-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.schedule-item {
    width: 300px;
    /* Fixed width for consistency */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Day Icon */
.day-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    background: #fff;
}

.day-icon.icon-yellow {
    color: #ffcc00;
    border-color: #ffcc00;
}

.day-icon.icon-blue {
    color: #0099ff;
    border-color: #0099ff;
}

.day-icon.icon-green {
    color: #66cc33;
    border-color: #66cc33;
}

.day-icon.icon-orange {
    color: #ff9966;
    border-color: #ff9966;
}

.day-icon.icon-pink {
    color: #ff99cc;
    border-color: #ff99cc;
}


/* Schedule Table */
.schedule-table {
    width: 100%;
    border: 1px solid #999;
    border-radius: 5px;
    overflow: hidden;
}

.s-row {
    display: flex;
    height: 45px;
    border-bottom: 1px solid #999;
    align-items: stretch;
}

.s-row:last-child {
    border-bottom: none;
}

.s-col-label {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    border-right: 1px solid #999;
}

.s-col-name {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fffcf5;
    /* Default light bg */
    background: #fff;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    border-right: 1px solid #999;
}

.s-col-time {
    width: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fffcf5;
    /* Default light bg */
    background: #fff;
    font-size: 18px;
    color: #333;
}

/* Row Background Colors per Day Item */
/* Tue - Yellowish */
.item-tue .s-col-label {
    background-color: #ffcc00;
}

.item-tue .s-col-name,
.item-tue .s-col-time {
    background-color: #fff9e6;
}

/* Wed - Blueish */
.item-wed .s-col-label {
    background-color: #00bfff;
}

.item-wed .s-col-name,
.item-wed .s-col-time {
    background-color: #e6f7ff;
}

/* Thu - Greenish */
.item-thu .s-col-label {
    background-color: #66cc33;
}

.item-thu .s-col-name,
.item-thu .s-col-time {
    background-color: #f0fff0;
}

/* Fri - Orangish */
.item-fri .s-col-label {
    background-color: #ff9966;
}

.item-fri .s-col-name,
.item-fri .s-col-time {
    background-color: #fff4ec;
}

/* Sat - Pinkish */
.item-sat .s-col-label {
    background-color: #ff99cc;
}

.item-sat .s-col-name,
.item-sat .s-col-time {
    background-color: #fff0f5;
}




/* Trial Application Section */
.school-trial-section {
    padding-bottom: 100px;
}

.schedule-box-frame.green-theme {
    border-color: #ccc;
    /* Keep same border color as blue frame? Or maybe green? Design shows grey frame. */
}

.corner-triangle.green {
    background-color: #76d119;
    /* Green from design */
}

.schedule-main-title.green-text {
    color: #76d119;
}

.trial-desc-area {
    margin-bottom: 50px;
    line-height: 1.8;
    color: #333;
}

/* Refactored Trial Flow */
.trial-flow-area {
    display: flex;
    /* Horizontal layout for desktop */
    justify-content: space-between;
    gap: 20px;
    width: 98%;
    /* Match user's previous adjustment if needed, or 100% */
}

.step-group {
    display: flex;
    flex-direction: column;
}

.step-group.step-1,
.step-group.step-2 {
    flex: 2;
    /* Takes 2/5 of space roughly */
}

.step-group.step-3 {
    flex: 1;
    /* Takes 1/5 of space roughly */
}

/* Step Headers */
.step-label {
    background: #76d119;
    color: #fff;
    padding: 10px 0;
    text-align: center;
    font-weight: bold;
    height: 40px;
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 15px;
    width: 100%;
}

.step-label.label-1,
.step-label.label-2 {
    border-right: 1px solid #fff;
    /* Restoring border separator */
}

.step-label.label-3 {
    clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
    background: #76d119;
    padding-right: 20px;
    width: 118%;
    /* Keep extended width for arrow effect */
}

/* Step Items Grid (Internal) */
.step-items-grid {
    display: grid;
    gap: 10px;
    height: 100%;
    /* Fill available height */
}

.step-items-grid.col-2 {
    grid-template-columns: 1fr 1fr;
}

.step-items-grid.col-1 {
    grid-template-columns: 1fr;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .trial-flow-area {
        flex-direction: column;
        gap: 40px;
    }

    .step-group.step-1,
    .step-group.step-2,
    .step-group.step-3 {
        flex: auto;
        width: 100%;
    }

    .step-label.label-3 {
        width: 100%;
        /* Reset width on mobile */
        clip-path: none;
        /* Remove arrow shape on mobile if desired, or keep it. User sample showed standard box? Let's check user image. User image showed Step 1 header then 2 items. */
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        /* Reset clip path to rectangle */
    }

    .step-label.label-1,
    .step-label.label-2 {
        border-right: none;
    }
}

.trial-link-item {
    background-color: #eafce3;
    /* Very light green */
    border: 2px solid #bcefaa;
    /* Light green border */
    padding: 30px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s;
    height: 100%;
}

.trial-link-item:hover {
    background-color: #d8f5cc;
}

.link-title {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 20px;
    text-align: center;
}

.link-icon-box {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-icon-placeholder {
    color: #76d119;
    font-weight: bold;
    border: 2px solid #76d119;
    padding: 5px;
    border-radius: 4px;
    font-size: 10px;
}

.mail-icon-img {
    width: 40px;
    height: auto;
}

.link-type {
    font-size: 17px;
    color: #7a7a7a;
    font-weight: bold;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    /* Previous styles ... */

    /* Trial Section Mobile */
    .trial-links-grid {
        grid-template-columns: 1fr 1fr;
        /* 2 cols on mobile? */
        gap: 15px;
    }

    .trial-link-item.contact {
        grid-column: span 2;
        /* Full width for contact on mobile */
    }

    .trial-steps-header {
        flex-direction: column;
        gap: 10px;
        background: transparent;
        filter: none;
    }

    .step-label {
        width: 100%;
        margin: 0;
        border: none;
        clip-path: none !important;
        /* Remove arrow shape on mobile */
        border-radius: 5px;
    }

    .step-label.label-1,
    .step-label.label-2,
    .step-label.label-3 {
        flex: auto;
        padding-right: 0;
        margin-bottom: 10px;
    }
}


/* Trial Application Section */
.school-trial-section {
    padding-bottom: 100px;
}

.schedule-box-frame.green-theme {
    border-color: #ccc;
    /* Keep same border color as blue frame? Or maybe green? Design shows grey frame. */
}

.corner-triangle.green {
    background-color: #76d119;
    /* Green from design */
}

.schedule-main-title.green-text {
    color: #76d119;
}


.trial-steps-header {
    display: flex;
    background-color: #76d119;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 20px;
    padding: 15px 0;
    position: relative;
    /* To create arrow shape */
    /* Clip path might be easier or pseudo elements. Let's do simple block first or clip-path arrow if requested. The image shows a continuous bar with divisions and an arrow at the end. */
}

.trial-steps-header {
    background: transparent;
    padding: 0;
    margin: 0;
    gap: 2px;
    /* Gap for separator line */
    justify-content: space-between;
}

.step-label {
    background-color: #76d119;
    color: #fff;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Flex grow */
}

.step-label.label-1 {
    width: 100%;
    /* Approx width cover 2 cols */
}

.step-label.label-2 {
    width: 100%;
    /* Approx width cover 2 cols */
}

.step-label.label-3 {
    width: 100%;
    /* Approx width cover 1 col */
    position: relative;
}

/* Arrow effect on last item */
.step-label.arrow {
    clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
    /* Since its just the end, maybe we just use a pseudo element for the tip?
       Or apply clip-path to the whole bar? 
       The image shows a large green arrow bar spanning the width.
       Let's try a different approach: Flex container IS the arrow bar.
    */
}

/* Re-doing header bar to match visual better */
.trial-steps-header {
    display: flex;
    margin-bottom: 15px;
    position: relative;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.1));
}

.step-label {
    background: #76d119;
    color: #fff;
    padding: 10px 0;
    text-align: center;
    font-weight: bold;
    position: relative;
    height: 40px;
    line-height: 20px;
    /* Adjust vertical align */
}

.step-label.label-1 {
    flex: 2;
    margin-right: 2px;
    border-right: 1px solid #fff;
}

.step-label.label-2 {
    flex: 2;
    margin-right: 2px;
    border-right: 1px solid #fff;
}

.step-label.label-3 {
    flex: 1;
    clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
    /* Arrow tip roughly */
    background: #76d119;
    padding-right: 20px;
}

/* Ideally:
   Step 1 and 2 are rectangles.
   Step 3 has an arrow point.
   But if they are fixed width relative to the grid below... 
   Grid below is 5 columns essentially (2 for step 1, 2 for step 2, 1 for step 3).
*/

.trial-link-item {
    background-color: #eafce3;
    /* Very light green */
    border: 2px solid #bcefaa;
    /* Light green border */
    padding: 30px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s;
    height: 100%;
}

.trial-link-item:hover {
    background-color: #d8f5cc;
}


.link-icon-box {
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdf-icon-placeholder {
    color: #76d119;
    font-weight: bold;
    border: 2px solid #76d119;
    padding: 5px;
    border-radius: 4px;
    font-size: 10px;
}

.mail-icon-placeholder {
    color: #76d119;
    font-size: 24px;
}





/* Mobile Responsive */
@media (max-width: 768px) {
    .price-box {
        padding: 20px 15px;
    }

    .price-top-info {
        flex-direction: column;
        gap: 20px;
    }

    .info-col {
        padding: 10px 0;
        border-bottom: 1px solid #ccc;
    }

    .info-col:last-child {
        border-bottom: none;
    }

    .price-label {
        font-size: 16px;
        min-width: 150px;
        padding: 10px 30px;
    }

    .target-text {
        font-size: 16px;
        text-align: center;
    }

    .admission-text {
        flex-direction: column;
        gap: 5px;
    }

    .course-table.two-col {
        grid-template-columns: 1fr;
    }

    .course-table.two-col .table-item {
        border-right: none;
        border-bottom: 1px solid #333;
    }

    .course-table.two-col .table-item:last-child {
        border-bottom: none;
    }

    .price-course-area {
        overflow-x: auto;
        /* Just in case */
    }

    .school-intro-section {
        padding: 50px 0;
    }

    .school-row,
    .school-row.reverse {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 60px;
    }

    .school-img {
        width: 100%;
    }

    .school-img .img-placeholder {
        height: 200px;
        border-width: 6px;
        border-radius: 15px;
    }

    .school-title {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .school-text p {
        font-size: 15px;
    }

    /* Features Mobile */
    .school-features-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    /* Lesson Mobile */
    .lesson-step {
        flex-direction: column-reverse;
        /* Image on top? Or bottom. Usually image on top or bottom. Reference image has image on right. Mobile usually stack. Let's stack image top or bottom. Intro had image top. Let's put image top via column-reverse or just column if html order was img then text. HTML is text then img. So column-reverse puts img on top. */
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .step-img {
        flex: auto;
        width: 100%;
    }

    .step-content {
        flex-direction: column;
    }

    .step-icon-placeholder {
        margin: 0 auto 20px;
    }

    /* Recommend Mobile */
    .recommend-box {
        flex-direction: column;
        padding: 30px 20px;
        gap: 30px;
        border-width: 5px;
        /* Reduced from 10px */
    }

    .recommend-img .img-placeholder {
        min-height: 200px;
    }

    /* Schedule Mobile */
    .schedule-box-frame {
        padding: 40px 15px;
        border-width: 5px;
        /* Reduced from 10px */
        margin: 10px 0;
    }

    .schedule-main-title {
        font-size: 20px;
        margin-bottom: 30px;
    }

    .schedule-grid {
        gap: 30px;
    }

    .corner-triangle.top-left {
        top: -15px;
        left: -15px;
        width: 50px;
        height: 50px;
    }

    .corner-triangle.bottom-right {
        bottom: -15px;
        right: -15px;
        width: 50px;
        height: 50px;
    }
}