/* =========================================================
   DayTours Egypt - Subcategory / Tours Page CSS
   File: css/tours.css
   Depends on: css/main.css
   ========================================================= */

.breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;
    margin-bottom:24px;
    color:rgba(255,255,255,.72);
    font-size:12px;
    font-weight:800;
}
.breadcrumb a{color:rgba(255,255,255,.82)}
.breadcrumb a:hover{color:var(--gold-2)}
.breadcrumb strong{color:#fff}

.tours-hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-height:760px;
    padding-top:calc(var(--header-h) + 70px);
    padding-bottom:86px;
    color:#fff;
}
.tours-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-3;
      background: linear-gradient(90deg, rgb(6 29 53 / 93%) 0%, rgb(6 29 53 / 57%) 34%, rgba(6, 29, 53, .20) 64%, rgba(6, 29, 53, .50) 100%), linear-gradient(180deg, rgba(6, 29, 53, .2), rgb(6 29 53 / 49%)), url() center / cover no-repeat;

}

.tours-hero-bg-picture {
    position: absolute;
    inset: 0;
    z-index: -4;
}

.tours-hero-bg-picture img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.tours-hero::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:-1px;
    height:170px;
    /* background:linear-gradient(180deg,rgba(255,250,242,0),var(--ivory)); */
    z-index:-1;
}
.tours-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 420px;
    gap:58px;
    align-items:center;
}
.tours-hero h1{
    font-family:"Playfair Display",Georgia,serif;
    font-size:clamp(54px,7vw,92px);
    letter-spacing:-.06em;
    line-height:.98;
    max-width:760px;
}
.tours-hero-stats{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:34px;
}
.tours-hero-stats span{
    display:grid;
    gap:2px;
    min-width:126px;
    padding:12px 14px;
    border-radius:18px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.16);
    color:rgba(255,255,255,.74);
    font-size:12px;
    font-weight:800;
}
.tours-hero-stats strong{
    color:var(--gold-2);
    font-size:18px;
    line-height:1;
}
.tours-hero-card{
    position:relative;
    min-height:470px;
    border:10px solid rgba(255,255,255,.78);
    border-radius:34px;
    overflow:hidden;
    box-shadow:0 32px 90px rgba(0,0,0,.30);
    background:var(--navy);
}
.tours-hero-card img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;opacity:.9}
.tours-hero-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(6,29,53,.10),rgba(6,29,53,.24) 42%,rgba(6,29,53,.92));
}
.tours-hero-card-body{
    position:absolute;
    left:24px;right:24px;bottom:24px;
    z-index:2;
}
.tours-hero-card .mini-label,
.signature-chip{
    display:inline-flex;
    padding:8px 12px;
    border-radius:999px;
    background:linear-gradient(135deg,var(--gold-2),var(--gold));
    color:var(--navy);
    font-size:12px;
    font-weight:900;
    margin-bottom:14px;
}
.tours-hero-card h2{
    font-family:"Playfair Display",Georgia,serif;
    font-size:34px;
    letter-spacing:-.045em;
}
.tours-hero-card p{color:rgba(255,255,255,.82);margin:10px 0 16px}
.tours-hero-card a{color:var(--gold-2);font-weight:900;font-size:14px}

.tours-intro{padding-top:72px}
.tours-intro-grid{
    display:grid;
    grid-template-columns:.88fr 1.12fr;
    gap:34px 70px;
    align-items:start;
}
.intro-copy{
    color:var(--muted);
    font-size:16px;
    line-height:1.85;
}
.intro-copy p{margin:0 0 14px}
.intro-proof-grid{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}
.intro-proof-grid article{
    padding:22px;
    border-radius:22px;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:var(--shadow-soft);
}
.intro-proof-grid strong{display:block;color:var(--navy);font-size:18px;margin-bottom:4px}
.intro-proof-grid span{color:var(--muted);font-size:14px}

.tours-list-section{padding-top:58px}
.tours-list-head{
    display:flex;
    justify-content:space-between;
    gap:24px;
    align-items:end;
    margin-bottom:16px;
}
.tours-list-head .section-text{margin-left:0}
.tour-filter-pills{
    display:flex;
    flex-wrap:nowrap;
    gap:9px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-bottom:4px;
    /* margin-bottom:24px; */
    width:100%;
}
.tour-filter-pills::-webkit-scrollbar{display:none;}
.tour-filter-pills a{
    flex-shrink:0;
    white-space:nowrap;
    padding:10px 13px;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--line);
    color:var(--navy);
    font-size:12px;
    font-weight:900;
    box-shadow:0 10px 22px rgba(6,29,53,.06);
}
.tour-filter-pills a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.tours-card-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}
.listing-tour-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:26px;
    overflow:hidden;
    box-shadow:var(--shadow-soft);
    transition:.25s var(--ease);
}
.listing-tour-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.listing-tour-card a{display:grid;height:100%;grid-template-rows:auto 1fr}
.listing-media{
    position:relative;
    aspect-ratio:1.42/1;
    overflow:hidden;
}
.listing-media img{width:100%;height:100%;object-fit:cover;transition:.5s var(--ease)}
.listing-tour-card:hover img{transform:scale(1.06)}
.listing-body{padding:22px;display:flex;flex-direction:column}
.listing-body h3{
    font-family:"Playfair Display",Georgia,serif;
    color:var(--navy);
    font-size:27px;
    letter-spacing:-.04em;
    margin-bottom:9px;
}
.listing-body p{color:var(--muted);font-size:14px;line-height:1.7;margin:0 0 14px}
.listing-body ul{
    list-style:none;
    display:grid;
    gap:8px;
    margin:0 0 18px;
    padding:0;
    color:#465466;
    font-size:13px;
    font-weight:800;
}
.listing-body li{display:flex;gap:8px}
/* .listing-body li::before{content:"✓";color:var(--gold);font-weight:900} */
.listing-body .tour-bottom{margin-top:auto}

.choose-tour-grid{
    display:grid;
    grid-template-columns:1.15fr repeat(3,.62fr);
    gap:18px;
    align-items:stretch;
}
.choose-card-dark{
    padding:34px;
    border-radius:28px;
    color:#fff;
    background:
        linear-gradient(135deg,rgba(6,29,53,.98),rgba(13,56,90,.92)),
        url('https://images.unsplash.com/photo-1539768942893-daf53e448371?auto=format&fit=crop&w=1200&q=80') center/cover no-repeat;
    box-shadow:var(--shadow-soft);
}
.choose-card-dark h2{
    font-family:"Playfair Display",Georgia,serif;
    font-size:38px;
    letter-spacing:-.045em;
}
.choose-card-dark p{color:rgba(255,255,255,.78);max-width:520px}
.choose-step{
    background:#fff;
    border:1px solid var(--line);
    border-radius:24px;
    padding:24px;
    box-shadow:var(--shadow-soft);
}
.choose-step span{
    width:38px;height:38px;
    display:grid;place-items:center;
    border-radius:14px;
    background:rgba(201,155,61,.14);
    color:var(--gold);
    font-weight:900;
    margin-bottom:20px;
}
.choose-step h3{color:var(--navy);font-size:18px;margin-bottom:8px}
.choose-step p{color:var(--muted);font-size:14px;margin:0}

.cairo-highlights{background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(251,246,236,.72))}
.highlights-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:36px;
    align-items:start;
}
.highlight-map-card{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    padding:18px;
    border-radius:30px;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:var(--shadow-soft);
}
.highlight-map-card a{
    padding: 10px;
    border-radius:20px;
    background:linear-gradient(180deg,#fff,rgba(251,246,236,.62));
    border:1px solid rgba(16,32,51,.08);
}
.highlight-map-card a:hover{background:var(--navy);color:#fff;transform:translateY(-3px)}
.highlight-map-card strong{display:block;color:inherit;font-size:16px;margin-bottom:4px}
.highlight-map-card span{display:block;color:var(--muted);font-size:13px;line-height:1.55}
.highlight-map-card a:hover span{color:rgba(255,255,255,.72)}

.internal-links-section{padding-top:74px}
.internal-link-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:28px;
}
.internal-link-grid a{
    display:grid;
    gap:3px;
    padding:18px 20px;
    border-radius:18px;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:0 12px 28px rgba(6,29,53,.06);
}
.internal-link-grid a:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);border-color:rgba(201,155,61,.24)}
.internal-link-grid strong{color:var(--navy);font-size:15px}
.internal-link-grid span{color:var(--muted);font-size:12px}

.faq-layout{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:38px;
    align-items:start;
}
.final-cta-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:26px;
    padding:42px;
    border-radius:30px;
    color:#fff;
    background:
        linear-gradient(135deg,rgba(6,29,53,.98),rgba(13,56,90,.90)),
        url('https://images.unsplash.com/photo-1539650116574-75c0c6d47f6e?auto=format&fit=crop&w=1600&q=85') center/cover no-repeat;
    box-shadow:var(--shadow);
    overflow:hidden;
}
.final-cta-card h2{
    font-family:"Playfair Display",Georgia,serif;
    font-size:40px;
    letter-spacing:-.045em;
}
.final-cta-card p{color:rgba(255,255,255,.76);max-width:760px}
.final-cta-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}

@media (min-width:992px){
    .dropdown-align-right .dropdown-menu{left:auto!important;right:0!important;transform:translateY(8px)!important}
    .dropdown-align-right:hover .dropdown-menu,
    .dropdown-align-right:focus-within .dropdown-menu{transform:translateY(0)!important}
    .dropdown-align-right .dropdown-menu::before{left:auto;right:34px;transform:rotate(45deg)}
}

@media (max-width:1180px){
    .tours-hero-grid{grid-template-columns:1fr 360px;gap:34px}
    .tours-card-grid{gap:18px}
    .listing-body h3{font-size:24px}
}
@media (max-width:991px){
    .tours-hero{min-height:auto;padding-top:128px;padding-bottom:70px}
    .tours-hero-grid,.tours-intro-grid,.highlights-grid,.faq-layout{grid-template-columns:1fr}
    .tours-hero-card{max-width:560px;min-height:420px}
    .intro-proof-grid,.tours-card-grid{grid-template-columns:repeat(2,1fr)}
    .tours-list-head{display:grid;align-items:start}
    .tour-filter-pills{justify-content:flex-start}
    .choose-tour-grid{grid-template-columns:1fr 1fr}
    .choose-card-dark{grid-column:1/-1}
    .internal-link-grid{grid-template-columns:repeat(2,1fr)}
    .final-cta-card{display:grid}
    .final-cta-actions{justify-content:flex-start}
}
@media (max-width:640px){
    .tours-hero{padding-top:130px;padding-bottom:56px}
    .breadcrumb{font-size:11px;margin-bottom:18px}
    .tours-hero h1{font-size:48px}
    .tours-hero-stats{display:grid;grid-template-columns:1fr 1fr}
    .tours-hero-card{min-height:390px;border-width:7px;border-radius:26px}
    .tours-hero-card-body{left:18px;right:18px;bottom:18px}
    .tours-hero-card h2{font-size:28px}
    .tours-intro{padding-top:52px}
    .intro-proof-grid,.tours-card-grid,.choose-tour-grid,.highlight-map-card,.internal-link-grid{grid-template-columns:1fr}
    .tours-list-head{margin-bottom:22px}
    .tour-filter-pills{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
    .tour-filter-pills a{white-space:nowrap}
    .listing-tour-card{border-radius:22px}
    .listing-body{padding:18px}
    .listing-body h3{font-size:23px}
    .choose-card-dark{padding:28px;border-radius:24px}
    .choose-card-dark h2{font-size:31px}
    .highlight-map-card{padding:12px;border-radius:24px}
    .faq-layout{gap:22px}
    .final-cta-card{padding:28px;border-radius:24px}
    .final-cta-card h2{font-size:30px}
    .final-cta-actions .btn{width:100%}
}
/* Tour filter container with scroll buttons */
.tour-filter-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    position: relative;
}

.filter-scroll-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(6,29,53,.08);
}

.filter-scroll-btn:hover:not(:disabled) {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(6,29,53,.15);
}

.filter-scroll-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.filter-scroll-btn:active:not(:disabled) {
    transform: translateY(0);
}

.tour-filter-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 8px 0 16px 0;
    -webkit-overflow-scrolling: touch;
    position: relative;
    flex: 1;
}

.tour-filter-pills::-webkit-scrollbar {
    display: none;
}

.tour-filter-pills > * {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Enhanced scroll shadow indicators */
.tour-filter-pills::before,
.tour-filter-pills::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 16px;
    width: 30px;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s ease;
}

.tour-filter-pills::before {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255,0.95), transparent);
    opacity: 0;
}

.tour-filter-pills::after {
    right: 0;
    background: linear-gradient(to left, rgba(255,255,255,0.95), transparent);
    opacity: 1;
}

/* Show/hide indicators based on scroll position */
.tour-filter-pills:not(.at-start)::before {
    opacity: 1;
}

.tour-filter-pills.at-end::after {
    opacity: 0;
}

/* Scrolling state styles */
.tour-filter-pills.is-scrolling {
    scroll-behavior: auto; /* Disable smooth scroll during active scrolling for better performance */
}

.tour-filter-pills.is-scrolling::before,
.tour-filter-pills.is-scrolling::after {
    opacity: 0.7;
}

/* Enhanced pill styles for better scroll experience */
.tour-filter-pills a {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 10px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--navy);
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(6,29,53,.06);
    transition: all 0.2s ease;
    user-select: none;
}

.tour-filter-pills a:hover {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(6,29,53,.12);
}

.tour-filter-pills a:active {
    transform: translateY(0);
    transition-duration: 0.1s;
}

/* Focus styles for keyboard navigation */
.tour-filter-pills:focus-within {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 8px;
}

.tour-filter-pills a:focus {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Mobile optimizations */
@media (max-width: 640px) {
    .tour-filter-container {
        gap: 6px;
        margin-bottom: 16px;
    }

    .filter-scroll-btn {
        width: 32px;
        height: 32px;
    }

    .tour-filter-pills {
        gap: 8px;
        padding: 6px 0 12px 0;
    }

    .tour-filter-pills a {
        padding: 8px 12px;
        font-size: 11px;
    }

    .tour-filter-pills::before,
    .tour-filter-pills::after {
        width: 20px;
    }

    /* Hide scroll buttons on very small screens if content fits */
    .tour-filter-container.no-scroll .filter-scroll-btn {
        display: none;
    }
}

/* Additional responsive improvements */
@media (max-width: 480px) {
    .tour-filter-container {
        gap: 4px;
    }

    .filter-scroll-btn {
        width: 28px;
        height: 28px;
    }

    .filter-scroll-btn svg {
        width: 14px;
        height: 14px;
    }

    .tour-filter-pills {
        gap: 6px;
    }

    .tour-filter-pills a {
        padding: 6px 10px;
        font-size: 10px;
    }
}

/* Smooth transitions for all interactive elements */
.tour-filter-pills a,
.filter-scroll-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced focus states for accessibility */
.filter-scroll-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Loading state for scroll buttons */
.filter-scroll-btn.loading {
    pointer-events: none;
    opacity: 0.6;
}

/* Scroll momentum indicator */
.tour-filter-pills.momentum-scrolling {
    scroll-behavior: auto;
}

.tour-filter-pills.momentum-scrolling::before,
.tour-filter-pills.momentum-scrolling::after {
    opacity: 0.5;
}.about-show-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    background: none;
    border: none;
    color: var(--gold);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}
.about-more-text {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* عدد السطور الظاهرة */
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.3s ease;
}

.about-more-text.expanded {
    display: block;
}
.intro-head{
        position: relative;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 24px);
}



@media (max-width: 640px) {
    .tours-hero-stats {
        display: grid;
        grid-template-columns:  1fr 1fr;
    }
}