/* =====================================================
            TORA TRAILS — TERMS.CSS
       MATCHING EXISTING LIGHT GLASS THEME
===================================================== */


/* =============================
        TERMS PAGE
============================= */

.terms-page{

    position:relative;

    min-height:100vh;

    padding:150px 0 100px;

    overflow:hidden;

}


/* Background decorative glow */

.terms-page::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

    background:#A5C8FF;

    filter:blur(150px);

    opacity:.22;

    top:80px;
    left:-250px;

    pointer-events:none;

}


.terms-page::after{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    border-radius:50%;

    background:#C4B5FD;

    filter:blur(150px);

    opacity:.18;

    bottom:100px;
    right:-200px;

    pointer-events:none;

}


/* =============================
        CONTAINER
============================= */

.terms-container{

    position:relative;

    z-index:2;

    width:min(1050px,92%);

    margin:auto;

}


/* =============================
        BACK BUTTON
============================= */

.back-home{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:55px;

    padding:12px 20px;

    background:rgba(255,255,255,.55);

    border:1px solid var(--glass-border);

    border-radius:50px;

    color:var(--text);

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    box-shadow:0 10px 30px rgba(80,100,140,.08);

    backdrop-filter:blur(15px);

    -webkit-backdrop-filter:blur(15px);

    transition:var(--transition);

}


.back-home i{

    color:var(--primary);

    transition:var(--transition);

}


.back-home:hover{

    transform:translateX(-5px);

    color:var(--primary);

    box-shadow:0 15px 35px rgba(79,141,255,.16);

}


.back-home:hover i{

    transform:translateX(-3px);

}


/* =============================
        TERMS HEADER
============================= */

.terms-header{

    max-width:800px;

    margin:0 auto 70px;

    text-align:center;

}


.terms-header .eyebrow{

    display:inline-block;

    margin-bottom:20px;

    padding:10px 20px;

    background:rgba(79,141,255,.12);

    border:1px solid rgba(79,141,255,.12);

    border-radius:50px;

    color:var(--primary);

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

}


.terms-header h1{

    margin-bottom:22px;

    font-family:'Space Grotesk',sans-serif;

    font-size:clamp(42px,6vw,72px);

    letter-spacing:-2px;

}


.terms-header h1 span{

    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}


.terms-header p{

    max-width:760px;

    margin:auto;

    color:var(--text-light);

    font-size:16px;

    line-height:1.8;

}


.terms-header p strong{

    color:var(--text);

}


/* =============================
        TERMS GLASS SECTION
============================= */

.terms-section{

    position:relative;

    margin-bottom:28px;

    padding:45px;

    background:var(--glass);

    border:1px solid var(--glass-border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    transition:var(--transition);

}


.terms-section:hover{

    transform:translateY(-5px);

    border-color:rgba(79,141,255,.3);

    box-shadow:

    0 25px 55px
    rgba(79,141,255,.15);

}


/* =============================
        SECTION TITLES
============================= */

.terms-section h2{

    position:relative;

    margin-bottom:35px;

    padding-bottom:18px;

    font-size:30px;

    color:var(--text);

    border-bottom:

    1px solid
    rgba(79,141,255,.12);

}


.terms-section h2::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-1px;

    width:90px;
    height:3px;

    border-radius:10px;

    background:

    linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

}


/* =============================
        TERMS ITEMS
============================= */

.terms-item{

    padding-bottom:28px;

    margin-bottom:28px;

    border-bottom:

    1px solid
    rgba(32,33,36,.08);

}


.terms-item:last-child{

    padding-bottom:0;

    margin-bottom:0;

    border-bottom:none;

}


.terms-item h3{

    margin-bottom:12px;

    font-size:18px;

    color:var(--text);

}


.terms-item p{

    color:var(--text-light);

    font-size:15px;

    line-height:1.85;

}


.terms-item strong{

    color:var(--text);

    font-weight:700;

}


/* =============================
        PERSONAL EXPENSE LIST
============================= */

.terms-list{

    list-style:none;

    margin-top:20px;

    padding:0;

}


.terms-list li{

    position:relative;

    margin-bottom:12px;

    padding-left:28px;

    color:var(--text-light);

    font-size:15px;

}


.terms-list li::before{

    content:"";

    position:absolute;

    left:0;
    top:8px;

    width:9px;
    height:9px;

    border-radius:50%;

    background:var(--primary);

    box-shadow:

    0 0 12px
    rgba(79,141,255,.45);

}


/* =============================
        PAYMENT TABLE
============================= */

.payment-table-wrapper{

    width:100%;

    overflow-x:auto;

    border-radius:20px;

    border:

    1px solid
    rgba(79,141,255,.12);

}


.payment-table{

    width:100%;

    min-width:550px;

    border-collapse:collapse;

    background:

    rgba(255,255,255,.35);

}


.payment-table th{

    padding:20px 25px;

    background:

    linear-gradient(
        135deg,
        rgba(79,141,255,.14),
        rgba(139,92,246,.10)
    );

    color:var(--primary);

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    text-align:left;

}


.payment-table td{

    padding:20px 25px;

    color:var(--text-light);

    font-size:15px;

    border-top:

    1px solid
    rgba(32,33,36,.07);

}


.payment-table td:last-child,

.payment-table th:last-child{

    text-align:right;

}


.payment-table td:last-child{

    color:var(--primary);

    font-weight:700;

}


/* =============================
        TOTAL PAYMENT
============================= */

.payment-total{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:25px;

    padding:22px;

    border-radius:20px;

    background:

    linear-gradient(
        135deg,
        rgba(79,141,255,.12),
        rgba(139,92,246,.08)
    );

    border:

    1px solid
    rgba(79,141,255,.18);

    color:var(--text);

    font-size:15px;

    font-weight:700;

}


.payment-total span{

    color:var(--primary);

    font-size:18px;

}


/* =============================
        CUSTOMER ACKNOWLEDGEMENT
============================= */

.acknowledgement{

    position:relative;

    margin-top:35px;

    padding:55px 40px;

    text-align:center;

    background:

    linear-gradient(
        135deg,
        rgba(79,141,255,.12),
        rgba(139,92,246,.10),
        rgba(255,255,255,.45)
    );

    border:

    1px solid
    rgba(255,255,255,.65);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

}


.acknowledgement i{

    display:flex;

    align-items:center;

    justify-content:center;

    width:65px;
    height:65px;

    margin:0 auto 22px;

    border-radius:50%;

    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:white;

    font-size:24px;

    box-shadow:

    0 15px 35px
    rgba(79,141,255,.25);

}


.acknowledgement h2{

    margin-bottom:18px;

    font-size:30px;

}


.acknowledgement p{

    max-width:720px;

    margin:auto;

    color:var(--text-light);

    font-size:15px;

    line-height:1.85;

}


/* =====================================================
                    MOBILE
===================================================== */

@media(max-width:768px){

    .terms-page{

        padding:120px 0 70px;

    }


    .terms-container{

        width:min(92%,650px);

    }


    .back-home{

        margin-bottom:40px;

        padding:10px 17px;

        font-size:13px;

    }


    .terms-header{

        margin-bottom:50px;

    }


    .terms-header .eyebrow{

        font-size:10px;

        letter-spacing:1.5px;

        padding:9px 16px;

    }


    .terms-header h1{

        font-size:42px;

        letter-spacing:-1.5px;

    }


    .terms-header p{

        font-size:14px;

        line-height:1.75;

    }


    .terms-section{

        padding:28px 22px;

        margin-bottom:20px;

        border-radius:22px;

    }


    .terms-section h2{

        margin-bottom:25px;

        padding-bottom:15px;

        font-size:23px;

    }


    .terms-section h2::after{

        width:65px;

    }


    .terms-item{

        padding-bottom:22px;

        margin-bottom:22px;

    }


    .terms-item h3{

        font-size:16px;

    }


    .terms-item p,

    .terms-list li{

        font-size:14px;

        line-height:1.75;

    }


    .payment-table th,

    .payment-table td{

        padding:16px;

    }


    .payment-table th{

        font-size:10px;

    }


    .payment-table td{

        font-size:13px;

    }


    .payment-total{

        flex-direction:column;

        gap:5px;

        padding:18px;

        font-size:13px;

    }


    .acknowledgement{

        margin-top:25px;

        padding:40px 22px;

        border-radius:22px;

    }


    .acknowledgement i{

        width:55px;
        height:55px;

        font-size:20px;

    }


    .acknowledgement h2{

        font-size:23px;

    }


    .acknowledgement p{

        font-size:14px;

        line-height:1.75;

    }

}

/* =========================================
   FIX TERMS HEADER OVERLAPPING
========================================= */

.terms-page {
    display: block !important;
}


.terms-container {
    display: block !important;
    position: relative !important;
}


.terms-header {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    max-width: 850px !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 auto 70px !important;

    padding: 0 !important;

    text-align: center !important;

    transform: none !important;
}


.terms-header .eyebrow {
    display: inline-block !important;

    position: relative !important;

    width: auto !important;
    height: auto !important;

    margin: 0 0 20px !important;
}


.terms-header h1 {
    display: block !important;

    position: relative !important;

    width: 100% !important;

    margin: 0 0 22px !important;

    padding: 0 !important;

    text-align: center !important;

    line-height: 1.1 !important;

    transform: none !important;
}


.terms-header p {
    display: block !important;

    position: relative !important;

    width: 100% !important;
    max-width: 760px !important;

    margin: 0 auto !important;

    padding: 0 !important;

    text-align: center !important;

    line-height: 1.8 !important;

    transform: none !important;
}


/* Keep Terms content completely below header */

.terms-section {
    position: relative !important;

    width: 100% !important;

    clear: both !important;
}


/* Remove the unnecessary huge background shapes */

.terms-page::before,
.terms-page::after {
    display: none !important;
}


/* Mobile fix */

@media (max-width: 768px) {

    .terms-header {
        width: 100% !important;

        margin-bottom: 50px !important;
    }


    .terms-header h1 {
        font-size: clamp(38px, 11vw, 52px) !important;

        line-height: 1.1 !important;
    }


    .terms-header p {
        width: 100% !important;

        font-size: 14px !important;

        line-height: 1.75 !important;

        padding: 0 5px !important;
    }

}
/* =========================================
   PAYMENT TABLE — NO HORIZONTAL SCROLL
========================================= */

.payment-table-wrapper {
    width: 100%;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(79, 141, 255, 0.12);
}


.payment-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    table-layout: fixed;

    background: rgba(255, 255, 255, 0.35);
}


.payment-table th {
    padding: 18px 15px;

    background: linear-gradient(
        135deg,
        rgba(79, 141, 255, 0.14),
        rgba(139, 92, 246, 0.10)
    );

    color: var(--primary);

    font-size: 12px;
    font-weight: 700;

    line-height: 1.5;

    text-align: left;
}


.payment-table th:first-child,
.payment-table td:first-child {
    width: 58%;
}


.payment-table th:last-child,
.payment-table td:last-child {
    width: 42%;
    text-align: center;
}


.payment-table td {
    padding: 18px 15px;

    color: var(--text-light);

    font-size: 15px;

    border-top: 1px solid rgba(32, 33, 36, 0.07);

    word-wrap: break-word;
}