/* ============================================================
   TCE Packages System — Legacy Page Sections CSS
   (ported from WPCode: overview bar, trip overview, gallery,
   inclusions, where you stay, map, essential info, sticky nav)
============================================================ */



/* ── Section headings with icons ── */
.tce-ovb-heading,
.tce-gal-title,
.tce-inc-heading,
.tce-stay-heading,
.tce-map-heading,
.tce-eti-heading,
.tce-rel-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tce-inc-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Overview Bar ── */
.tce-ovb-wrap { padding:30px 0 20px; }
.tce-ovb-heading { font-size:1.25em; font-weight:700; color:#0a525e; margin:0 0 20px; }
.tce-ovb-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tce-ovb-item { display:flex; align-items:center; gap:14px; padding:13px 16px; border:1px solid #f0e9e1; background:#fcfaf7; border-radius:8px; transition:border-color .2s; }
.tce-ovb-item:hover { border-color:var(--porto-secondary-color,#AE9A78); }
.tce-ovb-icon { color:var(--porto-secondary-color,#AE9A78); font-size:1.1em; width:20px; text-align:center; flex-shrink:0; }
.tce-ovb-label { font-size:.85em; font-weight:600; color:var(--porto-primary-color,#1a3d47); }
.tce-ovb-val { font-size:.85em; color:#555; }

/* ── Trip Overview — no image, full width ── */
.tce-ov-wrap { display:block; padding:30px 0; }
.tce-ov-body { width:100%; }
.tce-ov-title { font-size:1.25em; font-weight:700; color:var(--porto-primary-color,#1a3d47); margin:0 0 16px; line-height:1.3; display:flex; align-items:center; gap:10px; }
.tce-ov-desc { font-size:.9em; line-height:1.9; color:#555; }
.tce-ov-desc p { margin-bottom:.9em; }

/* ── Gallery ── */
.tce-gal-section { padding:30px 0; }
.tce-gal-title { font-size:1.25em; font-weight:700; color:#0a525e; margin:0 0 6px; }
.tce-gal-sub { font-size:.83em; color:#9aabb2; text-align:left; margin-bottom:22px; }
.tce-gal-wrap { position:relative; max-width:820px; margin:0 auto; }
.tce-gal-viewport { position:relative; overflow:hidden; border-radius:12px; background:#000; }
.tce-gal-track { display:flex; transition:transform .5s ease; }
.tce-gal-slide { min-width:100%; }
.tce-gal-slide img { width:100%; height:450px; object-fit:cover; display:block; }
.tce-gal-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; background:rgba(255,255,255,.9); border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:10; transition:background .2s; }
.tce-gal-arrow:hover { background:#fff; }
.tce-gal-prev { left:14px; }
.tce-gal-next { right:14px; }
.tce-gal-counter { position:absolute; top:14px; right:14px; background:rgba(30,30,30,.7); color:#fff; font-size:.78em; font-weight:600; padding:5px 12px; border-radius:20px; }
.tce-gal-thumbs-wrap { margin-top:14px; overflow:hidden; }
.tce-gal-thumbs { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scroll-behavior:smooth; }
.tce-gal-thumbs::-webkit-scrollbar { height:4px; }
.tce-gal-thumbs::-webkit-scrollbar-track { background:#f0ece4; border-radius:2px; }
.tce-gal-thumbs::-webkit-scrollbar-thumb { background:#AE9A78; border-radius:2px; }
.tce-gal-thumb { width:80px; height:58px; flex-shrink:0; border-radius:6px; overflow:hidden; cursor:pointer; opacity:.55; border:2px solid transparent; transition:all .2s; }
.tce-gal-thumb.active, .tce-gal-thumb:hover { opacity:1; border-color:#AE9A78; }
.tce-gal-thumb img { width:100%; height:100%; object-fit:cover; }
@media(max-width:768px) { .tce-gal-slide img { height:240px; } }

/* ── Inclusions ── */
.tce-inc-wrap { padding:30px 0; }
.tce-inc-heading { font-size:1.25em; font-weight:700; color:#0a525e; margin:0 0 20px; }
.tce-inc-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.tce-inc-title { font-size:1.2em; font-weight:700; margin:0 0 18px; }
.tce-yes-title { color:#AE9A78; }
.tce-no-title  { color:#AE9A78; }
.tce-inc-list { list-style:none; padding:0; margin:0; }
.tce-inc-row { display:flex; align-items:flex-start; gap:14px; padding:10px 0; }
.tce-chk { width:22px; height:22px; flex-shrink:0; margin-top:1px; }
.tce-chk svg { width:100%; height:100%; }
.tce-chk-yes svg { stroke:#00abc4; }
.tce-chk-no  svg { stroke:#dd3333; }
.tce-inc-row span:last-child { font-size:.91em; color:#444; line-height:1.55; }
@media(max-width:768px) { .tce-inc-grid { grid-template-columns:1fr; gap:24px; } }

/* ── Where You Stay ── */
.tce-stay-wrap { padding:30px 0; }
.tce-stay-heading { font-size:1.25em; font-weight:700; color:#0a525e; margin:0 0 20px; }
.tce-stay-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tce-stay-card { display:block; text-decoration:none; }
.tce-stay-card:hover .tce-stay-img img { transform:scale(1.04); }
.tce-stay-img { border-radius:10px; overflow:hidden; height:200px; }
.tce-stay-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.tce-stay-noimg { display:flex; align-items:center; justify-content:center; background:#f5f3ee; font-size:2em; border-radius:10px; height:200px; }
.tce-stay-name { font-size:.88em; font-weight:600; color:var(--porto-primary-color,#1a3d47); margin-top:10px; }
@media(max-width:768px) { .tce-stay-grid { grid-template-columns:1fr; } }

/* ── Map ── */
.tce-map-wrap { padding:30px 0; }
.tce-map-heading { font-size:1.25em; font-weight:700; color:#0a525e; margin:0 0 20px; }
.tce-map-frame { border-radius:12px; overflow:hidden; }
.tce-map-frame iframe { width:100% !important; height:500px; border:0; display:block; border-radius:12px; }
@media(max-width:768px) { .tce-map-frame iframe { height:300px; } }

/* ── Essential Info ── */
.tce-eti-wrap { padding:30px 0; }
.tce-eti-heading { font-size:1.25em; font-weight:700; color:#0a525e; margin:0 0 20px; }
.tce-eti-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.tce-eti-card { display:block; text-decoration:none; }
.tce-eti-card:hover .tce-eti-img img { transform:scale(1.04); }
.tce-eti-img { border-radius:10px; overflow:hidden; height:190px; }
.tce-eti-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.tce-eti-noimg { display:flex; align-items:center; justify-content:center; background:#f5f3ee; font-size:2em; border-radius:10px; height:190px; }
.tce-eti-name { font-size:.88em; font-weight:600; color:var(--porto-primary-color,#1a3d47); margin-top:10px; line-height:1.4; }
@media(max-width:768px) { .tce-eti-grid { grid-template-columns:1fr; } }

/* ── Related ── */
.tce-rel-wrap { padding:30px 0; }
.tce-rel-heading { font-size:1.25em; font-weight:700; color:#1a3d47 !important; margin:0 0 24px; }

/* ── Sidebar ── */
.tce-sb-wrap { width:100%; max-width:100%; font-family:inherit; }

/* Combined sticky card — ONE card for price + contact + share */
.tce-sb-combined {
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    border:1px solid #f0ece4;
    box-shadow:0 4px 24px rgba(0,0,0,.07);
    position: sticky !important;
    top: 110px !important;
    z-index: 100;
}

/* VC column fix — مش يمتد */
.tce-sidebar-col,
.tce-sidebar-col > .vc_column-inner,
.tce-sidebar-col > .vc_column-inner > .wpb_wrapper {
    height: auto !important;
    min-height: 0 !important;
    align-self: flex-start !important;
}
.tce-pkg-wrapper.vc_row,
.tce-pkg-wrapper > .vc_row { align-items: flex-start !important; }

.tce-sb-card { background:#fff; border-radius:16px; overflow:hidden; border:1px solid #f0ece4; box-shadow:0 4px 24px rgba(0,0,0,.07); margin-bottom:20px; }
.tce-sb-hero { background:linear-gradient(135deg,#1a3d47 0%,#327080 100%); padding:28px 24px 24px; text-align:center; }
.tce-sb-hero-title { font-size:.75em; text-transform:uppercase; letter-spacing:2px; color:rgba(255,255,255,.7); margin:0 0 8px; font-weight:600; }
.tce-sb-from { font-size:.78em; color:#AE9A78; font-weight:600; display:block; margin-bottom:2px; }
.tce-sb-price { font-size:2.4em; font-weight:800; color:#fff; line-height:1; }
.tce-sb-price sup { font-size:.45em; vertical-align:super; color:#AE9A78; }
.tce-sb-price-note { font-size:.68em; color:rgba(255,255,255,.55); margin-top:6px; display:block; }
.tce-sb-duration { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.12); color:#fff; font-size:.72em; font-weight:600; padding:5px 14px; border-radius:20px; margin-top:14px; }
.tce-sb-btn-wrap { padding:16px 20px; border-bottom:1px solid #f0ece4; }
.tce-sb-btn-row { display:flex; gap:10px; }
.tce-sb-btn-row .tce-sb-btn { flex:1.4; margin:0; }
.tce-sb-btn-row .tce-sb-btn-sec { flex:1; margin:0; }
.tce-sb-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px; background:#AE9A78; border:none; border-radius:10px; color:#fff; font-size:.82em; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; cursor:pointer; transition:all .25s; font-family:inherit; text-decoration:none; }
.tce-sb-btn:hover { background:#1a3d47; color:#fff; }
.tce-sb-btn-sec { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:11px; background:transparent; border:1.5px solid #AE9A78; border-radius:10px; color:#AE9A78; font-size:.78em; font-weight:700; text-transform:uppercase; letter-spacing:1px; cursor:pointer; transition:all .25s; font-family:inherit; margin-top:10px; text-decoration:none; }
.tce-sb-btn-sec:hover { background:#AE9A78; color:#fff; }
.tce-sb-section { padding:18px 20px; border-bottom:1px solid #f0ece4; }
.tce-sb-section--last,
.tce-sb-section:last-child { border-bottom:none; }
.tce-sb-sec-title { font-size:.68em; text-transform:uppercase; letter-spacing:2px; color:#AE9A78; font-weight:700; margin:0 0 12px; }
.tce-sb-contact-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.tce-sb-c3-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:12px 6px; border-radius:12px; text-decoration:none; transition:all .2s; text-align:center; }
.tce-sb-c3-btn:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.1); text-decoration:none; }
.tce-sb-c3-ico { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tce-sb-c3-lbl { font-size:.62em; font-weight:700; text-transform:uppercase; letter-spacing:.5px; line-height:1.3; }
.tce-sb-c3-wa { background:#f0faf4; border:1px solid #c3e6cb; }
.tce-sb-c3-wa .tce-sb-c3-ico { background:#25D366; color:#fff; }
.tce-sb-c3-wa .tce-sb-c3-lbl { color:#1a7a3c; }
.tce-sb-c3-ph { background:#f0f6ff; border:1px solid #c3d9f0; }
.tce-sb-c3-ph .tce-sb-c3-ico { background:#327080; color:#fff; }
.tce-sb-c3-ph .tce-sb-c3-lbl { color:#1a4d5c; }
.tce-sb-c3-em { background:#fff8f0; border:1px solid #f5d9b8; }
.tce-sb-c3-em .tce-sb-c3-ico { background:#e67e22; color:#fff; }
.tce-sb-c3-em .tce-sb-c3-lbl { color:#a35a10; }
.tce-sb-share { display:flex; gap:6px; margin-top:4px; flex-wrap:wrap; }
.tce-sb-share-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:5px; padding:8px 6px; border-radius:8px; font-size:.7em; font-weight:600; text-decoration:none; transition:all .2s; min-width:70px; }
.tce-sb-fb       { background:#f0f4ff; color:#1877F2; border:1px solid #c3d0f5; }
.tce-sb-fb:hover { background:#1877F2; color:#fff; }
.tce-sb-wa-share       { background:#f0faf4; color:#25D366; border:1px solid #c3e6cb; }
.tce-sb-wa-share:hover { background:#25D366; color:#fff; }
.tce-sb-x       { background:#f5f5f5; color:#000; border:1px solid #ddd; }
.tce-sb-x:hover { background:#000; color:#fff; }
.tce-sb-tg       { background:#f0f7ff; color:#229ED9; border:1px solid #c3dff5; }
.tce-sb-tg:hover { background:#229ED9; color:#fff; }
.tce-sb-email       { background:#fdf0f0; color:#e74c3c; border:1px solid #f5c6c6; }
.tce-sb-email:hover { background:#e74c3c; color:#fff; }
.tce-sb-em { background:#fff8f0; border:1px solid #f5d9b8; }
.tce-sb-em:hover { background:#fdebd0; }
.tce-sb-em .tce-sb-contact-ico { color:#e67e22; }
.tce-sb-contact-num { font-size:.82em; font-weight:700; color:#1a3d47; }

/* ── Share icons — circles ── */
.tce-sb-share-icons { display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.tce-sb-ico-btn {
    width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    text-decoration:none; transition:all .2s;
    border:none; cursor:pointer;
    flex-shrink:0;
}
.tce-sb-ico-btn:hover { transform:translateY(-3px); box-shadow:0 4px 12px rgba(0,0,0,.15); }
.tce-sb-ico-fb   { background:#1877F2; color:#fff; }
.tce-sb-ico-wa   { background:#25D366; color:#fff; }
.tce-sb-ico-x    { background:#000;    color:#fff; }
.tce-sb-ico-tg   { background:#229ED9; color:#fff; }
.tce-sb-ico-em   { background:#e74c3c; color:#fff; }
.tce-sb-ico-copy { background:#f0ece4; color:#1a3d47; }

@media (max-width: 991px) {
    .tce-sb-combined { position:static !important; }
}




.tce-nav-wrap { background:transparent; z-index:1010; transition:box-shadow .3s; position:relative; padding:12px 20px; }

/* Defensive reset against a known-conflicting leftover WPCode snippet
   that applied the classic "full-bleed breakout" hack to this exact
   class: width:100vw + left:50% + margin-left:-50vw. That trick only
   works correctly if the element's parent is exactly viewport-width;
   on this page the parent column is not always full width (a sidebar
   can narrow it), so the 50% math came out different on different
   pages/layouts, sending the bar drifting left by an inconsistent
   amount. This plugin's own JS (see legacy-pages.php) already
   computes left/right/width correctly per page via inline
   !important styles, which normally beat an external !important
   stylesheet rule - EXCEPT for margin, which neither the JS nor the
   .tce-nav-sticky rule below ever touches, so the old snippet's
   margin:-50vw could still slip through untouched. This explicitly
   zeroes it so nothing from an old snippet can reintroduce the bug. */
html body .tce-nav-wrap{
    margin-left:0 !important;
    margin-right:0 !important;
    width:auto !important;
    left:auto !important;
    right:auto !important;
}
/* The sticky state still needs to go full-width - this wins over the
   reset above because it is more specific (adds .tce-nav-sticky) */
html body .tce-nav-wrap.tce-nav-sticky{
    width:100% !important;
}
.tce-nav-wrap.tce-nav-sticky { position:fixed !important; background:transparent !important; padding:4px 20px; z-index:1010 !important; }
/* left / right / top يتحكم فيهم الـ JS، بس العرض والمحاذاة الداخلية ثابتة بالـ CSS
   عشان تتماشى مع نفس حدود الهيدر (max-width:1300px + 22px padding) بشكل موثوق. */
.tce-nav-wrap.tce-nav-sticky .tce-nav-container-outer,
.tce-nav-wrap .tce-nav-container-outer { padding:0 24px; }
body.admin-bar .tce-nav-wrap.tce-nav-sticky { /* JS بيضيف الـ admin bar offset */ }
.tce-nav-container { display:flex; align-items:center; justify-content:flex-start; gap:4px; background:#fff; border-radius:50px; padding:5px 8px; box-shadow:0 1px 12px rgba(26,61,71,0.08); border:1px solid #f0ece4; width:fit-content; max-width:100%; margin:0; overflow-x:auto; scrollbar-width:none; }
.tce-nav-sticky .tce-nav-container { padding:3px 8px; box-shadow:0 2px 16px rgba(26,61,71,0.13); }
.tce-nav-sticky .tce-nav-pill { padding:5px 12px; }
.tce-nav-container::-webkit-scrollbar { display:none; }
.tce-nav-pill { display:flex; align-items:center; gap:5px; padding:7px 14px; font-size:.72em; font-weight:600; color:#6b7f87; text-decoration:none; white-space:nowrap; border-radius:50px; border:none; background:transparent; transition:all .2s; }
.tce-nav-pill:hover { color:#0a525e; background:#f0fafb; }
.tce-nav-pill.active { color:#fff; background:#0a525e; }
.tce-nav-pill.active .tce-nav-ico { opacity:1; }
.tce-nav-ico { opacity:.6; flex-shrink:0; }
.tce-nav-pill:hover .tce-nav-ico { opacity:1; }
/* Sidebar z-index أقل من الـ nav */
.tce-sb-combined { z-index: 50 !important; }
@media(max-width:768px){
    .tce-nav-container { justify-content:flex-start; border-radius:16px; padding:4px 6px; }
    .tce-nav-pill { padding:6px 10px; font-size:.65em; }
}
@media(max-width:767px){
    .tce-nav-wrap.tce-nav-sticky { top: 0 !important; }
}