/* ==========================================================================
   EgyTours — public site stylesheet
   Replaces /UI/css/style.css (3,183 lines, many duplicates and typos).
   Sections: 1 Tokens · 2 Base · 3 Layout helpers · 4 Buttons · 5 Header
   6 Hero · 7 Search · 8 Section titles · 9 Destination grid · 10 Cards
   11 Partners · 12 Footer · 13 Floating actions · 14 Forms · 15 Inner pages
   16 Slick · 17 Responsive · 18 RTL
   Uses logical properties (inline-start/end) so RTL works with dir="rtl".
   ========================================================================== */

/* 1. Tokens -------------------------------------------------------------- */
:root {
  --c-primary: #1ec28b;
  --c-primary-soft: #d9f5eb;
  --c-accent: #ff8901;
  --c-mint: #c6f6e7;
  --c-mint-strong: #b2f3df;
  --c-ink: #202124;
  --c-text: #333;
  --c-muted: #787878;
  --c-line: #ddd;
  --c-line-soft: #eee;
  --c-surface: #fff;
  --c-star: #ffb700;
  --c-danger: #ea001b;

  --font-base: 'DM Sans', 'Noto Sans Arabic', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 50px;

  --shadow-card: 0 10px 30px -12px rgb(0 0 0 / .18);
  --shadow-cta: 10px 43px 97px -8px rgb(30 194 139 / 1);
  --ease: .3s ease;

  --topbar-h: 38px;
  --header-h: 80px;
}

/* 2. Base ---------------------------------------------------------------- */
html { overflow-x: hidden; scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0 !important;               /* Bootstrap 3 adds padding on .modal-open */
  font-family: var(--font-base);
  color: var(--c-ink);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
}

ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; color: var(--c-ink); }
img { max-width: 100%; }

a { text-decoration: none; transition: color var(--ease), background-color var(--ease), border-color var(--ease), transform var(--ease); }
a:hover, a:focus { text-decoration: none; }
button { transition: background-color var(--ease), color var(--ease); }

:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

.sr-only-focusable:focus { position: static; }
.skip-link {
  position: absolute; inset-inline-start: 8px; top: -60px; z-index: 10000;
  background: var(--c-ink); color: #fff; padding: 8px 14px; border-radius: var(--radius-sm);
}
.skip-link:focus { top: 8px; color: #fff; }

/* 3. Layout helpers (kept for existing Bootstrap-3 markup) --------------- */
.remove-padding { padding-inline: 0; }
.remove-margin { margin: 0 !important; }
.clearfix::after { content: ''; display: table; clear: both; }
.page-section { margin-block: 30px; }

/* 4. Buttons ------------------------------------------------------------- */
.btn-eg {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 30px; border: 0; border-radius: var(--radius-lg);
  background: var(--c-primary); color: #fff; font-size: 18px; cursor: pointer;
  box-shadow: var(--shadow-cta);
}
.btn-eg:hover, .btn-eg:focus { background: var(--c-accent); color: #fff; }

/* 5. Header -------------------------------------------------------------- */
.topbar { border-bottom: 1px solid var(--c-line); background: #fff; }
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--topbar-h); padding-inline: 15px;
}
.topbar a, .topbar button.link {
  font-size: 14px; font-weight: 700; color: var(--c-ink);
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.topbar a:hover, .topbar button.link:hover { color: var(--c-accent); }
.topbar__menu { display: flex; align-items: center; gap: 18px; }

.site-header {
  position: sticky; top: 0; z-index: 999;
  background: #fff; border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
  display: flex; align-items: center; gap: 24px;
  min-height: var(--header-h); padding-inline: 15px;
}
.brand { flex: none; display: block; }
.brand img { display: block; height: var(--header-h); width: 150px; object-fit: contain; }

.nav { flex: 1; }
.nav__list { display: flex; flex-wrap: wrap; align-items: center; column-gap: 22px; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 2px;
  padding-block: 28px; font-size: 14px; font-weight: 500; color: var(--c-ink);
}
.nav__link:hover, .nav__item:focus-within > .nav__link, .nav__item:hover > .nav__link { color: var(--c-accent); }

/* dropdowns (shared by nav, currency, language) */
.has-sub { position: relative; }
.sub-menu {
  position: absolute; inset-inline-start: 0; top: 100%; z-index: 1000;
  min-width: 190px; max-height: 70vh; overflow-y: auto;
  padding: 6px 0; background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
}
.sub-menu li { display: block; }
.sub-menu a, .sub-menu button {
  display: block; width: 100%; text-align: start; white-space: nowrap;
  padding: 7px 16px; font-size: 14px; font-weight: 500; color: var(--c-ink);
  background: none; border: 0; cursor: pointer; font-family: inherit;
}
.sub-menu li + li > a, .sub-menu li + li > button { border-top: 1px solid var(--c-line-soft); }
.sub-menu a:hover, .sub-menu button:hover { color: var(--c-accent); background: #fafafa; }

@media (hover: hover) and (min-width: 992px) {
  .has-sub:hover > .sub-menu, .has-sub:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
}
.has-sub.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; }

.nav-toggle { display: none; }
.nav__utility { display: none; }

/* 6. Hero ---------------------------------------------------------------- */

[dir='rtl'] .nav__link i, [dir='rtl'] .topbar i { margin-inline: 0; }
[dir='rtl'] .sub-menu { inset-inline-start: auto; inset-inline-end: 0; }
@media (max-width: 991px) {
  [dir='rtl'] .nav { transform: translateX(100%); }
  [dir='rtl'] .nav.open-menu, [dir='rtl'] .nav.is-open { transform: none; }
}


/* 17. Responsive --------------------------------------------------------- */
@media (max-width: 1366px) {
    .nav__link {
        font-size: 13px;
    }

    .nav__list {
        column-gap: 16px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .site-header__inner {
        gap: 14px;
    }

    .brand img {
        width: 120px;
    }

    .nav__list {
        column-gap: 12px;
    }

    .nav__link {
        padding-block: 16px;
        font-size: 12.5px;
    }
}

@media (max-width: 1200px) {
    .Package-main .col-xs-6 img {
        height: 130px;
    }

    .site-footer__cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .topbar {
        display: none;
    }

    .site-header__inner {
        min-height: 56px;
    }

    .brand {
        position: relative;
        z-index: 1001;
    }
        /* stays visible above the open menu */
        .brand img {
            height: 40px;
            width: auto;
        }

    .nav-toggle {
        display: grid;
        place-items: center;
        margin-inline-start: auto;
        width: 40px;
        height: 40px;
        font-size: 24px;
        color: var(--c-ink);
        background: none;
        border: 0;
        position: relative;
        z-index: 1001;
        cursor: pointer;
    }

    .nav {
        position: fixed;
        inset: 0;
        z-index: 1000;
        overflow-y: auto;
        padding: 72px 24px 32px;
        background: #f9fafc;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .45s cubic-bezier(.56, .1, .34, .91), visibility .45s;
    }

        .nav.open-menu, .nav.is-open {
            transform: none;
            visibility: visible;
        }

    .nav__list {
        display: block;
    }

    .nav__item {
        border-bottom: 1px solid var(--c-line);
    }

    .nav__link {
        display: flex;
        justify-content: space-between;
        padding-block: 14px;
        font-size: 16px;
    }

    .has-sub > .sub-menu {
        position: static;
        min-width: 0;
        max-height: 0;
        padding: 0;
        overflow: hidden;
        border: 0;
        box-shadow: none;
        background: transparent;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: max-height .35s ease;
    }

    .has-sub.is-open > .sub-menu {
        max-height: 1200px;
        padding-bottom: 10px;
    }

    .sub-menu a {
        padding-inline: 20px;
        font-size: 15px;
    }

    .nav__utility {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-top: 24px;
    }

        .nav__utility a, .nav__utility button {
            font-size: 15px;
            font-weight: 700;
            color: var(--c-ink);
            background: none;
            border: 0;
            padding: 0;
            font-family: inherit;
        }

    .hero__slide {
        height: auto;
        min-height: 0;
        padding: 70px 0;
    }

    .hero__title {
        font-size: 30px;
    }

    .hero__text {
        font-size: 14px;
    }

    .search-tabs {
        overflow-x: auto;
    }

        .search-tabs li {
            flex: 0 0 auto;
            padding: 10px 14px;
        }

        .search-tabs a {
            padding: 0;
            font-size: 12px;
            background: transparent;
            border: 0;
        }

            .search-tabs a.active {
                background: transparent;
                color: var(--c-accent);
            }

                .search-tabs a.active img {
                    filter: none;
                }

        .search-tabs img {
            height: 22px;
        }

    .search-panel__box {
        border-radius: var(--radius-lg);
    }

    .search-form {
        grid-template-columns: 1fr;
        padding: 20px 15px;
    }

    .section-title h2, .title-main h1 {
        font-size: 20px;
    }

    .dest-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 170px;
        gap: 15px;
    }

        .dest-grid .dest-card:nth-child(n) {
            grid-column: auto;
            grid-row: auto;
        }

        .dest-grid .dest-card:nth-child(1) {
            grid-column: 1 / -1;
        }

        .dest-grid .dest-card:nth-child(6) {
            grid-column: 1 / -1;
        }

    .hotel-gallary img {
        height: 200px;
    }

    .hotel-info h1 {
        font-size: 22px;
    }

    .hotel-info h3 {
        font-size: 18px;
    }

    .hotel-info > p, .hotel-info h4, .hotel-info ul li, .reviews p {
        font-size: 14px;
    }

    .room-type h3 {
        font-size: 16px;
    }

    .room-item h4 {
        margin: 30px 15px;
        text-align: start;
    }

    .hotel-side {
        margin-top: 0;
    }

    .faq {
        margin-bottom: 0;
    }

        .faq .card .card-header .faq-title {
            font-size: 14px;
        }

    .trip-price h2 {
        border: 0;
    }

    .trip-info-main {
        padding-bottom: 15px;
    }

        .trip-info-main [class*='col-md-'] {
            margin-bottom: 15px;
            border: 0;
        }

    .included-main .col-md-6 {
        padding: 10px 15px;
        border-inline-end: 0;
        border-bottom: 1px solid var(--c-line);
    }

        .included-main .col-md-6:last-child {
            margin-inline-start: 0;
            border-inline-start: 0;
            border-bottom: 0;
        }

    .program-main h1, .location-main h1 {
        font-size: 22px;
    }

    .about-main img {
        margin-top: 30px;
    }

    .contact-form-main {
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .contact-info {
        margin-top: 0;
    }

    .artical-item.artical-d {
        padding-inline-end: 0;
    }

    .Package-main .col-xs-6 img {
        height: 190px;
    }

    .Package-main .col-xs-6 h3 {
        font-size: 16px;
    }

    .grid-main .col-md-5 img {
        height: 165px;
    }

    .grid-main .col-md-4 img {
        height: 200px;
    }

    #lightgallery {
        height: 199px;
    }

        #lightgallery div {
            height: 50px;
        }

            #lightgallery div:nth-child(1), #lightgallery div:nth-child(2) {
                height: 150px;
            }

            #lightgallery div .more-img-overylay {
                font-size: 14px;
            }

    button.slick-arrow {
        top: calc(50% - 30px);
        width: 30px;
        height: 30px;
        border-radius: 0;
    }

        button.slick-arrow::after {
            font-size: 22px !important;
        }

    button.slick-prev.slick-arrow {
        inset-inline-start: 0;
    }

    button.slick-next.slick-arrow {
        inset-inline-end: 0;
    }
}

@media (max-width: 991px) {
    .auth {
        grid-template-columns: 1fr;
    }

    .auth__brand {
        padding: 36px 24px;
    }

    .auth__logo {
        height: 56px;
        margin-bottom: 18px;
    }

    .auth__brand h2 {
        font-size: 24px;
    }

    .auth__brand p {
        font-size: 15px;
    }

    .auth__panel {
        padding: 24px 16px 40px;
    }

    .auth__card {
        padding: 28px 20px;
    }

    .profile-navbar ul {
        gap: 4px 18px;
    }

        .profile-navbar ul li:last-child {
            margin-inline-start: 0;
        }
}

@media (max-width: 575px) {
    .auth-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .Package-main {
        margin-bottom: 0;
    }

        .Package-main .col-xs-6 img {
            height: 130px;
            width: 130px;
        }

    .site-footer__cols {
        grid-template-columns: 1fr;
    }

    .site-footer__bottom {
        justify-content: center;
        text-align: center;
    }

    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
    }

    .whats-btn svg {
        width: 54px;
        height: 54px;
    }

    .liveChat {
        inset-inline-end: 20px;
        bottom: 84px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 18. RTL (Bootstrap 3 grid floats do not flip on their own) ------------- */
[dir='rtl'] [class*='col-'] {
    float: right;
}

[dir='rtl'] .rate:not(:checked) > label {
    float: left;
}

[dir='rtl'] .col-xs-offset-1 {
    margin-left: 0;
    margin-right: 8.33333333%;
}

@media (min-width: 992px) {
    [dir='rtl'] .col-md-offset-1 {
        margin-left: 0;
        margin-right: 8.33333333%;
    }

    [dir='rtl'] .col-md-offset-2 {
        margin-left: 0;
        margin-right: 16.66666667%;
    }

    [dir='rtl'] .col-md-offset-3 {
        margin-left: 0;
        margin-right: 25%;
    }
}

[dir='rtl'] .nav__link i, [dir='rtl'] .topbar i {
    margin-inline: 0;
}

[dir='rtl'] .sub-menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

@media (max-width: 991px) {
    [dir='rtl'] .nav {
        transform: translateX(100%);
    }

        [dir='rtl'] .nav.open-menu, [dir='rtl'] .nav.is-open {
            transform: none;
        }
}



/* auth: login + register ------------------------------------------------- */
.auth {
    display: grid;
    grid-template-columns: minmax(320px, 5fr) 7fr;
    min-height: calc(100vh - var(--topbar-h) - var(--header-h) - 2px);
}

.auth__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px clamp(30px, 6vw, 90px);
    color: #fff;
    isolation: isolate;
    background: url(/UI/img/9.jpg) 60% center / cover no-repeat;
}

    .auth__brand::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(160deg, rgb(0 0 0 / .78), rgb(20 90 70 / .72));
    }

.auth__logo {
    display: block;
    width: auto;
    height: 90px;
    margin-bottom: 40px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.auth__brand h2 {
    margin-bottom: 15px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.auth__brand p {
    max-width: 380px;
    font-size: 17px;
    line-height: 1.6;
    color: rgb(255 255 255 / .85);
}

.auth__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 30px;
    background: var(--c-mint);
}

.auth__card {
    width: 100%;
    max-width: 440px;
    padding: 40px 36px;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.auth--wide .auth__card {
    max-width: 680px;
}

.auth__card h1 {
    margin-bottom: 8px;
    font-size: 30px;
    font-weight: 700;
}

.auth__lead {
    margin-bottom: 28px;
    font-size: 16px;
    color: var(--c-muted);
}

.auth__summary:not(:empty) {
    margin-bottom: 16px;
}

.auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
}

.auth-field--full {
    grid-column: 1 / -1;
}

.auth-field {
    margin-bottom: 18px;
}

    .auth-field label {
        display: block;
        margin-bottom: 6px;
        font-size: 14px;
        font-weight: 700;
        color: var(--c-text);
    }

    .auth-field input, .auth-field select, .auth-field textarea {
        display: block;
        width: 100%;
        height: 48px;
        padding: 10px 18px;
        font: inherit;
        font-size: 15px;
        color: var(--c-ink);
        background: #fff;
        border: 1px solid var(--c-line);
        border-radius: var(--radius-pill);
        transition: border-color var(--ease), box-shadow var(--ease);
    }

    .auth-field textarea {
        height: auto;
        min-height: 110px;
        padding-block: 12px;
        border-radius: var(--radius-lg);
        resize: vertical;
    }

        .auth-field input:focus, .auth-field select:focus, .auth-field textarea:focus {
            outline: 0;
            border-color: var(--c-primary);
            box-shadow: 0 0 0 3px rgb(30 194 139 / .18);
        }

        .auth-field input.input-validation-error, .auth-field select.input-validation-error, .auth-field textarea.input-validation-error {
            border-color: var(--c-danger);
        }

    .auth-field .text-danger, .auth__summary {
        display: block;
        margin-top: 5px;
        padding-inline: 18px;
        font-size: 13px;
        color: var(--c-danger);
    }

.auth-field__control {
    position: relative;
}

    .auth-field__control input {
        padding-inline-end: 50px;
    }

.auth-field__toggle {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 6px;
    width: 38px;
    margin-block: auto;
    height: 38px;
    display: grid;
    place-items: center;
    font-size: 19px;
    color: var(--c-muted);
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

    .auth-field__toggle:hover {
        color: var(--c-accent);
    }

.auth__submit {
    width: 100%;
    margin-top: 8px;
    padding-block: 12px;
    box-shadow: none;
}

.auth__alt {
    margin-top: 24px;
    text-align: center;
    font-size: 15px;
    color: var(--c-muted);
}

    .auth__alt a {
        margin-inline-start: 4px;
        font-weight: 700;
        color: var(--c-primary);
    }

        .auth__alt a:hover {
            color: var(--c-accent);
        }