/* ClickCard full visual rebrand - non destructive UI layer */
:root{
  --cc-blue:#36b7ff;
  --cc-blue-2:#0674d8;
  --cc-navy:#071827;
  --cc-yellow:#ffd44d;
  --cc-yellow-2:#ffb703;
  --cc-white:#ffffff;
  --cc-ink:#0a0f16;
  --cc-muted:#64748b;
  --cc-soft:#f6fbff;
  --cc-border:rgba(7,24,39,.10);
  --cc-shadow:0 24px 70px rgba(7,24,39,.12);
  --cc-radius:28px;
  --primary:var(--cc-blue-2) !important;
  --primary-dark:#045aa7 !important;
  --primary-light:var(--cc-blue) !important;
  --accent:var(--cc-yellow) !important;
  --background:var(--cc-soft) !important;
  --dark:var(--cc-ink) !important;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Tajawal','Inter','Segoe UI',sans-serif !important;
  background:
    radial-gradient(circle at 15% 4%, rgba(255,212,77,.28), transparent 25rem),
    radial-gradient(circle at 87% 10%, rgba(54,183,255,.22), transparent 26rem),
    linear-gradient(180deg,#fff 0%,#f6fbff 42%,#fff 100%) !important;
  color:var(--cc-ink) !important;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(rgba(7,24,39,.035) 1px, transparent 1px),linear-gradient(90deg, rgba(7,24,39,.035) 1px, transparent 1px);
  background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 80%);
}
::selection{background:var(--cc-yellow);color:var(--cc-navy);} 
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--cc-blue),var(--cc-yellow)) !important;border-radius:999px;}
/* Header */
.site-header, header.site-header, .main-header, header:not(.plain-header){
  background:rgba(255,255,255,.82) !important;color:var(--cc-navy) !important;
  border:1px solid rgba(7,24,39,.08) !important;border-radius:0 0 34px 34px !important;
  box-shadow:0 14px 44px rgba(7,24,39,.08) !important;backdrop-filter:blur(22px) saturate(160%) !important;
}
.site-header{padding:.9rem 0 !important;}
.wave-container{display:none !important;}
.header-container{max-width:1220px !important;padding-inline:clamp(16px,4vw,42px) !important;}
.logo-section,.logo-container{color:var(--cc-navy) !important;gap:.75rem !important;}
.logo-text{color:var(--cc-navy) !important;text-shadow:none !important;font-weight:900 !important;letter-spacing:-.03em !important;}
.logo-text::after{content:"";display:inline-block;width:9px;height:9px;margin-inline-start:7px;border-radius:99px;background:var(--cc-yellow);box-shadow:0 0 0 6px rgba(255,212,77,.25);vertical-align:middle;}
.logo-img{filter:none !important;border-radius:16px !important;box-shadow:0 10px 28px rgba(54,183,255,.22) !important;}
.nav-menu,.nav{gap:.35rem !important;}
.nav-link, nav a{
  color:var(--cc-navy) !important;background:transparent !important;border:1px solid transparent !important;
  border-radius:999px !important;font-weight:800 !important;
}
.nav-link:hover,nav a:hover,.nav-link.active{
  background:rgba(54,183,255,.12) !important;border-color:rgba(54,183,255,.25) !important;color:#045aa7 !important;transform:translateY(-2px);
}
.nav-link::after, nav a::after{background:var(--cc-yellow) !important;}
.account-btn,.btn-login,.login-btn,.btn,.cta-button,button[type="submit"],input[type="submit"],.submit-btn,.primary-btn{
  border:0 !important;border-radius:999px !important;font-weight:900 !important;
  background:linear-gradient(135deg,var(--cc-blue),var(--cc-blue-2)) !important;color:#fff !important;
  box-shadow:0 14px 34px rgba(6,116,216,.25) !important;transition:.25s ease !important;
}
.account-btn:hover,.btn:hover,.cta-button:hover,button[type="submit"]:hover,input[type="submit"]:hover{transform:translateY(-3px) !important;box-shadow:0 18px 46px rgba(6,116,216,.34) !important;}
.btn.secondary,.secondary-btn,.outline-btn{background:#fff !important;color:var(--cc-navy) !important;border:1px solid var(--cc-border) !important;box-shadow:0 10px 28px rgba(7,24,39,.08) !important;}
.menu-toggle{background:var(--cc-navy) !important;color:#fff !important;border-radius:16px !important;}
/* Hero and sections */
.hero,.hero-section,.landing-hero,.main-hero{
  background:
    radial-gradient(circle at 18% 18%, rgba(255,212,77,.38), transparent 20rem),
    radial-gradient(circle at 78% 20%, rgba(54,183,255,.30), transparent 24rem),
    linear-gradient(135deg,#ffffff 0%,#eef9ff 55%,#fff9df 100%) !important;
  color:var(--cc-navy) !important;min-height:calc(100vh - var(--header-h,90px)) !important;
  position:relative;overflow:hidden;border-bottom:1px solid rgba(7,24,39,.08);
}
.hero::before,.hero-section::before,.landing-hero::before,.main-hero::before{
  content:"" !important;position:absolute;inset:0;background:none !important;opacity:1 !important;
  background-image:radial-gradient(circle at 20% 30%, rgba(255,255,255,.8) 0 2px, transparent 3px),radial-gradient(circle at 80% 75%, rgba(7,24,39,.06) 0 2px, transparent 3px) !important;background-size:90px 90px,120px 120px !important;
}
.hero-content,.hero .content,.landing-content{position:relative;z-index:2;max-width:980px !important;}
h1,.hero h1,.section-title{color:var(--cc-navy) !important;font-weight:900 !important;letter-spacing:-.055em !important;text-shadow:none !important;line-height:1.05 !important;}
h1 strong,.gradient-text,.highlight{background:linear-gradient(100deg,var(--cc-blue-2),var(--cc-blue),var(--cc-yellow-2));-webkit-background-clip:text;background-clip:text;color:transparent !important;}
p,.hero p{color:#334155 !important;line-height:1.85 !important;text-shadow:none !important;}
section{position:relative;}
section:nth-of-type(even){background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(246,251,255,.75)) !important;}
.card,.feature-card,.template-card,.pricing-card,.plan-card,.stat-card,.dashboard-card,.form-container,.auth-container,.panel,.box,.item-card{
  background:rgba(255,255,255,.86) !important;border:1px solid var(--cc-border) !important;border-radius:var(--cc-radius) !important;
  box-shadow:var(--cc-shadow) !important;backdrop-filter:blur(16px) !important;overflow:hidden;
}
.card:hover,.feature-card:hover,.template-card:hover,.pricing-card:hover,.plan-card:hover{transform:translateY(-6px);box-shadow:0 32px 86px rgba(7,24,39,.16) !important;}
.card::before,.feature-card::before,.pricing-card::before,.plan-card::before{
  content:"";display:block;height:5px;background:linear-gradient(90deg,var(--cc-blue),var(--cc-yellow));
}
input,select,textarea{
  border:1px solid rgba(7,24,39,.12) !important;border-radius:18px !important;background:#fff !important;color:var(--cc-ink) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7) !important;
}
input:focus,select:focus,textarea:focus{outline:none !important;border-color:var(--cc-blue) !important;box-shadow:0 0 0 4px rgba(54,183,255,.16) !important;}
.table,table{border-radius:22px !important;overflow:hidden !important;border:1px solid var(--cc-border) !important;background:#fff !important;box-shadow:0 20px 45px rgba(7,24,39,.08) !important;}
th{background:linear-gradient(135deg,var(--cc-navy),#12395f) !important;color:#fff !important;}
.badge,.tag,.label{background:rgba(255,212,77,.24) !important;color:#7a5200 !important;border:1px solid rgba(255,183,3,.25) !important;border-radius:999px !important;}
footer,.site-footer{background:var(--cc-navy) !important;color:#fff !important;border-radius:36px 36px 0 0 !important;}
footer p,footer a,.site-footer p,.site-footer a{color:rgba(255,255,255,.82) !important;}
/* mobile */
@media(max-width:992px){
  .site-header{border-radius:0 0 24px 24px !important;}
  .nav-menu.open,#mainNav.open{background:rgba(255,255,255,.96) !important;color:var(--cc-navy) !important;border:1px solid var(--cc-border) !important;box-shadow:var(--cc-shadow) !important;border-radius:28px !important;}
  .hero,.hero-section{padding-inline:18px !important;text-align:center !important;}
  h1,.hero h1{font-size:clamp(2.2rem,12vw,4.2rem) !important;}
}
[dir="ltr"] body, html[lang="en"] body{font-family:'Inter','Segoe UI',Arial,sans-serif !important;}

/* ClickCard V2 - complete structure overhaul for admin/user/partner/private areas */
:root{
  --cc-sidebar:300px;
  --cc-topbar:76px;
  --cc-glass:rgba(255,255,255,.78);
  --cc-deep:#050b12;
  --cc-panel:#ffffff;
}
body.cc-private-page,
body.admin-shell-active,
body.user-shell-active,
body[class*="partner"]{
  background:
    radial-gradient(circle at 8% 8%, rgba(255,212,77,.35), transparent 22rem),
    radial-gradient(circle at 92% 2%, rgba(54,183,255,.30), transparent 25rem),
    linear-gradient(135deg,#f8fcff 0%,#ffffff 45%,#fff9df 100%) !important;
  color:var(--cc-ink) !important;
}
body.admin-shell-active{padding-top:var(--cc-topbar) !important;padding-right:var(--cc-sidebar) !important;}
body.user-shell-active{padding-top:var(--cc-topbar) !important;padding-right:var(--cc-sidebar) !important;}
.admin-shell-header,.user-shell-header{
  height:var(--cc-topbar) !important;
  background:rgba(255,255,255,.76) !important;
  border-bottom:1px solid rgba(7,24,39,.09) !important;
  box-shadow:0 18px 55px rgba(7,24,39,.10) !important;
  backdrop-filter:blur(24px) saturate(170%) !important;
  color:var(--cc-navy) !important;
  border-radius:0 0 30px 30px !important;
}
.admin-shell-sidebar,.user-shell-sidebar{
  width:var(--cc-sidebar) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,212,77,.42), transparent 18rem),
    linear-gradient(180deg,#06192a 0%,#0b4d80 52%,#0674d8 100%) !important;
  border-left:1px solid rgba(255,255,255,.16) !important;
  box-shadow:-24px 0 70px rgba(7,24,39,.22) !important;
  color:#fff !important;
}
.admin-shell-brand,.user-shell-sidebar .profile{
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:28px !important;
  padding:1.25rem !important;
  margin-bottom:1.15rem !important;
  text-align:inherit !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.admin-shell-brand h2,.admin-shell-brand p,.user-shell-sidebar .profile h3,.user-shell-sidebar .profile p{color:#fff !important;}
.admin-shell-brand h2::before,.user-shell-brand strong::before{content:"ClickCard";display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cc-yellow);margin-bottom:.25rem;}
.admin-shell-section-title,.user-shell-section-title{color:rgba(255,255,255,.68) !important;font-weight:900 !important;letter-spacing:.04em !important;}
.admin-shell-link,.user-shell-link{
  color:rgba(255,255,255,.91) !important;
  border:1px solid transparent !important;
  border-radius:18px !important;
  margin-bottom:.45rem !important;
  padding:.95rem 1rem !important;
}
.admin-shell-link:hover,.user-shell-link:hover{
  background:rgba(255,255,255,.13) !important;
  border-color:rgba(255,255,255,.18) !important;
  transform:translateX(-4px) !important;
}
.admin-shell-link.active,.user-shell-link.active{
  background:linear-gradient(135deg,rgba(54,183,255,.98),rgba(255,212,77,.92)) !important;
  color:#06192a !important;
  box-shadow:0 16px 36px rgba(0,0,0,.22) !important;
  font-weight:900 !important;
}
.admin-shell-link.active i,.user-shell-link.active i{color:#06192a !important;}
.admin-shell-title,.user-shell-brand,.user-shell-greeting,.admin-shell-user{
  background:rgba(255,255,255,.86) !important;
  border:1px solid rgba(7,24,39,.08) !important;
  border-radius:22px !important;
  box-shadow:0 10px 30px rgba(7,24,39,.08) !important;
}
.admin-shell-title .icon,.admin-shell-avatar,.user-shell-avatar,.user-shell-notify,.user-shell-sidebar .avatar{
  background:linear-gradient(135deg,var(--cc-blue),var(--cc-blue-2)) !important;
  color:#fff !important;
  box-shadow:0 12px 26px rgba(6,116,216,.28) !important;
}
.admin-shell-logout,.admin-shell-toggle,.user-shell-toggle{
  background:var(--cc-navy) !important;color:#fff !important;border-radius:16px !important;
}
.admin-shell-footer,.user-shell-footer{background:var(--cc-navy) !important;color:#fff !important;border-radius:28px 28px 0 0 !important;}
body.cc-private-page main,
body.cc-private-page .container,
body.cc-private-page .main-content,
body.cc-private-page .content,
body.cc-private-page .wrap,
body.admin-shell-active main,
body.admin-shell-active .main-content,
body.admin-shell-active .container,
body.admin-shell-active .wrap,
body.user-shell-active main,
body.user-shell-active .main-content,
body.user-shell-active .container,
body.user-shell-active .dashboard-container{
  max-width:1320px !important;
  width:calc(100% - 32px) !important;
  margin:24px auto !important;
  padding:clamp(18px,2.5vw,34px) !important;
}
body.cc-private-page .hero,
body.cc-private-page .page-header,
body.cc-private-page .dashboard-header,
body.cc-private-page .header-section,
body.admin-shell-active .hero,
body.admin-shell-active .page-header,
body.admin-shell-active .dashboard-header,
body.user-shell-active .page-header,
body.user-shell-active .dashboard-header{
  background:
    radial-gradient(circle at 88% 20%, rgba(255,212,77,.46), transparent 17rem),
    linear-gradient(135deg,#071827 0%,#0b4d80 55%,#36b7ff 100%) !important;
  color:#fff !important;
  border-radius:36px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 28px 80px rgba(7,24,39,.22) !important;
  padding:clamp(24px,4vw,56px) !important;
  overflow:hidden !important;
}
body.cc-private-page .hero h1,body.cc-private-page .page-header h1,body.cc-private-page .dashboard-header h1,
body.admin-shell-active .hero h1,body.admin-shell-active .page-header h1,body.admin-shell-active .dashboard-header h1,
body.user-shell-active .page-header h1,body.user-shell-active .dashboard-header h1{color:#fff !important;}
body.cc-private-page .hero p,body.cc-private-page .page-header p,body.cc-private-page .dashboard-header p,
body.admin-shell-active .hero p,body.admin-shell-active .page-header p,body.admin-shell-active .dashboard-header p,
body.user-shell-active .page-header p,body.user-shell-active .dashboard-header p{color:rgba(255,255,255,.82) !important;}
body.cc-private-page .grid,
body.cc-private-page .stats-grid,
body.cc-private-page .dashboard-grid,
body.cc-private-page .cards-grid,
body.admin-shell-active .stats-grid,
body.admin-shell-active .dashboard-grid,
body.admin-shell-active .grid,
body.user-shell-active .stats-grid,
body.user-shell-active .dashboard-grid,
body.user-shell-active .cards-grid{
  gap:22px !important;
}
body.cc-private-page .card,
body.cc-private-page .box,
body.cc-private-page .panel,
body.cc-private-page .section-card,
body.cc-private-page .table-container,
body.cc-private-page .modal-content,
body.admin-shell-active .card,
body.admin-shell-active .box,
body.admin-shell-active .panel,
body.admin-shell-active .section-card,
body.admin-shell-active .table-container,
body.admin-shell-active .modal-content,
body.user-shell-active .card,
body.user-shell-active .box,
body.user-shell-active .panel,
body.user-shell-active .section-card,
body.user-shell-active .table-container,
body.user-shell-active .modal-content{
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(7,24,39,.09) !important;
  border-radius:30px !important;
  box-shadow:0 22px 60px rgba(7,24,39,.11) !important;
  backdrop-filter:blur(18px) saturate(150%) !important;
}
body.cc-private-page .stat-card,
body.admin-shell-active .stat-card,
body.user-shell-active .stat-card{
  background:linear-gradient(145deg,#fff,#f1fbff) !important;
  border-radius:28px !important;
  position:relative !important;
}
body.cc-private-page .stat-card::after,body.admin-shell-active .stat-card::after,body.user-shell-active .stat-card::after{
  content:"";position:absolute;inset:auto 18px 18px auto;width:48px;height:48px;border-radius:18px;background:rgba(255,212,77,.32);z-index:0;
}
body.cc-private-page .btn,body.cc-private-page button:not(.swal2-confirm):not(.swal2-cancel),
body.admin-shell-active .btn,body.admin-shell-active button:not(.admin-shell-toggle):not(.admin-shell-logout):not(.swal2-confirm):not(.swal2-cancel),
body.user-shell-active .btn,body.user-shell-active button:not(.user-shell-toggle):not(.swal2-confirm):not(.swal2-cancel){
  background:linear-gradient(135deg,var(--cc-blue),var(--cc-blue-2)) !important;
  color:#fff !important;border-radius:999px !important;border:0 !important;font-weight:900 !important;
  box-shadow:0 14px 34px rgba(6,116,216,.25) !important;
}
body.cc-private-page .btn-secondary,body.cc-private-page .secondary,body.cc-private-page button.secondary,
body.admin-shell-active .btn-secondary,body.admin-shell-active .secondary,body.admin-shell-active button.secondary,
body.user-shell-active .btn-secondary,body.user-shell-active .secondary,body.user-shell-active button.secondary{
  background:#fff !important;color:var(--cc-navy) !important;border:1px solid rgba(7,24,39,.12) !important;
}
body.cc-private-page a{color:#0674d8;}
body.cc-private-page .text-primary,body.admin-shell-active .text-primary,body.user-shell-active .text-primary{color:#0674d8 !important;}
body.cc-private-page .bg-primary,body.admin-shell-active .bg-primary,body.user-shell-active .bg-primary{background:#0674d8 !important;}
body.cc-private-page .badge,body.admin-shell-active .badge,body.user-shell-active .badge{background:rgba(255,212,77,.24) !important;color:#705100 !important;}
body.cc-private-page [style*="#0674d8"],body.cc-private-page [style*="#0674d8"],body.cc-private-page [style*="#0EA5E9"]{color:inherit;}
/* Partner pages without a shared shell */
body.cc-partner-page:not(.admin-shell-active):not(.user-shell-active) header,
body.cc-partner-page:not(.admin-shell-active):not(.user-shell-active) .header,
body.cc-partner-page:not(.admin-shell-active):not(.user-shell-active) .navbar{
  background:rgba(255,255,255,.80) !important;border:1px solid rgba(7,24,39,.08) !important;border-radius:0 0 32px 32px !important;box-shadow:0 18px 55px rgba(7,24,39,.09) !important;backdrop-filter:blur(22px) !important;
}
@media(max-width:980px){
  body.admin-shell-active,body.user-shell-active{padding-right:0 !important;}
  .admin-shell-sidebar,.user-shell-sidebar{width:min(86vw,340px) !important;}
  body.cc-private-page main,body.cc-private-page .container,body.cc-private-page .main-content,body.cc-private-page .content,body.cc-private-page .wrap,body.admin-shell-active main,body.admin-shell-active .main-content,body.admin-shell-active .container,body.admin-shell-active .wrap,body.user-shell-active main,body.user-shell-active .main-content,body.user-shell-active .container,body.user-shell-active .dashboard-container{width:calc(100% - 18px) !important;margin:14px auto !important;padding:18px !important;}
}

/* =========================
   ClickCard V3 UX Upgrade
   compact desktop mega-nav + quarter-size heroes + cleaner filters
   ========================= */
:root{
  --cc-hero-small: clamp(150px, 22vh, 230px);
  --cc-hero-xsmall: clamp(120px, 18vh, 190px);
}

/* Desktop header: four dropdown groups instead of crowded links */
@media (min-width: 993px){
  body{ padding-top: var(--header-h, 82px) !important; }
  .site-header{
    padding: .55rem 0 .7rem !important;
    border-radius: 0 0 28px 28px !important;
    min-height: 76px !important;
  }
  .header-container{
    max-width: min(1280px, 96vw) !important;
    padding-inline: clamp(16px,2vw,28px) !important;
    gap: 1rem !important;
  }
  .logo-img{ height: 44px !important; }
  .logo-text{ font-size: 1.35rem !important; }
  .nav-menu{ overflow: visible !important; }
  .nav-desktop.cc-mega-nav{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:.55rem !important;
    flex-wrap:nowrap !important;
    width:100% !important;
  }
  .cc-mega-nav .nav-link,
  .cc-nav-trigger{
    height: 42px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:.45rem !important;
    padding:.55rem .9rem !important;
    min-width: 96px !important;
    font-size:.94rem !important;
    cursor:pointer !important;
    line-height:1 !important;
  }
  .cc-home-link{ min-width: 88px !important; }
  .cc-nav-trigger i{ font-size:.72rem !important; transition:transform .22s ease !important; }
  .cc-nav-group{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    isolation:isolate !important;
  }
  .cc-nav-group:hover .cc-nav-trigger,
  .cc-nav-group:focus-within .cc-nav-trigger{
    background:rgba(54,183,255,.14) !important;
    border-color:rgba(54,183,255,.28) !important;
    color:#045aa7 !important;
  }
  .cc-nav-group:hover .cc-nav-trigger i,
  .cc-nav-group:focus-within .cc-nav-trigger i{ transform:rotate(180deg) !important; }
  .cc-nav-dropdown{
    position:absolute !important;
    top:calc(100% + 12px) !important;
    right:0 !important;
    min-width: 245px !important;
    padding:.7rem !important;
    border-radius:24px !important;
    background:rgba(255,255,255,.96) !important;
    border:1px solid rgba(7,24,39,.10) !important;
    box-shadow:0 26px 70px rgba(7,24,39,.16) !important;
    backdrop-filter:blur(22px) saturate(170%) !important;
    display:grid !important;
    gap:.35rem !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(10px) scale(.98) !important;
    transform-origin:top right !important;
    transition:.22s ease !important;
    z-index:500000 !important;
  }
  .cc-nav-group:hover .cc-nav-dropdown,
  .cc-nav-group:focus-within .cc-nav-dropdown,
  .cc-nav-group.is-open .cc-nav-dropdown{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) scale(1) !important;
  }
  .cc-nav-dropdown::before{
    content:""; position:absolute; top:-7px; right:28px; width:14px; height:14px;
    background:rgba(255,255,255,.96); border-top:1px solid rgba(7,24,39,.10); border-right:1px solid rgba(7,24,39,.10);
    transform:rotate(-45deg);
  }
  .cc-nav-dropdown a{
    display:flex !important;
    align-items:center !important;
    gap:.65rem !important;
    min-height:42px !important;
    padding:.7rem .82rem !important;
    border-radius:16px !important;
    color:var(--cc-navy) !important;
    text-decoration:none !important;
    font-weight:850 !important;
    background:transparent !important;
    border:1px solid transparent !important;
  }
  .cc-nav-dropdown a:hover,
  .cc-nav-dropdown a.active{
    background:linear-gradient(135deg,rgba(54,183,255,.14),rgba(255,212,77,.16)) !important;
    border-color:rgba(54,183,255,.20) !important;
    transform:translateX(-4px) !important;
  }
  .cc-nav-dropdown i{
    width:30px !important; height:30px !important; border-radius:12px !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    color:#045aa7 !important;
    background:rgba(54,183,255,.13) !important;
  }
  .auth-buttons{ flex-direction:row !important; align-items:center !important; gap:.45rem !important; }
  .auth-buttons .partner-access-btn,
  #partnerAccessBtn{
    background:linear-gradient(135deg,var(--cc-navy),#12395f) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.15) !important;
    box-shadow:0 14px 34px rgba(7,24,39,.20) !important;
  }
  #partnerAccessBtn span,#partnerAccessBtn i{ color:#fff !important; }
}

/* The hero was stealing the page: make it around a quarter of V2 */
.hero,.hero-section,.landing-hero,.main-hero,
body.cc-private-page .hero, body.cc-private-page .page-header, body.cc-private-page .dashboard-header, body.cc-private-page .header-section,
body.admin-shell-active .hero, body.admin-shell-active .page-header, body.admin-shell-active .dashboard-header,
body.user-shell-active .page-header, body.user-shell-active .dashboard-header{
  min-height: var(--cc-hero-small) !important;
  max-height: 260px !important;
  padding: clamp(22px,3vw,42px) clamp(18px,4vw,54px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  margin-block: clamp(12px,2vw,26px) !important;
  border-radius: clamp(24px,3vw,36px) !important;
}
.hero h1,.hero-section h1,.landing-hero h1,.main-hero h1,
.page-header h1,.dashboard-header h1,.header-section h1{
  font-size: clamp(2rem, 4vw, 3.45rem) !important;
  margin:0 0 .5rem !important;
}
.hero p,.hero-section p,.landing-hero p,.main-hero p,
.page-header p,.dashboard-header p,.header-section p{
  font-size: clamp(.95rem,1.4vw,1.18rem) !important;
  max-width: 760px !important;
  margin:0 auto !important;
  line-height:1.55 !important;
}
.hero .cc-orb,.hero-section .cc-orb,.landing-hero .cc-orb,.main-hero .cc-orb{ opacity:.42 !important; transform:scale(.58) !important; }
.hero .cc-orb-two,.hero-section .cc-orb-two{ bottom:-70px !important; left:4% !important; }
.hero .cc-orb-one,.hero-section .cc-orb-one{ top:-28px !important; right:8% !important; }
.hero .cc-orb-three,.hero-section .cc-orb-three{ display:none !important; }
.hero + *, .hero-section + *, .landing-hero + *, .main-hero + *, .page-header + *, .dashboard-header + *{ margin-top: clamp(14px,2vw,28px) !important; }
@media (max-width: 768px){
  .hero,.hero-section,.landing-hero,.main-hero,.page-header,.dashboard-header,.header-section{
    min-height: var(--cc-hero-xsmall) !important;
    max-height:none !important;
    padding: 22px 16px !important;
  }
  .hero h1,.hero-section h1,.landing-hero h1,.main-hero h1,.page-header h1,.dashboard-header h1{ font-size: clamp(1.75rem,9vw,2.55rem) !important; }
}

/* Category chips under heroes: smaller, denser, not the star of the page */
.category-tabs,.tabs,.template-tabs,.filter-tabs,.category-buttons,.categories,.chips,.chip-row,
[class*="category"]:has(> button), [class*="tabs"]:has(> button){
  gap:.45rem !important;
  margin-block:.65rem 1rem !important;
}
.category-tabs button,.tabs button,.template-tabs button,.filter-tabs button,.category-buttons button,.categories button,.chip,.tag-button,
.category-tabs a,.tabs a,.template-tabs a,.filter-tabs a,.category-buttons a,.categories a{
  min-height: 34px !important;
  padding:.42rem .88rem !important;
  border-radius:999px !important;
  font-size:.86rem !important;
  box-shadow:0 8px 18px rgba(7,24,39,.06) !important;
}

/* Search/filter strips: compact and dropdown-first */
.search-filter-bar,.filters-bar,.filter-bar,.toolbar,.templates-toolbar,.search-section,.filter-section,
.controls,.controls-bar,.sort-controls{
  border-radius:24px !important;
  padding: clamp(10px,1.4vw,16px) !important;
  gap:.75rem !important;
  min-height:unset !important;
  align-items:center !important;
}
.filters-bar .filter-btn,
.filter-btn,.sort-btn,.template-filter-btn{
  display:none !important;
}
.cc-filter-select{
  appearance:none !important;
  min-width:min(100%,230px) !important;
  height:46px !important;
  padding:0 1rem !important;
  border-radius:16px !important;
  background:#fff !important;
  font-weight:900 !important;
  color:var(--cc-navy) !important;
  border:1px solid rgba(7,24,39,.12) !important;
  box-shadow:0 10px 24px rgba(7,24,39,.06) !important;
}
.search-filter-bar input,.filters-bar input,.filter-bar input,.toolbar input,.templates-toolbar input,.search-section input,.filter-section input,
.search-filter-bar select,.filters-bar select,.filter-bar select,.toolbar select,.templates-toolbar select,.search-section select,.filter-section select{
  height:46px !important;
  border-radius:16px !important;
  font-size:.95rem !important;
}

/* =========================
   V3.1 dropdown stability fix
   Keeps desktop dropdowns open while moving the mouse from the header item to the menu.
   ========================= */
@media (min-width: 993px){
  .cc-nav-group{ padding-bottom:18px !important; margin-bottom:-18px !important; }
  .cc-nav-group::after{
    content:"" !important;
    position:absolute !important;
    top:100% !important;
    right:-14px !important;
    width:calc(100% + 28px) !important;
    height:22px !important;
    display:block !important;
    background:transparent !important;
    pointer-events:auto !important;
    z-index:499999 !important;
  }
  .cc-nav-dropdown{ top:calc(100% + 2px) !important; }
  .cc-nav-group:hover .cc-nav-dropdown,
  .cc-nav-group:focus-within .cc-nav-dropdown,
  .cc-nav-group.is-open .cc-nav-dropdown{ pointer-events:auto !important; }
}
/* ===== FINAL FIX BACKDROP (حل نهائي) ===== */

#mobileNavBackdrop,
.mobile-nav-backdrop,
.mobile-nav-backdrop.show {

  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100vh !important;

  border-radius: 0 !important;   /* 🔥 يمنع الدائرة */
  padding: 0 !important;
  margin: 0 !important;

  background: rgba(7,24,39,0.45) !important;

  box-shadow: none !important;
  transform: none !important;

  z-index: 99990 !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#mobileNavBackdrop.show,
.mobile-nav-backdrop.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}