/* JE CHERCHE À MÉDINE — V3 Design System */
:root {
    --primary-50:#EEF5FC;--primary-100:#D6E8F7;--primary-200:#A8CFF0;--primary-300:#6AAEE5;--primary-400:#3B8ED6;
    --primary-500:#2472B8;--primary-600:#1B5E9E;--primary-700:#164B80;--primary-800:#0F3358;--primary-900:#0A2540;
    --accent-50:#ECFDF5;--accent-100:#D1FAE5;--accent-200:#A7F3D0;--accent-300:#6EE7B7;--accent-400:#34D399;
    --accent-500:#10B981;--accent-600:#059669;--accent-700:#047857;--accent-800:#065F46;
    --gray-50:#FAFAF9;--gray-100:#F5F5F4;--gray-200:#E7E5E4;--gray-300:#D6D3D1;--gray-400:#A8A29E;
    --gray-500:#78716C;--gray-600:#57534E;--gray-700:#44403C;--gray-800:#292524;--gray-900:#1C1917;
    --amber-50:#FFFBEB;--amber-100:#FEF3C7;--amber-400:#FBBF24;--amber-500:#F59E0B;--amber-600:#D97706;
    --sand-50:#FBF8F3;--sand-100:#F5EFE6;--sand-200:#EBE0D0;
    --font-display:'Inter','Noto Sans Arabic',sans-serif;
    --font-body:'Inter','Noto Sans Arabic',sans-serif;
    --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:28px;--radius-full:9999px;
    --shadow-xs:0 1px 2px rgba(28,25,23,0.04);--shadow-sm:0 2px 8px rgba(28,25,23,0.06);
    --shadow-md:0 4px 16px rgba(28,25,23,0.08);--shadow-lg:0 8px 30px rgba(28,25,23,0.1);
    --shadow-xl:0 16px 50px rgba(28,25,23,0.14);--shadow-glow:0 0 0 4px rgba(36,114,184,0.12);
    --ease-out:cubic-bezier(0.22,1,0.36,1);--ease-spring:cubic-bezier(0.34,1.56,0.64,1);
    --dur-fast:150ms;--dur-norm:250ms;--dur-slow:400ms;
}
*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--gray-50);color:var(--gray-800);line-height:1.65;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit;transition:color var(--dur-fast)}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font-family:inherit;font-size:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 1.25rem}
.container-sm{max-width:780px;margin:0 auto;padding:0 1.25rem}
.container-md{max-width:920px;margin:0 auto;padding:0 1.25rem}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fadeUp var(--dur-slow) var(--ease-out) both}
.fade-up-1{animation-delay:.05s}.fade-up-2{animation-delay:.1s}.fade-up-3{animation-delay:.15s}
.fade-up-4{animation-delay:.2s}.fade-up-5{animation-delay:.25s}

/* HEADER */
.site-header{background:rgba(255,255,255,0.92);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border-bottom:1px solid rgba(0,0,0,0.04);position:sticky;top:0;z-index:100}
.header-inner{max-width:1200px;margin:0 auto;padding:0 1.25rem;display:flex;align-items:center;justify-content:space-between;height:68px}
.site-logo{display:flex;align-items:center;gap:.625rem}
.site-logo .logo-icon{width:42px;height:42px;background:linear-gradient(135deg,var(--primary-700),var(--primary-500));border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1rem;box-shadow:0 2px 8px rgba(15,51,88,0.25)}
.site-logo .logo-text h1{font-family:var(--font-display);font-size:1.125rem;font-weight:800;color:var(--primary-800);line-height:1.2;letter-spacing:-.3px}
.site-logo .logo-text p{font-size:.6875rem;color:var(--gray-400)}
.main-nav{display:flex;align-items:center;gap:.25rem}
.main-nav a{font-size:.875rem;font-weight:600;color:var(--gray-500);padding:.5rem .875rem;border-radius:var(--radius-sm);transition:all var(--dur-fast) var(--ease-out)}
.main-nav a:hover,.main-nav a.active{color:var(--primary-700);background:var(--primary-50)}
.lang-switch{padding:.375rem .75rem;font-size:.75rem;font-weight:700;background:var(--sand-50);border:1.5px solid var(--sand-200);border-radius:var(--radius-sm);color:var(--primary-800);cursor:pointer;transition:all var(--dur-fast)}
.lang-switch:hover{background:var(--sand-100);border-color:var(--primary-200)}
.menu-toggle{display:none;background:none;border:none;color:var(--gray-500);cursor:pointer;padding:.5rem;border-radius:var(--radius-sm)}
@media(max-width:768px){.main-nav{display:none}.menu-toggle{display:flex}.main-nav.is-open{display:flex;flex-direction:column;position:absolute;top:68px;left:0;right:0;background:#fff;padding:.75rem;box-shadow:var(--shadow-lg);border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg);z-index:99}.main-nav.is-open a{padding:.75rem 1rem}}

/* HERO */
.hero{background:linear-gradient(160deg,#0A2540 0%,#164B80 40%,#2472B8 80%,#3B8ED6 100%);color:#fff;padding:4.5rem 1.25rem 5rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-60%;right:-20%;width:600px;height:600px;background:radial-gradient(circle,rgba(52,211,153,0.08) 0%,transparent 70%);border-radius:50%}
.hero::after{content:'';position:absolute;bottom:-40%;left:-10%;width:400px;height:400px;background:radial-gradient(circle,rgba(251,191,36,0.06) 0%,transparent 70%);border-radius:50%}
.hero-content{max-width:720px;margin:0 auto;text-align:center;position:relative;z-index:1}
.hero h2{font-family:var(--font-display);font-size:2.75rem;font-weight:800;line-height:1.12;letter-spacing:-1px;margin-bottom:1rem}
.hero .hero-subtitle{color:rgba(255,255,255,0.7);font-size:1.0625rem;line-height:1.6;margin-bottom:2.25rem;max-width:580px;margin-left:auto;margin-right:auto}
@media(min-width:768px){.hero{padding:5.5rem 1.25rem 6rem}.hero h2{font-size:3.25rem}}
.hero-search{max-width:600px;margin:0 auto;position:relative}
.hero-search input{width:100%;padding:1.125rem 1.5rem 1.125rem 3.25rem;border-radius:var(--radius-xl);border:2px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.95);font-size:1rem;color:var(--gray-800);outline:none;box-shadow:0 8px 32px rgba(0,0,0,0.15);transition:all var(--dur-norm) var(--ease-out)}
.hero-search input:focus{border-color:rgba(255,255,255,0.3);box-shadow:0 8px 32px rgba(0,0,0,0.2),0 0 0 4px rgba(255,255,255,0.15);background:#fff}
.hero-search input::placeholder{color:var(--gray-400)}
.hero-search .search-icon{position:absolute;left:1.125rem;top:50%;transform:translateY(-50%);color:var(--gray-400);pointer-events:none}
.hero-stats{display:flex;justify-content:center;gap:2.5rem;margin-top:2.75rem}
.hero-stats .stat{text-align:center}
.hero-stats .stat-number{font-family:var(--font-display);font-size:2rem;font-weight:800;display:block;letter-spacing:-.5px}
.hero-stats .stat-label{color:rgba(255,255,255,0.55);font-size:.8125rem;font-weight:500;margin-top:.125rem}

/* SECTION TITLES */
.section-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.75rem;gap:1rem}
.section-header h3{font-family:var(--font-display);font-size:1.625rem;font-weight:800;color:var(--gray-900);letter-spacing:-.4px}
.section-header a{font-size:.8125rem;font-weight:600;color:var(--primary-500);white-space:nowrap}
.section-header a:hover{color:var(--primary-700)}

/* CATEGORIES MEGA GRID */
.categories-section{padding:3.5rem 0}
.categories-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.categories-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.categories-grid{grid-template-columns:repeat(3,1fr)}}
.cat-mega-card{background:#fff;border-radius:var(--radius-xl);padding:1.5rem;box-shadow:var(--shadow-xs);border:1px solid var(--gray-200);transition:all var(--dur-norm) var(--ease-out);display:block;position:relative;overflow:hidden}
.cat-mega-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--primary-200)}
.cat-mega-card .cat-header{display:flex;align-items:center;gap:.875rem;margin-bottom:.875rem}
.cat-mega-card .cat-emoji{font-size:2rem;width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);flex-shrink:0}
.cat-mega-card .cat-name{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--gray-900);letter-spacing:-.2px}
.cat-mega-card .cat-count{font-size:.75rem;color:var(--gray-400);font-weight:500;margin-top:.125rem}
.cat-subcategories{display:flex;flex-wrap:wrap;gap:.375rem}
.cat-subcategories .subcat-pill{font-size:.6875rem;font-weight:600;padding:.25rem .625rem;border-radius:var(--radius-full);background:var(--gray-100);color:var(--gray-600);transition:all var(--dur-fast);white-space:nowrap}
.cat-mega-card:hover .subcat-pill{background:var(--primary-50);color:var(--primary-700)}
.cat-bg-health{background:#FEF2F2}.cat-bg-food{background:#FFF7ED}.cat-bg-sport{background:#ECFDF5}
.cat-bg-kids{background:#FDF4FF}.cat-bg-school{background:#EFF6FF}.cat-bg-housing{background:#FEF9E7}
.cat-bg-admin{background:#F0F9FF}.cat-bg-translator{background:#FFF1F2}.cat-bg-visa{background:#F0FDF4}
.cat-bg-commerce{background:#FFFBEB}

/* SUBCATEGORY TABS (archive) */
.subcat-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--gray-200)}
.subcat-tab{padding:.5rem 1rem;border-radius:var(--radius-full);font-size:.8125rem;font-weight:600;color:var(--gray-600);background:var(--gray-100);border:1.5px solid transparent;cursor:pointer;transition:all var(--dur-fast) var(--ease-out);text-decoration:none;display:inline-flex;align-items:center;gap:.375rem}
.subcat-tab:hover{background:var(--primary-50);color:var(--primary-700);border-color:var(--primary-200)}
.subcat-tab.active{background:var(--primary-600);color:#fff;border-color:var(--primary-600);box-shadow:0 2px 8px rgba(36,114,184,0.25)}
.subcat-tab .tab-count{font-size:.6875rem;opacity:.7}

/* LISTING CARDS */
.listings-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:640px){.listings-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.listings-grid{grid-template-columns:repeat(3,1fr)}}
.listing-card{background:#fff;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-xs);border:1px solid var(--gray-200);transition:all var(--dur-norm) var(--ease-out)}
.listing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:transparent}
.listing-card .card-image{height:160px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.listing-card .card-image .card-emoji{font-size:3rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1));transition:transform var(--dur-norm) var(--ease-spring)}
.listing-card:hover .card-image .card-emoji{transform:scale(1.1)}
.listing-card .card-body{padding:1.25rem}
.listing-card .card-category{font-size:.6875rem;font-weight:700;color:var(--primary-500);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.375rem}
.listing-card .card-title{font-family:var(--font-display);font-weight:700;color:var(--gray-900);font-size:1.0625rem;letter-spacing:-.2px;line-height:1.3}
.listing-card .card-title a{color:inherit}.listing-card .card-title a:hover{color:var(--primary-600)}
.listing-card .card-location{font-size:.8125rem;color:var(--gray-500);margin-top:.375rem;display:flex;align-items:center;gap:.375rem}
.listing-card .card-rating{display:flex;align-items:center;gap:.375rem;margin-top:.625rem;font-size:.8125rem}
.listing-card .card-rating .rating-star{color:var(--amber-500);font-weight:700}
.listing-card .card-rating .rating-count{color:var(--gray-400);font-size:.75rem}
.listing-card .card-actions{display:flex;gap:.5rem;margin-top:1rem}
.listing-card .card-actions .btn{flex:1;font-size:.75rem;font-weight:700;padding:.625rem;border-radius:var(--radius-md);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.25rem;transition:all var(--dur-fast) var(--ease-out);text-decoration:none;text-align:center}
.listing-card .card-actions .btn:hover{filter:brightness(0.92);transform:translateY(-1px)}
.btn-call{background:var(--accent-500)}.btn-whatsapp{background:#25D366}
.btn-directions{background:var(--primary-500)}.btn-view{background:var(--primary-500)}

/* BADGES */
.badge{display:inline-flex;align-items:center;padding:.1875rem .5rem;border-radius:var(--radius-full);font-size:.6875rem;font-weight:700;letter-spacing:.2px}
.badge-verified{background:var(--accent-500);color:#fff}.badge-sponsored{background:var(--amber-400);color:var(--gray-800)}
.badge-pending{background:var(--amber-100);color:var(--amber-600)}.badge-revalidate{background:#FEF3C7;color:#92400E}
.badge-verified-outline{background:var(--accent-50);color:var(--accent-700);border:1px solid var(--accent-200)}
.badge-easy{background:var(--accent-100);color:var(--accent-700)}.badge-medium{background:var(--amber-100);color:var(--amber-600)}
.badge-hard{background:#FEE2E2;color:#B91C1C}.badge-tag{background:var(--primary-50);color:var(--primary-700)}
.card-image .badge{position:absolute;top:.75rem;padding:.25rem .625rem;font-size:.6875rem;box-shadow:0 2px 6px rgba(0,0,0,0.12)}
.card-image .badge:first-child{left:.75rem}.card-image .badge-sponsored{right:.75rem;left:auto}

/* LATEST LIST */
.latest-list{display:flex;flex-direction:column;gap:.625rem}
.latest-item{background:#fff;border-radius:var(--radius-lg);padding:1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow-xs);border:1px solid var(--gray-200);transition:all var(--dur-norm) var(--ease-out);gap:1rem}
.latest-item:hover{transform:translateX(4px);box-shadow:var(--shadow-md);border-color:var(--primary-200)}
.latest-item .item-left{display:flex;align-items:center;gap:.875rem;min-width:0}
.latest-item .item-icon{width:46px;height:46px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.375rem;flex-shrink:0}
.latest-item .item-name{font-weight:700;color:var(--gray-800);font-size:.9375rem}
.latest-item .item-meta{font-size:.75rem;color:var(--gray-400);margin-top:.125rem}
.latest-item .item-right{display:flex;align-items:center;gap:.75rem;flex-shrink:0}
.latest-item .item-time{font-size:.75rem;color:var(--gray-400);white-space:nowrap}

/* GUIDES */
.guides-section{background:linear-gradient(180deg,var(--sand-50),var(--gray-50));padding:3.5rem 0}
.guides-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:768px){.guides-grid{grid-template-columns:repeat(3,1fr)}}
.guide-card{background:#fff;border-radius:var(--radius-xl);padding:1.5rem;box-shadow:var(--shadow-xs);border:1px solid var(--gray-200);transition:all var(--dur-norm) var(--ease-out);display:block}
.guide-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.guide-card .guide-badges{display:flex;gap:.375rem;margin-bottom:.75rem;flex-wrap:wrap}
.guide-card h4{font-family:var(--font-display);font-weight:700;color:var(--gray-900);font-size:1.0625rem;letter-spacing:-.2px;line-height:1.3}
.guide-card p{font-size:.875rem;color:var(--gray-500);margin-top:.5rem;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.guide-card .guide-meta{display:flex;gap:.5rem;margin-top:.875rem;font-size:.75rem;color:var(--gray-400)}

/* AD BANNER */
.ad-banner{background:linear-gradient(135deg,var(--amber-50),#FFF7ED);border:1px solid #FDE68A;border-radius:var(--radius-xl);padding:1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.ad-banner .ad-label{font-size:.625rem;text-transform:uppercase;letter-spacing:.8px;color:var(--amber-500);font-weight:800}
.ad-banner h4{font-family:var(--font-display);font-size:1.0625rem;font-weight:700;color:var(--gray-900);margin:.25rem 0 0}
.ad-banner p{font-size:.8125rem;color:var(--gray-500);margin:.25rem 0 0}
.ad-badge{background:var(--amber-100);border-radius:var(--radius-md);padding:1.5rem 1.25rem;color:var(--amber-600);font-weight:800;font-size:.75rem;white-space:nowrap}
@media(max-width:640px){.ad-badge{display:none}}

/* CTA */
.cta-section{padding:3rem 1.25rem}
.cta-box{background:linear-gradient(140deg,var(--primary-800),var(--primary-600));border-radius:var(--radius-2xl);padding:3rem 2.5rem;text-align:center;color:#fff;max-width:780px;margin:0 auto;position:relative;overflow:hidden}
.cta-box::before{content:'';position:absolute;top:-40%;right:-20%;width:300px;height:300px;background:radial-gradient(circle,rgba(52,211,153,0.1),transparent 70%);border-radius:50%}
.cta-box h3{font-family:var(--font-display);font-size:1.75rem;font-weight:800;letter-spacing:-.5px;position:relative}
.cta-box p{color:rgba(255,255,255,0.65);margin:.75rem 0 1.5rem;position:relative}
.cta-box .btn-cta{background:#fff;color:var(--primary-800);font-weight:800;padding:.875rem 2rem;border-radius:var(--radius-md);border:none;cursor:pointer;font-size:.9375rem;box-shadow:0 4px 16px rgba(0,0,0,0.15);transition:all var(--dur-fast) var(--ease-out);display:inline-block;position:relative;text-decoration:none}
.cta-box .btn-cta:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,0.2)}

/* FOOTER */
.site-footer{background:var(--gray-900);color:var(--gray-400);padding:3rem 1.25rem}
.footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:768px){.footer-grid{grid-template-columns:1.2fr 1fr 1fr}}
.footer-logo{display:flex;align-items:center;gap:.625rem;margin-bottom:1rem}
.footer-logo .flogo-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--primary-600),var(--primary-400));border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.8125rem}
.footer-logo span{color:#fff;font-weight:700;font-size:.9375rem}
.site-footer p{font-size:.8125rem;line-height:1.7}
.site-footer h4{color:#fff;font-weight:700;font-size:.875rem;letter-spacing:.3px}
.footer-links{list-style:none;padding:0;margin:.75rem 0 0}
.footer-links li{margin-bottom:.5rem}
.footer-links a{font-size:.8125rem;color:var(--gray-400);transition:color var(--dur-fast)}
.footer-links a:hover{color:#fff}
.footer-bottom{max-width:1200px;margin:2rem auto 0;padding-top:1.5rem;border-top:1px solid var(--gray-800);text-align:center;font-size:.75rem;color:var(--gray-500)}

/* BREADCRUMB */
.breadcrumb{display:flex;align-items:center;font-size:.8125rem;color:var(--gray-400);gap:.5rem;padding:1.25rem 0}
.breadcrumb a{color:var(--gray-400)}.breadcrumb a:hover{color:var(--primary-600)}
.breadcrumb .current{color:var(--gray-700);font-weight:600}

/* CATEGORY HEADER */
.category-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem}
.category-header .cat-big-icon{width:68px;height:68px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:2.5rem}
.category-header h2{font-family:var(--font-display);font-size:1.875rem;font-weight:800;color:var(--gray-900);letter-spacing:-.5px}
.category-header p{color:var(--gray-500);font-size:.9375rem;margin-top:.125rem}

/* FILTERS */
.filters-bar{background:#fff;border-radius:var(--radius-xl);padding:1.25rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end;margin-bottom:2rem;border:1px solid var(--gray-200)}
.filters-bar label{display:block;font-size:.75rem;color:var(--gray-500);font-weight:600;margin-bottom:.25rem}
.filters-bar input[type="text"],.filters-bar select{width:100%;padding:.625rem .875rem;border:1.5px solid var(--gray-200);border-radius:var(--radius-md);font-size:.8125rem;outline:none;background:var(--gray-50);transition:all var(--dur-fast)}
.filters-bar input:focus,.filters-bar select:focus{border-color:var(--primary-300);box-shadow:var(--shadow-glow);background:#fff}
.filter-group{flex:1;min-width:180px}
.filter-checkbox{display:flex;align-items:center;gap:.5rem;padding-bottom:.125rem}
.filter-checkbox label{margin-bottom:0;font-size:.875rem;color:var(--gray-600)}
.btn-filter{background:var(--primary-600);color:#fff;padding:.625rem 1.5rem;border-radius:var(--radius-md);font-size:.8125rem;font-weight:700;border:none;cursor:pointer;transition:all var(--dur-fast) var(--ease-out)}
.btn-filter:hover{background:var(--primary-700);transform:translateY(-1px)}

/* PAGINATION */
.pagination{display:flex;justify-content:center;gap:.375rem;margin-top:2.5rem}
.pagination .page-num{width:40px;height:40px;border-radius:var(--radius-md);font-weight:600;font-size:.8125rem;border:1.5px solid var(--gray-200);background:#fff;color:var(--gray-600);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--dur-fast)}
.pagination .page-num:hover{background:var(--gray-50);border-color:var(--primary-200)}
.pagination .page-num.active{background:var(--primary-600);color:#fff;border-color:var(--primary-600);box-shadow:0 2px 8px rgba(36,114,184,0.3)}

/* LISTING DETAIL */
.listing-hero-image{border-radius:var(--radius-2xl);height:220px;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;position:relative;overflow:hidden}
.listing-hero-image .listing-emoji{font-size:5rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.1))}
.listing-hero-image .badges-wrap{position:absolute;top:1rem;left:1rem;display:flex;gap:.5rem}
.listing-hero-image .badge{padding:.3125rem .75rem;box-shadow:0 2px 8px rgba(0,0,0,0.12)}
.listing-detail h2{font-family:var(--font-display);font-size:1.875rem;font-weight:800;color:var(--gray-900);letter-spacing:-.5px}
.listing-detail .listing-name-ar{font-size:1.125rem;color:var(--gray-400);margin-top:.375rem}
.listing-detail .listing-cat-path{font-size:.8125rem;font-weight:600;color:var(--primary-500);margin-top:.5rem}
.action-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1.5rem}
.action-btn{font-weight:700;padding:.875rem;border-radius:var(--radius-lg);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.875rem;box-shadow:var(--shadow-sm);transition:all var(--dur-fast) var(--ease-out);text-decoration:none}
.action-btn:hover{filter:brightness(0.9);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.info-grid{display:grid;grid-template-columns:1fr;gap:.875rem;margin-top:2rem}
@media(min-width:768px){.info-grid{grid-template-columns:repeat(2,1fr)}}
.info-block{background:var(--gray-50);border-radius:var(--radius-lg);padding:1.25rem;border:1px solid var(--gray-200)}
.info-block h4{font-weight:700;color:var(--gray-700);display:flex;align-items:center;gap:.5rem;font-size:.875rem}
.info-block p{font-size:.8125rem;color:var(--gray-600);margin:.375rem 0}
.info-block .text-muted{color:var(--gray-500)}
.description-box{border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:1.5rem;margin-top:1.5rem;background:#fff}
.description-box h4{font-weight:700;color:var(--gray-700);margin-bottom:.75rem}
.description-box p{font-size:.875rem;color:var(--gray-600);line-height:1.75}
.map-placeholder{margin-top:1.5rem;background:var(--gray-100);border-radius:var(--radius-lg);height:280px;display:flex;align-items:center;justify-content:center;border:1px solid var(--gray-200)}
.verification-box{margin-top:1.5rem;background:var(--accent-50);border:1px solid var(--accent-200);border-radius:var(--radius-lg);padding:1.25rem}
.verification-box .veri-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}
.verification-box .veri-header span{font-weight:700;color:var(--accent-800)}
.verification-box p{font-size:.8125rem;color:var(--accent-700);margin:.25rem 0}
.verification-box .text-sm{font-size:.75rem;color:var(--accent-600)}
.report-link{text-align:center;margin-top:1.25rem}
.report-link a{font-size:.8125rem;color:var(--gray-400)}.report-link a:hover{color:#EF4444}

/* GUIDE DETAIL */
.guide-header .guide-badges-row{display:flex;gap:.375rem;margin-bottom:1rem;flex-wrap:wrap}
.guide-header h2{font-family:var(--font-display);font-size:1.875rem;font-weight:800;color:var(--gray-900);letter-spacing:-.5px}
.guide-header .guide-desc{color:var(--gray-500);margin-bottom:2rem}
.guide-steps{display:flex;flex-direction:column;gap:1.5rem}
.guide-step{display:flex;gap:1rem}
.step-number{flex-shrink:0;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:.8125rem}
.step-number.primary{background:var(--primary-600)}.step-number.accent{background:var(--accent-500)}
.step-content h4{font-weight:700;color:var(--gray-900)}
.step-content p{font-size:.875rem;color:var(--gray-600);margin-top:.25rem;line-height:1.7}
.callout{border-radius:0 var(--radius-md) var(--radius-md) 0;padding:1.25rem;border-left:4px solid}
.callout h4{font-weight:700;display:flex;align-items:center;gap:.5rem}
.callout p{font-size:.875rem;margin-top:.375rem;line-height:1.65}
.callout-info{background:#EFF6FF;border-left-color:#3B82F6}.callout-info h4{color:#1E40AF}.callout-info p{color:#1D4ED8}
.callout-success{background:var(--accent-50);border-left-color:var(--accent-400)}.callout-success h4{color:var(--accent-800)}.callout-success p{color:var(--accent-700)}
.callout-warning{background:#FFF7ED;border-left-color:#FB923C}.callout-warning h4{color:#9A3412}.callout-warning p{color:#C2410C}
.faq-section h3{font-family:var(--font-display);font-size:1.25rem;font-weight:800;color:var(--gray-900)}
.faq-list{display:flex;flex-direction:column;gap:.625rem;margin-top:1rem}
.faq-item{background:var(--gray-50);border-radius:var(--radius-md);padding:1rem;border:1px solid var(--gray-200)}
.faq-item h4{font-weight:700;color:var(--gray-700);font-size:.9375rem}
.faq-item p{font-size:.8125rem;color:var(--gray-500);margin-top:.25rem}

/* FORM */
.submit-form-page{padding:3rem 0;background:#fff}
.submit-form-page h2{font-family:var(--font-display);font-size:1.875rem;font-weight:800;color:var(--gray-900);letter-spacing:-.5px}
.submit-form-page .form-desc{color:var(--gray-500);margin-bottom:2rem}
.jcm-form{display:flex;flex-direction:column;gap:1.25rem}
.jcm-form label{display:block;font-size:.8125rem;font-weight:600;color:var(--gray-700);margin-bottom:.25rem}
.jcm-form input[type="text"],.jcm-form input[type="tel"],.jcm-form input[type="email"],.jcm-form input[type="url"],.jcm-form select,.jcm-form textarea{width:100%;padding:.75rem 1rem;border:1.5px solid var(--gray-200);border-radius:var(--radius-md);font-size:.875rem;outline:none;background:var(--gray-50);transition:all var(--dur-fast)}
.jcm-form input:focus,.jcm-form select:focus,.jcm-form textarea:focus{border-color:var(--primary-300);box-shadow:var(--shadow-glow);background:#fff}
.jcm-form textarea{resize:none}
.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.btn-submit{width:100%;background:var(--primary-600);color:#fff;font-weight:800;padding:.875rem;border-radius:var(--radius-md);border:none;cursor:pointer;font-size:1rem;box-shadow:0 4px 16px rgba(36,114,184,0.25);transition:all var(--dur-fast) var(--ease-out)}
.btn-submit:hover{background:var(--primary-700);transform:translateY(-2px);box-shadow:0 6px 24px rgba(36,114,184,0.3)}
.form-notice{font-size:.75rem;color:var(--gray-400);text-align:center;margin-top:.5rem}

/* GRADIENTS */
.bg-primary-gradient{background:linear-gradient(135deg,var(--primary-100),var(--primary-200))}
.bg-accent-gradient{background:linear-gradient(135deg,var(--accent-100),var(--accent-200))}
.bg-warning-gradient{background:linear-gradient(135deg,var(--amber-100),#FDE68A)}
.bg-red-gradient{background:linear-gradient(135deg,#FEE2E2,#FECACA)}

/* MISC */
.lang-badges{display:flex;gap:.375rem;flex-wrap:wrap}
.section-divider{height:3px;background:linear-gradient(90deg,var(--primary-700),var(--accent-500),var(--amber-500));border-radius:2px;opacity:.6}
[dir="rtl"] .hero-search .search-icon{left:auto;right:1.125rem}
[dir="rtl"] .hero-search input{padding-left:1.5rem;padding-right:3.25rem}
[dir="rtl"] .latest-item:hover{transform:translateX(-4px)}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
body.admin-bar .site-header{top:32px}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}

/* ═══════════════════════════════════════
   V3.1 FIXES — Emoji Rendering + Polish
   ═══════════════════════════════════════ */
/* Emoji font stack for proper rendering */
.cat-emoji,.card-emoji,.listing-emoji,.item-icon,.cat-big-icon,.cat-icon {
    font-family: 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Twemoji Mozilla',sans-serif !important;
    line-height:1;
}
/* Fix category card emoji size */
.cat-mega-card .cat-emoji {
    font-size:2.25rem;
    width:56px;height:56px;
    display:flex;align-items:center;justify-content:center;
    border-radius:var(--radius-lg);
    flex-shrink:0;
}
/* Fix listing card emoji in image area */
.listing-card .card-image .card-emoji {
    font-size:3.5rem;
    font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important;
}
/* Fix latest list item icon */
.latest-item .item-icon {
    font-size:1.5rem;
    font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important;
}
/* Fix category archive big icon */
.category-header .cat-big-icon {
    font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important;
    font-size:2.75rem;
}
/* Fix listing detail hero emoji */
.listing-hero-image .listing-emoji {
    font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif !important;
    font-size:5rem;
}
/* Category card improved — larger touch target */
.cat-mega-card {
    min-height:120px;
}
/* Ensure card image has proper min-height */
.listing-card .card-image {
    min-height:160px;
    background-size:cover;
    background-position:center;
}
/* Stat numbers on hero — improve size */
.hero-stats .stat-number {
    font-size:2.25rem;
}
/* Category grid — ensure 2 cols on tablet */
@media(min-width:480px) and (max-width:639px){
    .categories-grid{grid-template-columns:repeat(2,1fr)}
}
/* Mobile nav open — smooth */
.main-nav.is-open a {
    padding:.75rem 1rem;
    width:100%;
}
/* Smooth scroll offset for sticky header */
html { scroll-padding-top: 80px; }
/* Better focus styles */
:focus-visible {
    outline:2px solid var(--primary-400);
    outline-offset:2px;
    border-radius:var(--radius-sm);
}
/* Listing card image gradient overlay for better badge readability */
.listing-card .card-image::after {
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:50px;
    background:linear-gradient(to bottom,rgba(0,0,0,0.06),transparent);
    pointer-events:none;
}

/* Twemoji — rendered as <img> tags */
img.emoji {
    display:inline-block;
    height:1em;
    width:1em;
    margin:0 .05em 0 .1em;
    vertical-align:-0.1em;
}
/* Category card emoji — larger */
.cat-mega-card .cat-emoji img.emoji,
.cat-emoji img.emoji {
    height:2.25rem;
    width:2.25rem;
}
/* Listing card image emoji */
.card-image .card-emoji img.emoji,
.card-emoji img.emoji {
    height:3.5rem;
    width:3.5rem;
}
/* Latest list item emoji */
.item-icon img.emoji {
    height:1.5rem;
    width:1.5rem;
}
/* Category archive big icon */
.cat-big-icon img.emoji {
    height:2.75rem;
    width:2.75rem;
}
/* Single listing hero emoji */
.listing-emoji img.emoji {
    height:5rem;
    width:5rem;
}
/* Hero stats — make sure no emoji interfere */
.hero-stats img.emoji { display:none; }

/* ═══════════════════════════════════════
   V3.2 — PREMIUM MOBILE DESIGN + FIXES
   ═══════════════════════════════════════ */

/* === CATEGORY MEGA CARDS — Premium === */
.cat-mega-card {
    border:1.5px solid var(--gray-200);
    padding:1.25rem 1.125rem;
    transition:all 300ms var(--ease-out);
}
.cat-mega-card:hover,
.cat-mega-card:active {
    border-color:var(--primary-300);
    box-shadow:0 8px 25px rgba(20,67,96,0.1);
}
.cat-mega-card .cat-header {
    gap:1rem;
    margin-bottom:1rem;
}
.cat-mega-card .cat-emoji {
    width:56px;height:56px;
    border-radius:var(--radius-lg);
    font-size:1.75rem;
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.cat-mega-card .cat-name {
    font-size:1.0625rem;
    font-weight:800;
    letter-spacing:-.3px;
}
.cat-mega-card .cat-count {
    font-size:.8125rem;
    color:var(--gray-400);
    font-weight:500;
}
/* Pill hover animation */
.cat-subcategories .subcat-pill {
    font-size:.75rem;
    padding:.3125rem .75rem;
    border:1px solid var(--gray-200);
    background:white;
    transition:all 200ms var(--ease-out);
}
.cat-mega-card:hover .subcat-pill,
.cat-mega-card:active .subcat-pill {
    background:var(--primary-50);
    color:var(--primary-700);
    border-color:var(--primary-200);
}

/* === MOBILE CATEGORY GRID — 2 cols even on small screens === */
@media(max-width:639px) {
    .categories-grid {
        grid-template-columns:1fr;
        gap:.75rem;
    }
    .cat-mega-card {
        padding:1rem;
    }
    .cat-mega-card .cat-emoji {
        width:48px;height:48px;
        font-size:1.5rem;
    }
    .cat-mega-card .cat-name {
        font-size:.9375rem;
    }
    .cat-subcategories {
        gap:.3125rem;
    }
    .cat-subcategories .subcat-pill {
        font-size:.6875rem;
        padding:.25rem .5rem;
    }
}

/* === LISTING CARDS — Premium === */
.listing-card {
    border:1.5px solid var(--gray-200);
}
.listing-card:hover {
    border-color:transparent;
}
.listing-card .card-image {
    height:170px;
    background-size:cover;
}
.listing-card .card-body {
    padding:1.125rem 1.25rem 1.25rem;
}
.listing-card .card-title {
    font-size:1rem;
    line-height:1.35;
}
.listing-card .card-rating {
    margin-top:.5rem;
    padding:.375rem .625rem;
    background:var(--amber-50);
    border-radius:var(--radius-sm);
    display:inline-flex;
    gap:.375rem;
    font-size:.8125rem;
    font-weight:600;
}
.listing-card .card-rating .rating-star {
    color:var(--amber-500);
}
.listing-card .card-rating .rating-count {
    color:var(--gray-500);
    font-weight:500;
}

/* Mobile card actions — better touch targets */
@media(max-width:639px) {
    .listing-card .card-actions .btn {
        padding:.75rem;
        font-size:.8125rem;
        border-radius:var(--radius-md);
    }
    .listings-grid {
        gap:1rem;
    }
}

/* === SUBCATEGORY TABS — Premium === */
.subcat-tabs {
    padding:.75rem 0 1.25rem;
    gap:.5rem;
    border-bottom:2px solid var(--gray-100);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.subcat-tabs::-webkit-scrollbar { display:none; }
.subcat-tab {
    padding:.5rem 1.125rem;
    font-size:.8125rem;
    font-weight:700;
    border:2px solid var(--gray-200);
    background:white;
    white-space:nowrap;
    flex-shrink:0;
}
.subcat-tab:hover {
    background:var(--primary-50);
    border-color:var(--primary-300);
    color:var(--primary-700);
}
.subcat-tab.active {
    background:var(--primary-600);
    color:white;
    border-color:var(--primary-600);
    box-shadow:0 2px 10px rgba(27,94,158,0.3);
}

/* === HERO — Better mobile === */
@media(max-width:639px) {
    .hero {
        padding:3rem 1rem 3.5rem;
    }
    .hero h2 {
        font-size:2rem;
        letter-spacing:-.5px;
    }
    .hero .hero-subtitle {
        font-size:.9375rem;
    }
    .hero-search input {
        padding:1rem 1.25rem 1rem 2.75rem;
        font-size:.9375rem;
        border-radius:var(--radius-lg);
    }
    .hero-search .search-icon {
        left:.875rem;
    }
    .hero-stats {
        gap:1.5rem;
        margin-top:2rem;
    }
    .hero-stats .stat-number {
        font-size:1.625rem;
    }
    .hero-stats .stat-label {
        font-size:.6875rem;
    }
}

/* === FILTERS BAR — Better mobile === */
@media(max-width:639px) {
    .filters-bar {
        flex-direction:column;
        padding:1rem;
        gap:.75rem;
    }
    .filter-group {
        min-width:100%;
    }
    .btn-filter {
        width:100%;
        padding:.75rem;
        text-align:center;
    }
}

/* === CATEGORY HEADER — Premium === */
.category-header {
    gap:1.125rem;
    margin-bottom:1.5rem;
    padding-bottom:1.5rem;
    border-bottom:2px solid var(--gray-100);
}
.category-header .cat-big-icon {
    width:72px;height:72px;
    border-radius:var(--radius-xl);
    font-size:2.5rem;
    box-shadow:0 4px 12px rgba(0,0,0,0.06);
}
.category-header h2 {
    font-size:1.75rem;
    letter-spacing:-.5px;
}
@media(max-width:639px) {
    .category-header .cat-big-icon {
        width:60px;height:60px;
        font-size:2rem;
    }
    .category-header h2 {
        font-size:1.5rem;
    }
}

/* === SUBCATEGORY GRID on category page === */
.subcat-grid-title {
    font-family:var(--font-display);
    font-size:1.125rem;
    font-weight:700;
    color:var(--gray-700);
    margin-bottom:1rem;
    display:flex;
    align-items:center;
    gap:.5rem;
}
.subcat-grid-title::before {
    content:'';
    width:4px;
    height:1.25rem;
    background:var(--primary-500);
    border-radius:2px;
}

/* === HEADER — Better mobile === */
@media(max-width:639px) {
    .header-inner {
        height:60px;
    }
    .site-logo .logo-icon {
        width:36px;height:36px;
        font-size:.875rem;
    }
    .site-logo .logo-text h1 {
        font-size:1rem;
    }
    .site-logo .logo-text p {
        font-size:.625rem;
    }
}

/* === FOOTER — Better mobile === */
@media(max-width:639px) {
    .site-footer {
        padding:2rem 1rem;
    }
    .footer-grid {
        gap:1.5rem;
    }
}

/* === SECTION SPACING — Consistent === */
.categories-section {
    padding:2.5rem 0 3rem;
}
@media(min-width:640px) {
    .categories-section {
        padding:3.5rem 0 4rem;
    }
}

/* === EMPTY STATE — Premium === */
.empty-state {
    text-align:center;
    padding:3rem 1rem;
    grid-column:1/-1;
}
.empty-state .empty-icon {
    font-size:3.5rem;
    margin-bottom:1rem;
    opacity:.8;
}
.empty-state .empty-title {
    font-family:var(--font-display);
    font-weight:700;
    color:var(--gray-600);
    font-size:1.0625rem;
}
.empty-state .empty-desc {
    font-size:.875rem;
    color:var(--gray-400);
    margin-top:.375rem;
}

/* === BREADCRUMB — Better mobile === */
@media(max-width:639px) {
    .breadcrumb {
        font-size:.75rem;
        padding:1rem 0;
    }
}

/* === SECTION DIVIDER — Subtle === */
.section-divider {
    height:2px;
    background:linear-gradient(90deg,transparent,var(--gray-200),transparent);
    border-radius:1px;
    opacity:1;
}

/* === ACTION BUTTONS — Better mobile === */
@media(max-width:639px) {
    .action-buttons {
        grid-template-columns:1fr 1fr;
        gap:.5rem;
    }
    .action-buttons .action-btn:last-child {
        grid-column:1/-1;
    }
    .action-btn {
        font-size:.8125rem;
        padding:.75rem;
    }
}


/* ═══════════════════════════════════════════════════
   V6 HOMEPAGE — Pixel-perfect clone of preview HTML
   Colors: Primary #1B4F72→#2E86C1→#3498DB  Accent #2ECC71  Warning #F1C40F
   ═══════════════════════════════════════════════════ */

/* HERO V6 — gradient 135deg matching original */
.hero-v6{background:linear-gradient(135deg,#1B4F72 0%,#2E86C1 50%,#3498DB 100%);color:#fff;padding:4rem 1rem 3.5rem;text-align:center}
.hero-v6__inner{max-width:56rem;margin:0 auto}
.hero-v6__title{font-size:2.5rem;font-weight:800;line-height:1.15;margin-bottom:1rem;letter-spacing:-.5px}
@media(min-width:768px){.hero-v6__title{font-size:3rem}}
.hero-v6__sub{color:#AED6F1;font-size:1.125rem;line-height:1.7;max-width:42rem;margin:0 auto 2rem;font-weight:400}
.hero-v6__search{max-width:42rem;margin:0 auto 2.5rem;position:relative}
.hero-v6__search form{position:relative}
.hero-v6__search svg{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);z-index:2;pointer-events:none}
.hero-v6__search input[type="text"]{width:100%;padding:1rem 1.5rem 1rem 3.5rem;border-radius:16px;border:none;font-size:1.125rem;color:var(--gray-800);box-shadow:0 12px 40px rgba(0,0,0,0.2);outline:none}
.hero-v6__search input:focus{box-shadow:0 12px 40px rgba(0,0,0,0.2),0 0 0 4px rgba(133,193,233,0.5)}
.hero-v6__search input::placeholder{color:#9ca3af}
.hero-v6__stats{display:flex;justify-content:center;gap:2rem;margin-top:2.5rem;font-size:.875rem}
.h-stat{text-align:center}
.h-stat__n{display:block;font-size:1.875rem;font-weight:700}
.h-stat__l{color:#AED6F1;margin-top:.125rem;display:block}

/* SECTION HEADS */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}
.sec-head h3{font-size:1.5rem;font-weight:700;color:var(--gray-800)}
.sec-head a{font-size:.875rem;font-weight:500;color:#2E86C1;transition:color .15s}
.sec-head a:hover{text-decoration:underline}
.sec-title{font-size:1.5rem;font-weight:700;color:var(--gray-800);margin-bottom:1.5rem}

/* CATEGORIES V6 — 5-col grid, rounded-2xl, emoji 4xl */
.cats-v6{padding:3rem 0}
.cats-v6__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.ccard6{display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:16px;padding:1.25rem;text-align:center;border:1px solid var(--gray-100);box-shadow:var(--shadow-xs);transition:all .3s ease;cursor:pointer}
.ccard6:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,0.12)}
.ccard6__em{font-size:2.25rem;margin-bottom:.75rem}
.ccard6__nm{font-weight:600;font-size:.875rem;color:var(--gray-800)}
.ccard6__ct{font-size:.75rem;color:#9ca3af;margin-top:.25rem}

/* AD BANNER */
.ad-banner-wrap{margin-bottom:2rem}

/* FEATURED V6 — 3 cards, h-44 gradient tops, text-6xl emoji */
.feat-v6{padding:2rem 0}
.feat-v6__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.fcard6{background:#fff;border-radius:16px;overflow:hidden;border:1px solid var(--gray-100);box-shadow:var(--shadow-xs);transition:all .3s ease}
.fcard6:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,0.12)}
.fcard6__top{display:flex;align-items:center;justify-content:center;height:176px;position:relative}
.fcard6__top.from-primary{background:linear-gradient(135deg,#D6EAF8,#AED6F1)}
.fcard6__top.from-accent{background:linear-gradient(135deg,#D5F5E3,#ABEBC6)}
.fcard6__top.from-warning{background:linear-gradient(135deg,#FCF3CF,#F9E79F)}
.fcard6__em{font-size:3.75rem}
.bv6{position:absolute;top:.75rem;left:.75rem;background:#2ECC71;color:#fff;font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:9999px}
.bs6{position:absolute;top:.75rem;right:.75rem;background:#FBBF24;color:#92400E;font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:9999px}
.fcard6__body{padding:1.25rem}
.fcard6__cat{font-size:.75rem;font-weight:600;color:#2E86C1;margin-bottom:.25rem}
.fcard6__body h4{font-weight:700;font-size:1.125rem;color:var(--gray-800);margin-bottom:.25rem}
.fcard6__body h4 a{color:inherit}
.fcard6__addr{font-size:.875rem;color:#6b7280;display:flex;align-items:center;gap:.25rem;margin-top:.25rem}
.fcard6__btns{display:flex;gap:.5rem;margin-top:1rem}
.abtn6{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.25rem;padding:.625rem 0;font-size:.75rem;font-weight:600;border-radius:12px;color:#fff;transition:all .15s}
.abtn6--call{background:#2ECC71}.abtn6--call:hover{background:#27AE60}
.abtn6--wa{background:#22c55e}.abtn6--wa:hover{background:#16a34a}
.abtn6--dir{background:#3498DB}.abtn6--dir:hover{background:#2E86C1}

/* LATEST V6 — list items */
.latest-v6{padding:2rem 0}
.latest-v6__list{display:flex;flex-direction:column;gap:.75rem}
.litem6{display:flex;align-items:center;gap:1rem;background:#fff;border-radius:12px;padding:1rem;border:1px solid var(--gray-100);box-shadow:var(--shadow-xs);transition:all .3s ease}
.litem6:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,0.12)}
.litem6__ico{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.litem6__ico span{font-size:1.5rem}
.litem6__info{flex:1;min-width:0}
.litem6__info h4{font-weight:600;color:var(--gray-800);font-size:.9375rem}
.litem6__info p{font-size:.75rem;color:#9ca3af;margin-top:.125rem}
.litem6__right{display:flex;align-items:center;gap:.75rem;flex-shrink:0}
.bv6-sm{background:#EAFAF1;color:#229954;font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:9999px;border:1px solid #ABEBC6}
.litem6__time{font-size:.75rem;color:#9ca3af}

/* GUIDES V6 — bg tinted, 3-col */
.guides-v6{background:rgba(235,245,251,0.5);padding:3rem 0}
.guides-v6__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.gcard6{display:flex;flex-direction:column;background:#fff;border-radius:16px;padding:1.5rem;box-shadow:var(--shadow-xs);transition:all .3s ease}
.gcard6:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,0.12)}
.gcard6__badges{display:flex;gap:.5rem;margin-bottom:.75rem}
.gbadge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:9999px;font-size:.7rem;font-weight:600}
.bg-easy{background:#D5F5E3;color:#229954}.bg-med{background:#FCF3CF;color:#D4AC0D}.bg-hard{background:#FFF1F2;color:#BE123C}
.bg-tag{background:#D6EAF8;color:#2471A3}
.gcard6 h4{font-weight:700;font-size:1.125rem;color:var(--gray-800);margin-bottom:.5rem}
.gcard6 p{font-size:.875rem;color:#6b7280;flex:1;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gcard6__meta{display:flex;gap:.5rem;font-size:.75rem;color:#9ca3af;margin-top:1rem}

/* CTA V6 — gradient dark primary, rounded-3xl */
.cta-v6{max-width:56rem;margin:0 auto;padding:3rem 1rem}
.cta-v6__box{background:linear-gradient(135deg,#2471A3,#1B4F72);border-radius:24px;padding:2.5rem;text-align:center;color:#fff}
.cta-v6__box h3{font-size:1.875rem;font-weight:700;margin-bottom:.75rem}
.cta-v6__box p{color:#AED6F1;margin-bottom:1.5rem;font-size:1rem}
.cta-v6__btn{display:inline-flex;background:#fff;color:#1B4F72;font-weight:700;padding:.875rem 2rem;border-radius:12px;font-size:.875rem;transition:all .2s;box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.cta-v6__btn:hover{background:#EBF5FB;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2)}

/* RESPONSIVE */
@media(max-width:1024px){.cats-v6__grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:768px){
  .cats-v6__grid{grid-template-columns:repeat(3,1fr)}
  .feat-v6__grid,.guides-v6__grid{grid-template-columns:1fr}
  .hero-v6{padding:3rem 1rem 2.5rem}
  .hero-v6__title{font-size:2rem}
  .hero-v6__stats{gap:1.5rem}
  .h-stat__n{font-size:1.5rem}
  .fcard6__top{height:140px}
  .litem6__right{flex-direction:column;align-items:flex-end;gap:.25rem}
}
@media(max-width:480px){
  .cats-v6__grid{grid-template-columns:repeat(2,1fr)}
  .hero-v6__title{font-size:1.625rem}
  .hero-v6__sub{font-size:1rem}
  .fcard6__btns{flex-wrap:wrap}
  .abtn6{flex:none;width:calc(50% - .25rem)}
}


/* ================================
   MOBILE DISPLAY FIXES (2026-04)
   ================================ */

/* Prevent horizontal overflow on mobile */
@media (max-width: 639px) {
  html, body { overflow-x: hidden; }
  body { max-width: 100vw; }

  /* CTA banner: reduce excessive padding so text fits without awkward wraps */
  .cta-box { padding: 2rem 1.25rem !important; }
  .cta-box h3 { font-size: 1.375rem !important; }
  .cta-box .btn-cta { padding: 0.75rem 1.25rem !important; }

  /* Comment form textarea: respect mobile viewport */
  textarea,
  #comment,
  .comment-form textarea { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; }
  input[type="text"], input[type="email"], input[type="url"],
  input[type="tel"], input[type="search"], input[type="password"] {
    max-width: 100% !important; box-sizing: border-box !important;
  }

  /* Ensure images never exceed viewport */
  img, iframe, video { max-width: 100% !important; height: auto; }

  /* Ad banner container safeguard */
  .ad-banner-wrap, .ad-banner-default { max-width: 100%; overflow: hidden; }
}

/* Share toast (visible bug fix): must stay hidden by default.
   HTML "hidden" attribute was being overridden by display:inline-block */
.jcm-share-toast[hidden] { display: none !important; }
