/* =========================================================
   ClickCard V4 Global Responsive + Brand Override
   Purpose: one stable identity across all public/private pages
   ========================================================= */
:root{
  --cc-blue:#36b7ff;
  --cc-blue-2:#0674d8;
  --cc-navy:#071827;
  --cc-yellow:#ffd44d;
  --cc-white:#fff;
  --cc-soft:#f6fbff;
  --cc-ink:#0a0f16;
  --cc-muted:#64748b;
  --cc-border:rgba(7,24,39,.12);
  --cc-shadow:0 24px 70px rgba(7,24,39,.13);
  --primary:#0674d8 !important;
  --primary-dark:#045aa7 !important;
  --primary-light:#36b7ff !important;
  --accent:#ffd44d !important;
  --background:#f6fbff !important;
  --dark:#0a0f16 !important;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:'Tajawal','Inter','Segoe UI',Arial,sans-serif !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,212,77,.28), transparent 23rem),
    radial-gradient(circle at 92% 4%, rgba(54,183,255,.26), transparent 24rem),
    linear-gradient(180deg,#fff 0%,#f6fbff 48%,#fff 100%) !important;
  color:var(--cc-ink) !important;
  overflow-x:hidden !important;
}
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 82%);
}
::selection{background:var(--cc-yellow);color:var(--cc-navy)}
img,video,canvas,svg{max-width:100%;height:auto}
table{max-width:100%}
a{color:#0674d8}
h1,h2,h3,h4,h5,h6{color:var(--cc-navy) !important;font-weight:900 !important;letter-spacing:-.035em}
p{color:#334155 !important;line-height:1.8}

/* Kill old #0EA5E9 across common UI */
[style*="#0EA5E9"],[style*="#0EA5E9"],[style*="#0284C7"],[style*="#0284C7"],[style*="#38BDF8"],[style*="#38BDF8"]{
  border-color:var(--cc-border) !important;
}
.badge,.tag,.label{background:rgba(255,212,77,.25)!important;color:#755300!important;border:1px solid rgba(255,183,3,.28)!important;border-radius:999px!important}

/* Header */
.site-header,header.site-header,.main-header,header:not(.plain-header){
  background:rgba(255,255,255,.88)!important;
  color:var(--cc-navy)!important;
  border:1px solid rgba(7,24,39,.08)!important;
  border-radius:0 0 30px 30px!important;
  box-shadow:0 14px 44px rgba(7,24,39,.09)!important;
  backdrop-filter:blur(22px) saturate(160%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(160%)!important;
}
.site-header{padding:.75rem 0!important;overflow:visible!important}
.wave-container{display:none!important}
.header-container{max-width:min(1280px,96vw)!important;padding-inline:clamp(14px,3vw,36px)!important}
.logo-section,.logo-container{color:var(--cc-navy)!important;text-decoration:none!important}
.logo-text{color:var(--cc-navy)!important;text-shadow:none!important;font-weight:900!important}
.logo-img{filter:none!important;border-radius:16px!important;box-shadow:0 10px 28px rgba(54,183,255,.20)!important}
.nav-link,nav a{color:var(--cc-navy)!important}
.nav-link:hover,.nav-link.active,nav a:hover{background:rgba(54,183,255,.12)!important;color:#045aa7!important;border-color:rgba(54,183,255,.25)!important}

/* Buttons and forms */
button,.btn,.cta-button,.primary-btn,.submit-btn,input[type="submit"],button[type="submit"],.account-btn{
  border-radius:999px!important;
  font-weight:900!important;
}
.btn,.cta-button,.primary-btn,.submit-btn,input[type="submit"],button[type="submit"],.account-btn{
  background:linear-gradient(135deg,var(--cc-blue),var(--cc-blue-2))!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 14px 34px rgba(6,116,216,.25)!important;
}
.btn:hover,.cta-button:hover,.primary-btn:hover,.submit-btn:hover,input[type="submit"]:hover,button[type="submit"]:hover,.account-btn:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 18px 44px rgba(6,116,216,.32)!important;
}
.btn.secondary,.secondary,.secondary-btn,.outline-btn,button.secondary{
  background:#fff!important;color:var(--cc-navy)!important;border:1px solid var(--cc-border)!important;box-shadow:0 10px 26px rgba(7,24,39,.08)!important
}
input,select,textarea{
  max-width:100%!important;
  border:1px solid rgba(7,24,39,.12)!important;
  border-radius:18px!important;
  background:#fff!important;
  color:var(--cc-ink)!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}

/* Cards and containers */
.card,.feature-card,.template-card,.pricing-card,.plan-card,.stat-card,.dashboard-card,.form-container,.auth-container,.panel,.box,.item-card,.table-container,.modal-content{
  background:rgba(255,255,255,.88)!important;
  border:1px solid var(--cc-border)!important;
  border-radius:28px!important;
  box-shadow:var(--cc-shadow)!important;
  backdrop-filter:blur(16px)!important;
}
.card:hover,.feature-card:hover,.template-card:hover,.pricing-card:hover,.plan-card:hover{transform:translateY(-5px)}
section:nth-of-type(even){background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(246,251,255,.76))!important}

/* Compact heroes everywhere */
.hero,.hero-section,.landing-hero,.main-hero,.page-header,.dashboard-header,.header-section{
  min-height:clamp(118px,18vh,210px)!important;
  max-height:none!important;
  padding:clamp(20px,3vw,38px) clamp(16px,4vw,52px)!important;
  margin-block:clamp(10px,2vw,24px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  border-radius:clamp(22px,3vw,34px)!important;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,212,77,.36), transparent 18rem),
    radial-gradient(circle at 82% 18%, rgba(54,183,255,.28), transparent 21rem),
    linear-gradient(135deg,#fff 0%,#eef9ff 56%,#fff9df 100%)!important;
  color:var(--cc-navy)!important;
  border:1px solid rgba(7,24,39,.08)!important;
  overflow:hidden!important;
}
.hero h1,.hero-section h1,.landing-hero h1,.main-hero h1,.page-header h1,.dashboard-header h1,.header-section h1{
  font-size:clamp(1.75rem,4.2vw,3.25rem)!important;margin:0 0 .4rem!important;color:var(--cc-navy)!important
}
.hero p,.hero-section p,.landing-hero p,.main-hero p,.page-header p,.dashboard-header p,.header-section p{
  font-size:clamp(.92rem,1.35vw,1.13rem)!important;line-height:1.55!important;max-width:760px!important;margin:0 auto!important;color:#334155!important
}

/* Responsive grids */
.grid,.cards-grid,.templates-grid,.features-grid,.stats-grid,.dashboard-grid,.pricing-grid,.plans-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))!important;
  gap:clamp(14px,2vw,24px)!important;
}

/* Toolbars and filters */
.search-filter-bar,.filters-bar,.filter-bar,.toolbar,.templates-toolbar,.search-section,.filter-section,.controls,.controls-bar,.sort-controls,.bar{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:.75rem!important;
  align-items:center!important;
  border-radius:24px!important;
  padding:clamp(10px,1.5vw,16px)!important;
  background:rgba(255,255,255,.86)!important;
  border:1px solid var(--cc-border)!important;
  box-shadow:0 14px 38px rgba(7,24,39,.08)!important;
}
.search-filter-bar input,.filters-bar input,.filter-bar input,.toolbar input,.templates-toolbar input,.search-section input,.filter-section input,.bar input,
.search-filter-bar select,.filters-bar select,.filter-bar select,.toolbar select,.templates-toolbar select,.search-section select,.filter-section select,.bar select{
  height:46px!important;border-radius:16px!important;min-width:min(100%,190px)!important
}

/* Footer */
footer,.site-footer{
  background:var(--cc-navy)!important;color:#fff!important;border-radius:34px 34px 0 0!important
}
footer p,footer a,.site-footer p,.site-footer a{color:rgba(255,255,255,.82)!important}

/* V4 mobile drawer - full screen app-like drawer */
@media (max-width:992px){
  body{padding-top:var(--header-h,76px)!important}
  body.mobile-menu-open,body.nav-locked{
    overflow:hidden!important;
    height:100vh!important;
    position:fixed!important;
    width:100%!important;
    left:0!important;
    right:0!important;
  }
  .site-header{
    position:fixed!important;top:0!important;left:0!important;right:0!important;
    z-index:900000!important;
    padding:.55rem 0!important;
    border-radius:0 0 22px 22px!important;
  }
  .header-container{
    display:grid!important;
    grid-template-columns:48px 1fr auto!important;
    grid-template-areas:"menu logo account"!important;
    gap:.6rem!important;
    align-items:center!important;
  }
  .menu-toggle,#menuToggle{
    grid-area:menu!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:46px!important;height:46px!important;border-radius:16px!important;
    background:var(--cc-navy)!important;color:#fff!important;
    z-index:960000!important
  }
  .logo-section{grid-area:logo!important;justify-self:center!important}
  .logo-img{height:38px!important}
  .logo-text{font-size:1.12rem!important}
  .user-section{grid-area:account!important;justify-self:end!important;z-index:960000!important}
  .account-btn{min-height:44px!important;padding:0 .95rem!important}
  .account-btn span{display:none!important}

  .mobile-nav-backdrop{
    position:fixed!important;inset:0!important;
    display:block!important;
    background:rgba(7,24,39,.48)!important;
    backdrop-filter:blur(6px)!important;
    -webkit-backdrop-filter:blur(6px)!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    z-index:910000!important;
    border:0!important;
    transition:.22s ease!important;
  }
  .mobile-nav-backdrop.show{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
  }

  #mainNav.nav-menu{
    display:block!important;
    position:fixed!important;
    top:calc(var(--header-h,76px) + 8px)!important;
    right:10px!important;
    left:10px!important;
    bottom:10px!important;
    width:auto!important;height:auto!important;max-width:none!important;max-height:none!important;
    margin:0!important;padding:14px!important;
    transform:translateY(14px) scale(.985)!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    overflow:hidden!important;
    z-index:930000!important;
    border-radius:28px!important;
    background:
      radial-gradient(circle at 12% 5%, rgba(255,212,77,.24), transparent 28%),
      radial-gradient(circle at 90% 2%, rgba(54,183,255,.20), transparent 30%),
      linear-gradient(135deg,#ffffff 0%,#f4fbff 48%,#e1f5ff 100%)!important;
    border:1px solid rgba(14,165,233,.22)!important;
    box-shadow:0 32px 90px rgba(7,24,39,.34)!important;
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease!important;
    direction:rtl!important;text-align:right!important;
  }
  #mainNav.nav-menu.open{
    transform:translateY(0) scale(1)!important;
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;
  }
  #mainNav .nav-desktop{display:none!important}
  #mainNav .nav-accordion{display:flex!important;flex-direction:column!important;gap:10px!important;width:100%!important}
  #mainNav .acc-link--top,
  #mainNav .acc-item{
    background:rgba(255,255,255,.92)!important;
    color:var(--cc-navy)!important;
    border:1px solid rgba(14,165,233,.16)!important;
    border-radius:20px!important;
    box-shadow:0 10px 24px rgba(14,165,233,.08)!important;
    overflow:hidden!important
  }
  #mainNav .acc-link--top,
  #mainNav .acc-btn{
    min-height:56px!important;width:100%!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    padding:1rem 1.1rem!important;
    color:var(--cc-navy)!important;
    text-decoration:none!important;
    font-weight:900!important;
    background:transparent!important;
    border:0!important;
    text-align:right!important
  }
  #mainNav .acc-btn *{pointer-events:none!important}
  #mainNav .acc-panel{
    display:flex!important;flex-direction:column!important;gap:7px!important;
    padding:0 .85rem .85rem!important;
  }
  #mainNav .acc-panel[hidden]{display:none!important}
  #mainNav .acc-link{
    display:flex!important;align-items:center!important;justify-content:flex-start!important;
    min-height:46px!important;width:100%!important;
    padding:.78rem .95rem!important;
    color:var(--cc-navy)!important;
    text-decoration:none!important;
    font-weight:800!important;
    border-radius:15px!important;
    background:rgba(54,183,255,.08)!important;
    border:1px solid rgba(54,183,255,.12)!important
  }
  #mainNav .acc-link:hover{background:rgba(255,212,77,.18)!important}
  #mainNav .acc-btn i{color:#0674d8!important;transition:.22s ease!important}
  #mainNav .acc-item.open .acc-btn i{transform:rotate(-90deg)!important}
  #mainNav .nav-link{color:var(--cc-navy)!important}

  .dropdown-menu{
    position:fixed!important;top:calc(var(--header-h,76px) + 8px)!important;left:10px!important;right:10px!important;
    max-width:none!important;width:auto!important;max-height:calc(100vh - var(--header-h,76px) - 24px)!important;
    overflow-y:auto!important;z-index:970000!important;border-radius:24px!important
  }

  .hero,.hero-section,.landing-hero,.main-hero,.page-header,.dashboard-header,.header-section{
    min-height:110px!important;padding:20px 14px!important;border-radius:22px!important;margin-block:10px 14px!important
  }
  .hero h1,.hero-section h1,.landing-hero h1,.main-hero h1,.page-header h1,.dashboard-header h1,.header-section h1{
    font-size:clamp(1.55rem,8vw,2.3rem)!important
  }

  .container,.page,.main-content,main,.content,.wrap{
    width:calc(100% - 18px)!important;
    max-width:100%!important;
    margin-left:auto!important;margin-right:auto!important;
    padding-left:12px!important;padding-right:12px!important;
  }
  .card,.feature-card,.template-card,.pricing-card,.plan-card,.stat-card,.dashboard-card,.form-container,.auth-container,.panel,.box,.item-card,.table-container,.modal-content{
    border-radius:22px!important
  }
  .search-filter-bar,.filters-bar,.filter-bar,.toolbar,.templates-toolbar,.search-section,.filter-section,.controls,.controls-bar,.sort-controls,.bar{
    flex-direction:column!important;align-items:stretch!important
  }
  .search-filter-bar > *, .filters-bar > *, .filter-bar > *, .toolbar > *, .templates-toolbar > *, .search-section > *, .filter-section > *, .bar > *{
    width:100%!important
  }
  table{display:block!important;overflow-x:auto!important;white-space:nowrap!important}
}

/* Desktop mega dropdown safety */
@media (min-width:993px){
  .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-nav-group{position:relative!important;display:inline-flex!important;padding-bottom:18px!important;margin-bottom:-18px!important}
  .cc-nav-dropdown{
    position:absolute!important;top:calc(100% + 2px)!important;right:0!important;min-width:245px!important;padding:.7rem!important;border-radius:24px!important;
    background:rgba(255,255,255,.97)!important;border:1px solid rgba(7,24,39,.10)!important;box-shadow:0 26px 70px rgba(7,24,39,.16)!important;
    display:grid!important;gap:.35rem!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(10px) scale(.98)!important;transition:.22s ease!important;z-index:950000!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 a{display:flex!important;align-items:center!important;gap:.65rem!important;padding:.7rem .82rem!important;border-radius:16px!important;text-decoration:none!important;font-weight:850!important}
  .cc-nav-dropdown a:hover{background:linear-gradient(135deg,rgba(54,183,255,.14),rgba(255,212,77,.16))!important;transform:translateX(-4px)!important}
}


/* =========================================================
   V2.2 Clean UI Fixes - identity, mobile, bottoms, templates
   ========================================================= */
:root{
  --primary:#0EA5E9 !important;
  --primary2:#38BDF8 !important;
  --primary-dark:#0369A1 !important;
  --primary-light:#BAE6FD !important;
  --secondary:#071827 !important;
  --accent:#FACC15 !important;
  --background:#F6FBFF !important;
  --cc-blue:#0EA5E9 !important;
  --cc-blue-2:#0284C7 !important;
  --cc-navy:#071827 !important;
  --cc-yellow:#FACC15 !important;
}
html,body{min-height:100%;overflow-x:hidden!important;}
body{padding-bottom:0!important;}
main,.page,.main-content,.content-wrapper{min-height:auto!important;}
footer,.site-footer{margin-top:40px!important;position:relative!important;z-index:2!important;}
/* remove old orange residue from inline-heavy pages */
*[style*="#0EA5E9"],*[style*="#38BDF8"]{--primary:#0EA5E9!important;--accent:#FACC15!important;}
/* Full template images without crop */
.template-card img,.card-sample img,.card img,.pic img,.template-image img,.preview-card img,.invitation-card img{
  object-fit:contain!important;
  height:auto!important;
  max-height:none!important;
}
.pic,.template-image,.card-image,.preview-image{
  height:auto!important;
  min-height:0!important;
  align-items:center!important;
}
.template-card,.card-sample,.card{overflow:hidden!important;}
.actions .btn,.card .btn,.template-card .btn{min-height:38px!important;padding:.58rem .75rem!important;font-size:.86rem!important;line-height:1.15!important;}
/* Bottom clutter safety */
body > a:not([class]), body > small:not([class]){max-width:100%;overflow-wrap:anywhere;}
.back-to-top{bottom:24px!important;left:24px!important;z-index:9997!important;}
.chat-assistant,.assistant-toggle,.chat-widget{z-index:9998!important;}
/* QR canvas must have visible box */
.qr-image canvas,.qr-card canvas{display:block!important;width:160px!important;height:160px!important;max-width:100%!important;margin:auto!important;background:#fff!important;}
/* App-like mobile sizing */
@media (max-width:768px){
  body{font-size:15px!important;}
  .page,.container,.main-content,main,.content,.wrap{width:100%!important;padding-left:10px!important;padding-right:10px!important;}
  .grid,.cards-grid,.templates-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))!important;gap:12px!important;}
  .card,.template-card,.card-sample{border-radius:20px!important;}
  .actions{gap:7px!important;}
  .actions .btn,.card .btn,.template-card .btn{font-size:.78rem!important;padding:.5rem .55rem!important;min-height:34px!important;}
  table{display:block!important;overflow-x:auto!important;white-space:nowrap!important;}
}
/* Mobile drawer: full height and scrolls after opening accordions */
@media (max-width:992px){
  #mainNav.nav-menu,#mainNav.nav-menu.open,.nav-menu.open,.sidebar,.side-menu,.mobile-menu{
    max-height:calc(100dvh - var(--header-h,76px) - 20px)!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
  }
  #mainNav .acc-panel{max-height:none!important;overflow:visible!important;}
  body.mobile-menu-open,body.nav-locked{touch-action:none;}
  #mainNav.nav-menu.open{touch-action:auto!important;}
}
/* YouTube and media cards */
.youtube-box{width:100%!important;aspect-ratio:16/9!important;border-radius:18px!important;overflow:hidden!important;background:#071827!important;}
.youtube-box iframe,.youtube-box video{width:100%!important;height:100%!important;border:0!important;display:block!important;}
.iphone-frame{width:min(280px,80vw);aspect-ratio:9/18.7;border:10px solid #071827;border-radius:38px;overflow:hidden;background:#071827;margin:auto;box-shadow:0 24px 70px rgba(7,24,39,.22);position:relative;}
.iphone-frame:before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:34%;height:16px;background:#071827;border-radius:0 0 14px 14px;z-index:2;}
.iphone-frame img{width:100%;height:100%!important;object-fit:cover!important;display:block;}


/* =========================================================
   V2.3 layout stabilization patch
   Fixes: oversized pages, bottom ghost menu, header drop, mobile drawer scroll
   ========================================================= */
html,body{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  overflow-x:hidden !important;
}
body{
  padding-bottom:0 !important;
  min-height:100dvh !important;
}
#header-container,#footer-container{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
}
.site-header{
  top:0 !important;
  margin-top:0 !important;
  transform:none !important;
}
@media (min-width:993px){
  body{padding-top:0 !important;}
  .site-header{padding:.62rem 0 !important;}
  .header-container{max-width:min(1180px,96vw) !important;}
  .cc-nav-group{padding-bottom:8px !important;margin-bottom:-8px !important;}
}
/* Page width must be app-like, not wider than viewport */
.container,.page,.main-content,main,.content,.wrap,.store-wrapper,.dashboard-container,.dashboard-main,.admin-main,.partner-main{
  width:min(100%,1200px) !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
@media (max-width:768px){
  .container,.page,.main-content,main,.content,.wrap,.store-wrapper,.dashboard-container,.dashboard-main,.admin-main,.partner-main{
    width:100% !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
}
/* Prevent hidden mobile nav/footer fragments from appearing at page bottom */
#mainNav.nav-menu:not(.open) .nav-accordion,
#mainNav.nav-menu:not(.open) .acc-item,
#mainNav.nav-menu:not(.open) .acc-link,
#mainNav.nav-menu:not(.open) .acc-btn{
  pointer-events:none !important;
}
@media (max-width:992px){
  body.mobile-menu-open,body.nav-locked{
    overflow:hidden !important;
    height:100dvh !important;
    position:fixed !important;
    width:100% !important;
  }
  #mainNav.nav-menu,.nav-menu{
    max-height:none !important;
    height:auto !important;
    overflow:hidden !important;
  }
  #mainNav.nav-menu.open,.nav-menu.open{
    top:calc(var(--header-h,76px) + 8px) !important;
    right:10px !important;
    left:10px !important;
    bottom:10px !important;
    height:auto !important;
    max-height:none !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
  }
  #mainNav .nav-accordion{padding-bottom:24px !important;}
  #mainNav .acc-panel{max-height:none !important;overflow:visible !important;}
}
/* Free/paid template preview consistency */
.tpl-preview-stage{position:relative;z-index:1;width:100%;max-width:100%;aspect-ratio:var(--tpl-ratio,.75);overflow:hidden;background:#fff;line-height:0;border-radius:16px;}
.tpl-preview-stage .template-image,.tpl-preview-stage img{position:absolute;inset:0;z-index:1;width:100% !important;height:100% !important;object-fit:contain !important;display:block !important;}
.tpl-live-text,.tpl-live-icon{position:absolute;z-index:3;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;line-height:1.2;text-align:center;max-width:95%;}
.tpl-live-icon{line-height:1;color:#0EA5E9;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18));}
.card .pic,.template-image-container{min-height:0 !important;}

/* =========================================================
   V4.4.1 TEMPLATE GRID + DESKTOP GHOST MENU SAFETY
   ========================================================= */
@media (min-width: 993px){
  .cc-mobile-drawer,
  .cc-mobile-drawer.open,
  .cc-mobile-drawer-backdrop,
  .cc-mobile-drawer-backdrop.show{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    position:absolute !important;
    width:0 !important;
    height:0 !important;
    overflow:hidden !important;
  }
}

@media (max-width: 700px){
  .cards-grid,
  .templates-grid,
  .card-grid,
  .cards-container,
  .templates-container,
  #cardsContainer,
  #templatesContainer,
  #freeTemplates,
  #premiumTemplates,
  #latestTemplates{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
    justify-items:center !important;
  }
  .template-card,
  .card-sample,
  .card-item,
  .template-item,
  .card{
    width:min(100%, 390px) !important;
    max-width:390px !important;
    margin-inline:auto !important;
  }
}

/* =========================================================
   V4.4.2 MOBILE TEMPLATE + DRAWER FINAL PATCH
   - One template/card per row on phones.
   - Drawer scroll remains usable after opening submenus.
   ========================================================= */
@media (max-width: 700px){
  body:is(.template-page,.templates-page,.cards-page),
  body[data-page*="template"],
  body[data-page*="card"]{
    overflow-x:hidden !important;
  }

  /* Common template listing grids */
  .grid,
  .cards-grid,
  .templates-grid,
  .card-grid,
  .cards-container,
  .templates-container,
  .template-list,
  .cards-list,
  .cards-wrapper,
  .templates-wrapper,
  .store-grid,
  .showcase-grid,
  #cardsContainer,
  #templatesContainer,
  #freeTemplates,
  #premiumTemplates,
  #allTemplates,
  #cardsGrid,
  #templatesGrid,
  #tplGrid,
  #latestTemplates{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:18px !important;
    justify-items:center !important;
    align-items:start !important;
    width:100% !important;
  }

  .template-card,
  .card-sample,
  .card-item,
  .template-item,
  .card,
  .tpl-card,
  .invitation-card,
  .premium-card,
  .free-card{
    width:min(100%, 390px) !important;
    max-width:390px !important;
    min-width:0 !important;
    margin-inline:auto !important;
  }
}

@media (max-width: 992px){
  .cc-mobile-drawer{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    height:auto !important;
    max-height:calc(100dvh - var(--header-h, 76px) - 18px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
    overscroll-behavior:contain !important;
    padding-bottom:max(18px, env(safe-area-inset-bottom)) !important;
  }
  .cc-mobile-drawer-head{
    flex:0 0 auto !important;
    position:sticky !important;
    top:0 !important;
    z-index:2 !important;
    background:linear-gradient(135deg,#ffffff 0%,#f4fbff 55%,#e1f5ff 100%) !important;
    border-radius:20px !important;
  }
  .cc-mobile-group,
  .cc-mobile-top-link{
    flex:0 0 auto !important;
  }
  .cc-mobile-panel{
    max-height:none !important;
    overflow:visible !important;
  }
  .cc-mobile-group.open .cc-mobile-panel{
    display:flex !important;
  }
}

/* =========================================================
   V4.4.3 mobile card listings + hero polish
   - one card per row on phones for all/premium/free galleries
   - mobile hero stacks cleanly instead of squeezing columns
   ========================================================= */
@media (max-width: 700px){
  body.cc-card-list-page{
    overflow-x:hidden !important;
  }

  body.cc-card-list-page main,
  body.cc-card-list-page .container,
  body.cc-card-list-page .page,
  body.cc-card-list-page .content,
  body.cc-card-list-page .wrap{
    width:100% !important;
    max-width:100% !important;
    padding-inline:12px !important;
    margin-inline:auto !important;
    overflow-x:hidden !important;
  }

  /* Strong one-column rule for every known cards container */
  body.cc-card-list-page .grid,
  body.cc-card-list-page .cards-grid,
  body.cc-card-list-page .templates-grid,
  body.cc-card-list-page .card-grid,
  body.cc-card-list-page .premium-grid,
  body.cc-card-list-page .free-grid,
  body.cc-card-list-page .all-cards-grid,
  body.cc-card-list-page .cards-container,
  body.cc-card-list-page .templates-container,
  body.cc-card-list-page .cards-list,
  body.cc-card-list-page .templates-list,
  body.cc-card-list-page .template-list,
  body.cc-card-list-page .store-grid,
  body.cc-card-list-page .showcase-grid,
  body.cc-card-list-page [class*="cards-grid"],
  body.cc-card-list-page [class*="templates-grid"],
  body.cc-card-list-page [class*="card-grid"],
  body.cc-card-list-page [id*="cards"],
  body.cc-card-list-page [id*="Cards"],
  body.cc-card-list-page [id*="templates"],
  body.cc-card-list-page [id*="Templates"]{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-auto-flow:row !important;
    gap:18px !important;
    justify-items:center !important;
    align-items:start !important;
    width:100% !important;
    max-width:100% !important;
  }

  /* If an old page uses flex instead of grid */
  body.cc-card-list-page .cards-row,
  body.cc-card-list-page .templates-row,
  body.cc-card-list-page .row.cards,
  body.cc-card-list-page .row.templates,
  body.cc-card-list-page [class*="cards-row"],
  body.cc-card-list-page [class*="templates-row"]{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:18px !important;
    width:100% !important;
  }

  body.cc-card-list-page .template-card,
  body.cc-card-list-page .card-sample,
  body.cc-card-list-page .card-item,
  body.cc-card-list-page .template-item,
  body.cc-card-list-page .card,
  body.cc-card-list-page .tpl-card,
  body.cc-card-list-page .invitation-card,
  body.cc-card-list-page .premium-card,
  body.cc-card-list-page .free-card,
  body.cc-card-list-page [class*="template-card"],
  body.cc-card-list-page [class*="card-item"],
  body.cc-card-list-page [class*="premium-card"],
  body.cc-card-list-page [class*="free-card"]{
    width:min(100%, 380px) !important;
    max-width:380px !important;
    min-width:0 !important;
    flex:0 0 auto !important;
    margin-inline:auto !important;
  }

  /* Mobile hero: stack sections; no squeezed vertical text */
  body.cc-card-list-page .hero,
  body.cc-card-list-page .hero-section,
  body.cc-card-list-page .landing-hero,
  body.cc-card-list-page .main-hero,
  body.cc-card-list-page .page-hero,
  body.cc-card-list-page .templates-hero,
  body.cc-card-list-page .cards-hero,
  body.cc-card-list-page .page-header,
  body.cc-card-list-page .header-section{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:16px !important;
    text-align:center !important;
    min-height:auto !important;
    padding:24px 16px !important;
    overflow:hidden !important;
  }

  body.cc-card-list-page .hero h1,
  body.cc-card-list-page .hero-section h1,
  body.cc-card-list-page .page-hero h1,
  body.cc-card-list-page .templates-hero h1,
  body.cc-card-list-page .cards-hero h1,
  body.cc-card-list-page .page-header h1{
    font-size:clamp(2rem, 10vw, 3rem) !important;
    line-height:1.15 !important;
    margin:0 !important;
    max-width:100% !important;
    writing-mode:horizontal-tb !important;
  }

  body.cc-card-list-page .hero p,
  body.cc-card-list-page .hero-section p,
  body.cc-card-list-page .page-hero p,
  body.cc-card-list-page .templates-hero p,
  body.cc-card-list-page .cards-hero p,
  body.cc-card-list-page .page-header p{
    font-size:1rem !important;
    line-height:1.75 !important;
    margin:0 !important;
    max-width:32rem !important;
    writing-mode:horizontal-tb !important;
  }

  body.cc-card-list-page .category-tabs,
  body.cc-card-list-page .categories,
  body.cc-card-list-page .filter-tabs,
  body.cc-card-list-page .tabs,
  body.cc-card-list-page .chips,
  body.cc-card-list-page .filters,
  body.cc-card-list-page [class*="categor"],
  body.cc-card-list-page [class*="filter"],
  body.cc-card-list-page [class*="tabs"]{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
    writing-mode:horizontal-tb !important;
  }

  body.cc-card-list-page .category-tabs > *,
  body.cc-card-list-page .categories > *,
  body.cc-card-list-page .filter-tabs > *,
  body.cc-card-list-page .tabs > *,
  body.cc-card-list-page .chips > *,
  body.cc-card-list-page .filters > *{
    min-width:0 !important;
    width:auto !important;
    max-width:100% !important;
    writing-mode:horizontal-tb !important;
    white-space:normal !important;
  }
}

/* Optional saved text preview overlay for cards that expose saved fields in data-* */
.cc-preview-image-wrap{position:relative !important;display:block !important;overflow:hidden !important;}
.cc-saved-text-preview{
  position:absolute !important; inset:18% 10% auto 10% !important;
  display:flex !important; flex-direction:column !important; gap:6px !important;
  align-items:center !important; text-align:center !important;
  color:inherit !important; font-weight:800 !important; line-height:1.45 !important;
  pointer-events:none !important; z-index:3 !important;
  text-shadow:0 1px 2px rgba(255,255,255,.65) !important;
}
.cc-saved-text-preview span{display:block !important;max-width:100% !important;}


/* =========================================================
   V4.4.4 admin/user root-domain layout repair
   - prevent private pages from hiding behind fixed sidebars
   - keep content width inside available viewport
   - keep card pages one-card-per-row on phones
   ========================================================= */
html, body{max-width:100vw !important;overflow-x:hidden !important;}
body.admin-shell-active,
body.user-shell-active{
  width:100% !important;
  max-width:100vw !important;
  box-sizing:border-box !important;
}
@media (min-width:981px){
  body.admin-shell-active{padding-right:var(--as-sidebar,280px) !important;padding-top:calc(var(--as-header,70px) + env(safe-area-inset-top)) !important;}
  body.user-shell-active{padding-right:var(--us-sidebar,290px) !important;padding-top:calc(var(--us-header,72px) + env(safe-area-inset-top)) !important;}

  body.admin-shell-active > main,
  body.admin-shell-active > .main-content,
  body.admin-shell-active > .dashboard,
  body.admin-shell-active > .admin-container,
  body.admin-shell-active > .content,
  body.admin-shell-active > .content-wrapper,
  body.admin-shell-active > .page-wrapper,
  body.admin-shell-active .main-content,
  body.admin-shell-active .dashboard,
  body.admin-shell-active .admin-container,
  body.admin-shell-active .content-wrapper,
  body.admin-shell-active .page-wrapper{
    width:auto !important;
    max-width:calc(100vw - var(--as-sidebar,280px)) !important;
    margin-right:0 !important;
    margin-left:0 !important;
    box-sizing:border-box !important;
    overflow-x:auto !important;
  }

  body.user-shell-active > main,
  body.user-shell-active > .main-content,
  body.user-shell-active > .dashboard,
  body.user-shell-active > .dashboard-container,
  body.user-shell-active > .content,
  body.user-shell-active > .content-wrapper,
  body.user-shell-active > .page-wrapper,
  body.user-shell-active .main-content,
  body.user-shell-active .dashboard,
  body.user-shell-active .dashboard-container,
  body.user-shell-active .content-wrapper,
  body.user-shell-active .page-wrapper{
    width:auto !important;
    max-width:calc(100vw - var(--us-sidebar,290px)) !important;
    margin-right:0 !important;
    margin-left:0 !important;
    box-sizing:border-box !important;
    overflow-x:auto !important;
  }

  body.admin-shell-active .admin-shell-header{right:0 !important;left:0 !important;}
  body.user-shell-active .user-shell-header{right:0 !important;left:0 !important;}
}
@media (max-width:980px){
  body.admin-shell-active,
  body.user-shell-active{padding-right:0 !important;}
  body.admin-shell-active > main,
  body.user-shell-active > main,
  body.admin-shell-active .main-content,
  body.user-shell-active .main-content,
  body.admin-shell-active .dashboard,
  body.user-shell-active .dashboard,
  body.admin-shell-active .content-wrapper,
  body.user-shell-active .content-wrapper{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }
}

/* Phone card pages: force a single card per row even when old pages use unknown grids */
@media (max-width:700px){
  body.cc-card-list-page .cards-grid,
  body.cc-card-list-page .templates-grid,
  body.cc-card-list-page .card-grid,
  body.cc-card-list-page .premium-grid,
  body.cc-card-list-page .free-grid,
  body.cc-card-list-page .all-cards-grid,
  body.cc-card-list-page .cards-container,
  body.cc-card-list-page .templates-container,
  body.cc-card-list-page #cardsGrid,
  body.cc-card-list-page #cardsContainer,
  body.cc-card-list-page #templatesGrid,
  body.cc-card-list-page #templatesContainer,
  body.cc-card-list-page #freeTemplates,
  body.cc-card-list-page #premiumTemplates,
  body.cc-card-list-page #allCards,
  body.cc-card-list-page #cardsList{
    display:grid !important;
    grid-template-columns:1fr !important;
    justify-items:center !important;
  }
  body.cc-card-list-page .template-card,
  body.cc-card-list-page .card-sample,
  body.cc-card-list-page .card-item,
  body.cc-card-list-page .template-item,
  body.cc-card-list-page .premium-card,
  body.cc-card-list-page .free-card{
    width:min(94vw,390px) !important;
    max-width:390px !important;
    margin-inline:auto !important;
  }
}


/* ===== ClickCard v446 global safety fixes ===== */
html,body{max-width:100vw;overflow-x:hidden;}
body{margin:0;}
*,*::before,*::after{box-sizing:border-box;}
.table-container,.table-responsive,.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
img,video,iframe{max-width:100%;}
/* visible controls on private shell headers */
.user-shell-toggle,.user-shell-notify,.user-shell-avatar,.admin-shell-toggle,.admin-shell-logout{background:#071827 !important;color:#fff !important;}
.user-shell-toggle i,.user-shell-notify i,.admin-shell-toggle i,.admin-shell-logout i{color:#fff !important;opacity:1 !important;visibility:visible !important;}
@media (min-width:981px){
  body.admin-shell-active{padding-right:var(--as-sidebar,280px)!important;overflow-x:hidden!important;}
  body.user-shell-active{padding-right:var(--us-sidebar,290px)!important;overflow-x:hidden!important;}
  body.admin-shell-active > main,body.admin-shell-active .main-content,body.admin-shell-active .dashboard,body.admin-shell-active .admin-container,body.admin-shell-active .content-wrapper,body.admin-shell-active .page-wrapper,body.admin-shell-active .container,body.admin-shell-active .page,body.admin-shell-active .wrap{max-width:calc(100vw - var(--as-sidebar,280px))!important;width:auto!important;margin-right:0!important;box-sizing:border-box!important;overflow-x:auto!important;}
  body.user-shell-active > main,body.user-shell-active .main-content,body.user-shell-active .dashboard,body.user-shell-active .dashboard-container,body.user-shell-active .content-wrapper,body.user-shell-active .page-wrapper,body.user-shell-active .container{max-width:calc(100vw - var(--us-sidebar,290px))!important;width:auto!important;margin-right:0!important;box-sizing:border-box!important;overflow-x:auto!important;}
}
@media (max-width:980px){
  body.admin-shell-active,body.user-shell-active{padding-right:0!important;overflow-x:hidden!important;}
  .user-shell-toggle,.admin-shell-toggle{display:flex!important;align-items:center!important;justify-content:center!important;}
}