/* ==========================================================
   RITHCABS
   TERMS & CONDITIONS STYLESHEET

   File:
   assets/css/terms-and-conditions.css
========================================================== */


/* ==========================================================
   1. ROOT VARIABLES
========================================================== */

:root {

    --terms-navy: #06283D;
    --terms-navy-dark: #041F30;
    --terms-navy-soft: #0B344B;

    --terms-yellow: #FFB800;
    --terms-yellow-dark: #E7A600;
    --terms-yellow-soft: #FFF5D9;

    --terms-white: #FFFFFF;

    --terms-bg: #F5F8FB;
    --terms-card-bg: #FFFFFF;

    --terms-text: #06283D;
    --terms-text-soft: #61798C;
    --terms-text-light: #8A9BA8;

    --terms-border: #E2EAF0;

    --terms-shadow:
        0 12px 35px rgba(6, 40, 61, 0.07);

    --terms-shadow-hover:
        0 18px 45px rgba(6, 40, 61, 0.11);

}


/* ==========================================================
   2. PAGE BASE
========================================================== */

.terms-page {

    width: 100%;

    margin: 0;

    padding: 0;

    background: var(--terms-bg);

    color: var(--terms-text);

    font-family: "Inter", sans-serif;

}


.terms-page *,
.terms-page *::before,
.terms-page *::after {

    box-sizing: border-box;

}


/* ==========================================================
   3. CONTAINER
========================================================== */

.terms-container {

    width: calc(100% - 80px);

    max-width: 1440px;

    margin: 0 auto;

}


/* ==========================================================
   4. HERO SECTION
========================================================== */

.terms-hero {

    position: relative;

    width: 100%;

    padding: 78px 0 74px;

    overflow: hidden;

    background:

        radial-gradient(circle at 95% 10%,
            rgba(255, 184, 0, 0.08) 0,
            rgba(255, 184, 0, 0.03) 18%,
            transparent 38%),

        linear-gradient(120deg,
            #06283D 0%,
            #073047 52%,
            #092E3E 100%);

}


/* ==========================================================
   5. HERO DECORATION
========================================================== */

.terms-hero::before {

    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    top: -150px;
    right: -110px;

    border: 1px solid rgba(255, 184, 0, 0.14);

    border-radius: 50%;

    pointer-events: none;

}


.terms-hero::after {

    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    right: 70px;
    bottom: -175px;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 50%;

    pointer-events: none;

}


.terms-hero .terms-container {

    position: relative;

    z-index: 2;

}


/* ==========================================================
   6. BREADCRUMB
========================================================== */

.terms-breadcrumb {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 34px;

    color: rgba(255, 255, 255, 0.58);

    font-size: 14px;

    font-weight: 600;

}


.terms-breadcrumb a {

    color: rgba(255, 255, 255, 0.72);

    text-decoration: none;

    transition: color 0.2s ease;

}


.terms-breadcrumb a:hover {

    color: var(--terms-yellow);

}


.terms-breadcrumb .breadcrumb-arrow {

    color: rgba(255, 255, 255, 0.34);

    font-size: 19px;

    line-height: 1;

}


.terms-breadcrumb span:last-child {

    color: var(--terms-yellow);

}


/* ==========================================================
   7. HERO LABEL
========================================================== */

.terms-label {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 17px;

    color: var(--terms-yellow);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.terms-label-line {

    display: block;

    width: 32px;

    height: 4px;

    background: var(--terms-yellow);

    border-radius: 20px;

}


/* ==========================================================
   8. HERO TITLE
========================================================== */

.terms-title {

    max-width: 900px;

    margin: 0 0 22px;

    color: var(--terms-white);

    font-size: 58px;

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -2.2px;

}


.terms-title span {

    color: var(--terms-yellow);

}


/* ==========================================================
   9. HERO DESCRIPTION
========================================================== */

.terms-description {

    width: 100%;

    max-width: 850px;

    margin: 0 0 34px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 17px;

    line-height: 1.9;

    font-weight: 400;

}


/* ==========================================================
   10. DATE CARD
========================================================== */

.terms-date-card {

    display: inline-flex;

    align-items: center;

    min-height: 72px;

    padding: 13px 20px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(8px);

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

}


/* ==========================================================
   11. DATE ITEM
========================================================== */

.terms-date-item {

    display: flex;

    align-items: center;

    gap: 12px;

}


.terms-date-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 10px;

    background: rgba(255, 184, 0, 0.14);

    color: var(--terms-yellow);

    font-size: 17px;

}


.terms-date-item>div:last-child {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.terms-date-label {

    color: rgba(255, 255, 255, 0.50);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.8px;

}


.terms-date-item strong {

    color: var(--terms-white);

    font-size: 13px;

    font-weight: 700;

}


.terms-date-divider {

    width: 1px;

    height: 36px;

    margin: 0 22px;

    background: rgba(255, 255, 255, 0.15);

}


/* ==========================================================
   12. CONTENT SECTION
========================================================== */

.terms-content-section {

    width: 100%;

    padding: 60px 0 90px;

    background: var(--terms-bg);

}


/* ==========================================================
   13. MAIN LAYOUT
========================================================== */

.terms-layout {

    display: grid;

    grid-template-columns:
        290px minmax(0, 1fr);

    gap: 30px;

    align-items: start;

}


/* ==========================================================
   14. SIDEBAR
========================================================== */

.terms-sidebar {

    width: 100%;

    position: sticky;

    top: 110px;

}


/* ==========================================================
   15. SIDEBAR CARD
========================================================== */

.terms-sidebar-card {

    width: 100%;

    overflow: hidden;

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

    border-radius: 18px;

    background: var(--terms-white);

    box-shadow: var(--terms-shadow);

}


/* ==========================================================
   16. SIDEBAR TITLE
========================================================== */

.terms-sidebar-title {

    min-height: 68px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 20px;

    background: var(--terms-navy);

    color: var(--terms-white);

    font-size: 15px;

    font-weight: 700;

}


.terms-sidebar-icon {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 10px;

    background: rgba(255, 184, 0, 0.10);

    color: var(--terms-yellow);

    font-size: 15px;

}


/* ==========================================================
   17. SIDEBAR NAVIGATION
========================================================== */

.terms-nav {

    display: flex;

    flex-direction: column;

    padding: 10px;

}


.terms-nav a {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 46px;

    margin-bottom: 3px;

    padding: 10px 13px;

    border-radius: 10px;

    color: var(--terms-text-soft);

    text-decoration: none;

    font-size: 13px;

    line-height: 1.4;

    font-weight: 600;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        padding-left 0.2s ease;

}


.terms-nav a:last-child {

    margin-bottom: 0;

}


.terms-nav a:hover {

    padding-left: 17px;

    background: var(--terms-yellow-soft);

    color: var(--terms-navy);

}


.terms-nav a.active {

    background: var(--terms-yellow-soft);

    color: var(--terms-navy);

    font-weight: 700;

}


.terms-nav a.active::before {

    content: "";

    position: absolute;

    left: 0;

    top: 50%;

    width: 3px;

    height: 22px;

    transform: translateY(-50%);

    border-radius: 0 4px 4px 0;

    background: var(--terms-yellow);

}


/* ==========================================================
   18. RIGHT CONTENT
========================================================== */

.terms-content {

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 22px;

}


/* ==========================================================
   19. TERMS CARD
========================================================== */

.terms-card {

    width: 100%;

    overflow: hidden;

    scroll-margin-top: 120px;

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

    border-radius: 18px;

    background: var(--terms-card-bg);

    box-shadow: var(--terms-shadow);

    transition:
        box-shadow 0.25s ease,
        border-color 0.25s ease;

}


.terms-card:hover {

    border-color: #D6E0E8;

    box-shadow: var(--terms-shadow-hover);

}


/* ==========================================================
   20. CARD HEADING
========================================================== */

.terms-card-heading {

    display: flex;

    align-items: center;

    gap: 16px;

    min-height: 84px;

    padding: 20px 25px;

    border-bottom: 1px solid var(--terms-border);

    background:
        linear-gradient(90deg,
            #FBFCFD 0%,
            #FFFFFF 100%);

}


/* ==========================================================
   21. SECTION NUMBER
========================================================== */

.terms-number {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 12px;

    background: var(--terms-yellow);

    color: var(--terms-navy);

    box-shadow:
        0 5px 14px rgba(255, 184, 0, 0.18);

    font-size: 14px;

    font-weight: 800;

}


/* ==========================================================
   22. CARD HEADING TEXT
========================================================== */

.terms-card-heading>div:last-child {

    min-width: 0;

}


.terms-card-heading h2 {

    margin: 0 0 4px;

    color: var(--terms-navy);

    font-size: 20px;

    line-height: 1.3;

    font-weight: 750;

}


.terms-card-heading p {

    margin: 0;

    color: var(--terms-text-light);

    font-size: 12px;

    line-height: 1.5;

    font-weight: 500;

}


/* ==========================================================
   23. CARD BODY
========================================================== */

.terms-card-body {

    padding: 25px;

}


.terms-card-body>p {

    margin: 0 0 17px;

    color: var(--terms-text-soft);

    font-size: 14px;

    line-height: 1.85;

    font-weight: 400;

}


.terms-card-body>p:last-child {

    margin-bottom: 0;

}


/* ==========================================================
   24. TERMS LIST
========================================================== */

.terms-list {

    display: flex;

    flex-direction: column;

    gap: 11px;

    margin: 20px 0 0;

    padding: 0;

    list-style: none;

}


/* ==========================================================
   25. TERMS LIST ITEM
========================================================== */

.terms-list li {

    position: relative;

    min-height: 42px;

    display: flex;

    align-items: flex-start;

    padding:
        11px 14px 11px 43px;

    border: 1px solid #E8EEF2;

    border-radius: 10px;

    background: #F9FBFC;

    color: var(--terms-text-soft);

    font-size: 13px;

    line-height: 1.65;

    font-weight: 500;

}


/* ==========================================================
   26. TERMS LIST CHECK ICON
========================================================== */

.terms-list li::before {

    content: "✓";

    position: absolute;

    left: 14px;

    top: 11px;

    width: 19px;

    height: 19px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--terms-yellow-soft);

    color: var(--terms-yellow-dark);

    font-size: 11px;

    font-weight: 900;

}


/* ==========================================================
   27. PRIVACY POLICY LINK BOX
========================================================== */

.terms-link-box {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 7px;

    margin-top: 22px;

    padding: 20px;

    border: 1px solid #FFE19A;

    border-radius: 14px;

    background: var(--terms-yellow-soft);

}


.terms-link-box strong {

    color: var(--terms-navy);

    font-size: 16px;

    line-height: 1.4;

    font-weight: 800;

}


.terms-link-box span {

    max-width: 700px;

    color: var(--terms-text-soft);

    font-size: 13px;

    line-height: 1.7;

}


/* ==========================================================
   28. LINK BUTTON
========================================================== */

.terms-link-box a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 42px;

    margin-top: 8px;

    padding: 10px 18px;

    border: 1px solid var(--terms-yellow);

    border-radius: 10px;

    background: var(--terms-yellow);

    color: var(--terms-navy);

    text-decoration: none;

    font-size: 13px;

    font-weight: 750;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;

}


.terms-link-box a:hover {

    background: var(--terms-yellow-dark);

    border-color: var(--terms-yellow-dark);

    transform: translateY(-1px);

}


/* ==========================================================
   29. CONTACT BOX
========================================================== */

.terms-contact-box {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

    margin-top: 22px;

    padding: 22px;

    border-radius: 14px;

    background:
        linear-gradient(135deg,
            #06283D 0%,
            #09344E 100%);

}


/* ==========================================================
   30. CONTACT TEXT
========================================================== */

.terms-contact-box strong {

    color: var(--terms-white);

    font-size: 18px;

    font-weight: 800;

}


.terms-contact-box span {

    color: rgba(255, 255, 255, 0.65);

    font-size: 13px;

    line-height: 1.6;

}


/* ==========================================================
   31. CONTACT BUTTON
========================================================== */

.terms-contact-box a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 42px;

    margin-top: 10px;

    padding: 10px 18px;

    border: 1px solid var(--terms-yellow);

    border-radius: 10px;

    background: var(--terms-yellow);

    color: var(--terms-navy);

    text-decoration: none;

    font-size: 13px;

    font-weight: 750;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


.terms-contact-box a:hover {

    background: var(--terms-yellow-dark);

    transform: translateY(-1px);

}


/* ==========================================================
   32. TEXT SELECTION
========================================================== */

.terms-page ::selection {

    background: var(--terms-yellow);

    color: var(--terms-navy);

}


/* ==========================================================
   33. SMOOTH SCROLL
========================================================== */

html {

    scroll-behavior: smooth;

}


/* ==========================================================
   34. LARGE TABLET
========================================================== */

@media (max-width: 1100px) {

    .terms-container {

        width: calc(100% - 48px);

    }


    .terms-layout {

        grid-template-columns:
            250px minmax(0, 1fr);

        gap: 22px;

    }


    .terms-title {

        font-size: 52px;

    }


    .terms-description {

        max-width: 760px;

        font-size: 16px;

    }

}


/* ==========================================================
   35. TABLET
========================================================== */

@media (max-width: 900px) {

    .terms-hero {

        padding: 58px 0 60px;

    }


    .terms-title {

        font-size: 46px;

    }


    .terms-layout {

        display: block;

    }


    .terms-sidebar {

        position: relative;

        top: auto;

        margin-bottom: 25px;

    }


    .terms-sidebar-card {

        border-radius: 15px;

    }


    .terms-nav {

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 4px;

    }


    .terms-nav a {

        margin-bottom: 0;

    }


    .terms-content-section {

        padding: 45px 0 70px;

    }

}


/* ==========================================================
   36. MOBILE
========================================================== */

@media (max-width: 640px) {

    .terms-container {

        width: calc(100% - 30px);

    }


    /* ======================================================
       HERO
    ====================================================== */

    .terms-hero {

        padding: 42px 0 48px;

    }


    .terms-breadcrumb {

        margin-bottom: 25px;

        font-size: 12px;

    }


    .terms-label {

        margin-bottom: 13px;

        font-size: 11px;

        letter-spacing: 1.2px;

    }


    .terms-label-line {

        width: 26px;

        height: 3px;

    }


    .terms-title {

        margin-bottom: 17px;

        font-size: 38px;

        letter-spacing: -1.4px;

    }


    .terms-description {

        margin-bottom: 27px;

        font-size: 14px;

        line-height: 1.75;

    }


    /* ======================================================
       DATE CARD
    ====================================================== */

    .terms-date-card {

        width: 100%;

        display: flex;

        align-items: stretch;

        padding: 14px;

    }


    .terms-date-item {

        flex: 1;

        gap: 9px;

    }


    .terms-date-icon {

        width: 36px;

        height: 36px;

        border-radius: 8px;

        font-size: 14px;

    }


    .terms-date-label {

        font-size: 8px;

    }


    .terms-date-item strong {

        font-size: 11px;

    }


    .terms-date-divider {

        margin: 0 12px;

    }


    /* ======================================================
       CONTENT
    ====================================================== */

    .terms-content-section {

        padding: 30px 0 55px;

    }


    /* ======================================================
       SIDEBAR
    ====================================================== */

    .terms-sidebar {

        margin-bottom: 20px;

    }


    .terms-sidebar-title {

        min-height: 60px;

        padding: 12px 15px;

        font-size: 14px;

    }


    .terms-sidebar-icon {

        width: 34px;

        height: 34px;

    }


    .terms-nav {

        display: flex;

        flex-direction: column;

        padding: 8px;

    }


    .terms-nav a {

        min-height: 42px;

        padding: 9px 12px;

        font-size: 12px;

    }


    /* ======================================================
       CONTENT CARDS
    ====================================================== */

    .terms-content {

        gap: 16px;

    }


    .terms-card {

        border-radius: 14px;

    }


    .terms-card-heading {

        min-height: auto;

        padding: 17px;

        gap: 12px;

    }


    .terms-number {

        width: 42px;

        height: 42px;

        border-radius: 10px;

        font-size: 12px;

    }


    .terms-card-heading h2 {

        font-size: 17px;

    }


    .terms-card-heading p {

        font-size: 11px;

    }


    .terms-card-body {

        padding: 18px;

    }


    .terms-card-body>p {

        font-size: 13px;

        line-height: 1.75;

    }


    /* ======================================================
       LIST
    ====================================================== */

    .terms-list {

        gap: 9px;

        margin-top: 15px;

    }


    .terms-list li {

        padding:
            10px 12px 10px 39px;

        font-size: 12px;

        line-height: 1.65;

    }


    .terms-list li::before {

        left: 12px;

        top: 10px;

    }


    /* ======================================================
       BOXES
    ====================================================== */

    .terms-link-box,
    .terms-contact-box {

        padding: 17px;

    }

}


/* ==========================================================
   37. VERY SMALL MOBILE
========================================================== */

@media (max-width: 420px) {

    .terms-container {

        width: calc(100% - 24px);

    }


    .terms-title {

        font-size: 34px;

    }


    /* ======================================================
       STACK DATES
    ====================================================== */

    .terms-date-card {

        flex-direction: column;

        gap: 13px;

    }


    .terms-date-divider {

        width: 100%;

        height: 1px;

        margin: 0;

    }


    .terms-date-item {

        width: 100%;

    }


    /* ======================================================
       CARD HEADING
    ====================================================== */

    .terms-card-heading {

        align-items: flex-start;

    }


    .terms-number {

        width: 39px;

        height: 39px;

        flex: 0 0 39px;

    }

}


/* ==========================================================
   38. PRINT MODE
========================================================== */

@media print {

    .terms-hero {

        padding: 20px 0;

        background: #FFFFFF !important;

    }


    .terms-title,
    .terms-title span,
    .terms-description,
    .terms-breadcrumb,
    .terms-label,
    .terms-date-item strong,
    .terms-date-label {

        color: #000000 !important;

    }


    .terms-sidebar {

        display: none;

    }


    .terms-layout {

        display: block;

    }


    .terms-card {

        box-shadow: none;

        break-inside: avoid;

    }


    .terms-content-section {

        padding: 20px 0;

    }

}