/* =========================================================
   Droocy UI v21 — unified modern commercial design layer
   Purpose: visual-only overrides. No business logic changes.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

:root{
  --d21-bg:#f5f7fb;
  --d21-surface:#ffffff;
  --d21-surface-2:#fafbff;
  --d21-ink:#111827;
  --d21-text:#344054;
  --d21-muted:#667085;
  --d21-line:#e5e9f2;
  --d21-line-strong:#d7ddea;
  --d21-brand:#6547d8;
  --d21-brand-2:#8b5cf6;
  --d21-brand-3:#4f46e5;
  --d21-brand-soft:#f2efff;
  --d21-teal:#0891b2;
  --d21-success:#15966a;
  --d21-warning:#c87719;
  --d21-danger:#c73f55;
  --d21-radius-sm:10px;
  --d21-radius:16px;
  --d21-radius-lg:22px;
  --d21-radius-xl:28px;
  --d21-shadow-sm:0 4px 14px rgba(16,24,40,.045);
  --d21-shadow:0 10px 28px rgba(16,24,40,.07);
  --d21-shadow-lg:0 20px 55px rgba(49,46,129,.11);
  --d21-ring:0 0 0 4px rgba(101,71,216,.11);
}

html{scroll-behavior:smooth;background:var(--d21-bg)}
body{
  margin:0;
  color:var(--d21-ink);
  background:
    radial-gradient(circle at 88% -8%,rgba(124,92,246,.075),transparent 27rem),
    radial-gradient(circle at 0 32%,rgba(8,145,178,.045),transparent 25rem),
    var(--d21-bg);
  font-family:"Cairo",Tahoma,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body,button,input,select,textarea{font-family:"Cairo",Tahoma,Arial,sans-serif}
a{transition:color .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}
::selection{background:#ded7ff;color:#2f2367}

/* ---------- Typography ---------- */
h1,h2,h3,h4{color:var(--d21-ink);letter-spacing:-.018em}
h1{line-height:1.28} h2,h3{line-height:1.38}
p{line-height:1.85}
small,.muted,.sub,.subtitle,.meta,.hint,.helper-text,.description,.course-meta,.lesson-meta,.section-meta{
  color:var(--d21-muted)!important;opacity:1!important
}

/* ---------- Unified page surfaces ---------- */
.card,.panel,.form-card,.box,.admin-card,.d11-panel,.tp-panel,.a6-panel,
.setting,.stat,.metric,.unit,.section-card,.quiz-card,.lesson-card,.course-card{
  border:1px solid var(--d21-line)!important;
  border-radius:var(--d21-radius-lg)!important;
  background:var(--d21-surface);
  box-shadow:var(--d21-shadow-sm)!important;
}
.card:hover,.admin-card:hover,.course-card:hover{
  border-color:#d7d0f4!important;
  box-shadow:var(--d21-shadow)!important;
}
.panel,.form-card,.d11-panel,.tp-panel,.a6-panel{overflow:hidden}

/* ---------- Section / page headings ---------- */
.page-head,.section-head,.panel-head,.card-head,.head,.toolbar{
  gap:14px;
}
.page-head h1,.page-head h2,.section-head h1,.section-head h2,.panel-head h2,.card-head h2{
  margin-block:0;
  font-weight:900;
}
.page-head p,.section-head .sub,.section-head p{color:var(--d21-muted)!important}

/* ---------- Buttons ---------- */
.btn,.d11-btn,.tp-btn,.quiz-btn,.hero-btn,.save,.primary,.soft,.ghost,
button.btn,a.btn,input[type="submit"].btn{
  border-radius:12px!important;
  font-weight:900!important;
  min-height:42px;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease!important;
}
.btn:hover,.d11-btn:hover,.tp-btn:hover,.quiz-btn:hover,.hero-btn:hover,
button.btn:hover,a.btn:hover{transform:translateY(-1px)}
.btn.primary,.primary.btn,.d11-btn.primary,.tp-btn.primary,.hero-btn.primary,
button.primary,input[type="submit"].primary{
  color:#fff!important;
  border-color:transparent!important;
  background:linear-gradient(135deg,var(--d21-brand),var(--d21-brand-2))!important;
  box-shadow:0 8px 18px rgba(101,71,216,.18)!important;
}
.btn.soft,.soft.btn,.d11-btn.soft,.tp-btn.soft{
  color:#5a42c9!important;
  border:1px solid #ded8f8!important;
  background:#f7f5ff!important;
}
.btn.ghost,.ghost.btn{background:#fff!important;border:1px solid var(--d21-line-strong)!important;color:var(--d21-text)!important}
.btn.danger,.danger.btn{background:#fff2f4!important;color:var(--d21-danger)!important;border-color:#ffd6dd!important}
.btn.green,.green.btn{background:#eaf8f2!important;color:var(--d21-success)!important;border-color:#c8eadc!important}
button:disabled,.btn:disabled{opacity:.58;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* ---------- Inputs / editor controls ---------- */
.field label,.d11-field label,.tp-field label,.a6-field label,label{
  color:#344054;font-weight:800
}
input:not([type="checkbox"]):not([type="radio"]),select,textarea,.text-input{
  border:1px solid var(--d21-line-strong)!important;
  border-radius:12px!important;
  background:#fff!important;
  color:var(--d21-ink)!important;
  min-height:43px;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease!important;
}
textarea{min-height:110px}
input:not([type="checkbox"]):not([type="radio"]):focus,select:focus,textarea:focus,.text-input:focus{
  outline:none!important;border-color:#9f8cf0!important;box-shadow:var(--d21-ring)!important
}
input::placeholder,textarea::placeholder{color:#98a2b3!important}
input[type="checkbox"],input[type="radio"]{accent-color:var(--d21-brand)}

/* ---------- Messages / states ---------- */
.msg,.flash,.note,.hint,.error,.err,.ok,.okmsg,.errmsg,.bp-note,.bp-error{
  border-radius:13px!important;
}
.msg.ok,.okmsg,.success{background:#ecfdf5!important;color:#087a59!important;border-color:#c9efdf!important}
.msg.err,.errmsg,.error{background:#fff2f4!important;color:#b72e45!important;border-color:#ffd5dc!important}
.empty,.loading,.bp-empty{
  border:1px dashed #cfd6e4!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.78)!important;
  color:var(--d21-muted)!important;
}

/* ---------- Badges ---------- */
.badge,.chip,.pill,.status,.count-badge,.grade-badge,.access-badge,.discount-badge{
  border-radius:999px!important;
  font-weight:900!important;
  letter-spacing:0;
}

/* ---------- Data tables ---------- */
.table,.t5-table,.a6-table,table{
  border-collapse:separate!important;
  border-spacing:0!important;
}
.table th,.t5-table th,.a6-table th,table th{
  background:linear-gradient(180deg,#faf9ff,#f6f7fb)!important;
  color:#475467!important;
  font-weight:900!important;
  border-bottom:1px solid var(--d21-line)!important;
}
.table td,.t5-table td,.a6-table td,table td{border-bottom-color:#edf0f5!important}
.table tbody tr:hover td,.t5-table tbody tr:hover td,.a6-table tbody tr:hover td{background:#fbfaff!important}

/* ---------- KPIs / stats ---------- */
.stats,.stat-grid,.a6-kpis,.d11-stats{gap:14px!important}
.stat,.metric,.a6-kpi,.d11-stat{
  position:relative;
  overflow:hidden;
  border:1px solid var(--d21-line)!important;
  background:linear-gradient(180deg,#fff,#fbfbfe)!important;
}
.stat::before,.metric::before,.a6-kpi::before,.d11-stat::before{
  content:"";position:absolute;inset-inline-start:0;top:0;width:4px;height:100%;
  background:linear-gradient(180deg,var(--d21-brand),var(--d21-brand-2));opacity:.72
}
.stat strong,.metric strong,.a6-kpi strong,.d11-stat strong{font-weight:950;color:#201a45}

/* ---------- Header polish ---------- */
.droocy-site-header{
  background:rgba(10,9,24,.965)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 10px 28px rgba(15,12,37,.16)!important;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)
}
.droocy-header-inner{min-height:68px!important}
.droocy-brand,.droocy-brand strong,.droocy-brand small{color:#fff!important;-webkit-text-fill-color:#fff!important}
.droocy-brand small{color:#b9b6ce!important;-webkit-text-fill-color:#b9b6ce!important}
.droocy-brand-mark{
  background:linear-gradient(135deg,#744ff0,#9a6cff)!important;
  color:#fff!important;
  box-shadow:0 8px 22px rgba(122,85,235,.32)!important
}
.droocy-main-nav .droocy-nav-link,.droocy-main-nav a{
  color:#e9e7f2!important;-webkit-text-fill-color:#e9e7f2!important;
  border-radius:10px!important
}
.droocy-main-nav .droocy-nav-link:hover,.droocy-main-nav .droocy-nav-link.active,
.droocy-main-nav a:hover,.droocy-main-nav a.active{
  background:rgba(255,255,255,.10)!important;color:#fff!important;-webkit-text-fill-color:#fff!important
}
.droocy-admin-more-toggle{background:rgba(255,255,255,.07)!important;color:#fff!important;border-color:rgba(255,255,255,.15)!important}
.droocy-icon-btn,.droocy-cart-btn,.droocy-login-btn{
  background:#fff!important;color:#171327!important;-webkit-text-fill-color:#171327!important;border-color:#fff!important
}
.droocy-register-btn{
  background:linear-gradient(135deg,#6f49e9,#8c5cf4)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border-color:transparent!important
}
.droocy-user-chip{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.12)!important}
.droocy-user-chip strong{color:#fff!important}.droocy-user-chip small{color:#b8b4ca!important}
.droocy-user-avatar{background:#7650e9!important;color:#fff!important}
.droocy-logout-btn{color:#fff!important;border-color:rgba(255,255,255,.16)!important;background:rgba(255,255,255,.07)!important}
.droocy-menu-toggle{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.15)!important}
.droocy-menu-toggle span{background:#fff!important}

/* ---------- Footer ---------- */
.droocy-site-footer{
  background:
    radial-gradient(circle at 15% 0,rgba(139,92,246,.20),transparent 22rem),
    linear-gradient(145deg,#0f0d20,#1b1735)!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
}
.droocy-footer-title{font-size:13px!important;color:#fff}
.droocy-footer-brand p,.droocy-footer-links a{color:#c8c4d6!important}
.droocy-footer-links a:hover{color:#fff!important}

/* ---------- Course cards: main marketplace ---------- */
.course-card{
  overflow:hidden!important;
  border:1px solid #dfe4ed!important;
  border-radius:20px!important;
  box-shadow:0 8px 24px rgba(16,24,40,.07)!important;
  background:#fff!important;
}
.course-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(16,24,40,.11)!important}
.course-card .course-media{
  background:#eef1f6!important;
  border-bottom:1px solid #e9edf3!important;
}
.course-card .course-media img,.course-card .course-media iframe,.course-card .course-media video{
  width:100%!important;height:100%!important;display:block!important;border:0!important
}
.course-card .course-info-head,.course-card .course-body{background:#fff}
.course-card .course-info-head{padding:15px 14px 9px!important}
.course-card .subject-name{color:#6a4cd8!important;font-weight:900!important;font-size:11px!important}
.course-card .course-title-row{align-items:center!important;gap:9px!important}
.course-card .course-title{font-weight:950!important;color:#111827!important;letter-spacing:-.02em!important}
.course-card .course-lower-badges{display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:nowrap!important}
.course-card .course-lower-badges>*{white-space:nowrap!important}
.course-card .stats-grid{
  overflow:hidden!important;
  border:1px solid #e4e8f0!important;
  border-radius:14px!important;
  background:#fff!important;
}
.course-card .stat-box{padding:0 8px 10px!important;background:#fff!important}
.course-card .stat-box small{
  display:block!important;margin:0 -8px 7px!important;padding:5px 6px!important;
  background:linear-gradient(180deg,#f0f2ff,#e8ecff)!important;
  color:#4d53a3!important;font-weight:900!important;font-size:9px!important
}
.course-card .stat-box strong{font-size:11px!important;color:#182230!important;font-weight:900!important;line-height:1.45!important}
.course-card .teacher-price{border:1px solid #e7eaf1!important;border-radius:14px!important;background:#fcfcfe!important}
.course-card .actions .add,.course-card .actions .start{
  background:linear-gradient(135deg,var(--d21-brand),var(--d21-brand-2))!important;
  box-shadow:0 8px 18px rgba(101,71,216,.16)!important
}
.course-card .actions .view{border-color:#d7d0f4!important;color:#5f43ce!important;background:#fff!important}

/* ---------- Teacher-hub course cards ---------- */
#courses .card{
  overflow:hidden!important;
  border:1px solid #dfe4ed!important;
  border-radius:20px!important;
  box-shadow:0 8px 24px rgba(16,24,40,.07)!important;
  background:#fff!important
}
#courses .card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(16,24,40,.11)!important}
#courses .course-media{border-bottom:1px solid #e9edf3!important;background:#eef1f6!important}
#courses .body{padding:15px!important}
#courses .course-subject{font-size:11px!important;color:#6b4dd9!important;font-weight:900!important}
#courses .course-title-row{align-items:center!important;gap:8px!important}
#courses .course-title-row h3{font-weight:950!important;letter-spacing:-.015em!important}
#courses .course-lower-badges{display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:nowrap!important}
#courses .course-lower-badges>*{white-space:nowrap!important}
#courses .course-stats{
  overflow:hidden!important;border:1px solid #e4e8f0!important;border-radius:14px!important;background:#fff!important
}
#courses .course-stat{padding:0 7px 10px!important}
#courses .course-stat small{
  display:block!important;margin:0 -7px 7px!important;padding:5px!important;
  background:linear-gradient(180deg,#f0f2ff,#e8ecff)!important;color:#4d53a3!important;
  font-size:9px!important;font-weight:900!important
}
#courses .course-stat strong{font-size:11px!important;font-weight:900!important;color:#182230!important}
#courses .course-price{border-top:1px solid #edf0f5!important;padding-top:12px!important}
#courses .course-price .purple{background:linear-gradient(135deg,var(--d21-brand),var(--d21-brand-2))!important}

/* ---------- Book marketplace ---------- */
.book,.bp-card,.bp-card.bp-card-v2{
  border-color:#dfe4ed!important;
  box-shadow:0 8px 24px rgba(16,24,40,.07)!important;
  border-radius:20px!important
}
.book:hover,.bp-card:hover,.bp-card.bp-card-v2:hover{
  transform:translateY(-3px)!important;border-color:#d2c9f5!important;
  box-shadow:0 18px 40px rgba(16,24,40,.11)!important
}
.book .cover,.bp-cover{background:linear-gradient(180deg,#f7f8fb,#f1f3f8)!important}
.book .btn:not(.secondary),.bp-btn:not(.outline):not(.soft){background:linear-gradient(135deg,var(--d21-brand),var(--d21-brand-2))!important}

/* ---------- Commerce / checkout ---------- */
.cart-page,.checkout-page,.purchase-checkout,.checkout-shell,.cart-shell{max-width:1280px;margin-inline:auto}
.summary,.order-summary,.checkout-summary,.cart-summary{
  border-radius:20px!important;border:1px solid var(--d21-line)!important;box-shadow:var(--d21-shadow)!important;background:#fff!important
}
.payment-method,.payment-card,.gateway-card{
  border:1px solid var(--d21-line)!important;border-radius:16px!important;background:#fff!important;transition:.16s ease!important
}
.payment-method:hover,.payment-card:hover,.gateway-card:hover{border-color:#cfc4f7!important;box-shadow:var(--d21-shadow-sm)!important}

/* ---------- Admin/teacher/student workspaces ---------- */
.side,.sidebar,.a6-sidebar,.d11-sidebar,.tp-sidebar{
  border-color:var(--d21-line)!important;
  box-shadow:0 0 30px rgba(16,24,40,.035)!important
}
.top,.topbar,.a6-topbar,.d11-topbar,.tp-topbar{
  border-color:var(--d21-line)!important;
  box-shadow:0 4px 18px rgba(16,24,40,.035)!important
}
.nav a,.a6-nav a,.d11-nav a,.tp-nav a{transition:.16s ease!important}
.nav a:hover,.a6-nav a:hover,.d11-nav a:hover,.tp-nav a:hover{background:#f5f2ff!important;color:#5e44cf!important}

/* ---------- Authentication pages ---------- */
body .wrap>.card:only-child,body .wrap>.card:first-child:last-child{
  border-color:#e1e5ee!important;
}
.role-card{
  border:1px solid #e1e5ee!important;border-radius:16px!important;background:#fff!important;
  transition:.16s ease!important
}
.role-card:hover,.role-card.active{border-color:#a995ee!important;background:#f8f6ff!important;box-shadow:var(--d21-shadow-sm)!important}

/* ---------- Accessibility ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid rgba(101,71,216,.22)!important;outline-offset:2px!important
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  .droocy-site-header .droocy-mobile-panel.open{background:#fff!important;color:#172033!important}
  .droocy-mobile-links .droocy-nav-link{color:#172033!important;-webkit-text-fill-color:#172033!important}
}
@media(max-width:760px){
  body{background:var(--d21-bg)}
  .content,.page,.wrap,.shell,.droocy-page-shell{padding-inline:12px!important}
  .card,.panel,.form-card,.admin-card,.d11-panel,.tp-panel,.a6-panel{border-radius:16px!important}
  .btn,.d11-btn,.tp-btn,.quiz-btn,.hero-btn{min-height:44px}
  .course-card .course-info-head{padding:13px 12px 8px!important}
  .course-card .course-title-row,#courses .course-title-row{align-items:flex-start!important}
  .course-card .course-title,#courses .course-title-row h3{font-size:14px!important;line-height:1.55!important}
  .course-card .course-lower-badges,#courses .course-lower-badges{gap:4px!important}
  .course-card .course-lower-badges>*,#courses .course-lower-badges>*{font-size:8px!important;padding:4px 6px!important}
  .course-card .stat-box strong,#courses .course-stat strong{font-size:10px!important}
  .droocy-footer-inner{padding-inline:16px!important}
}
@media(max-width:430px){
  .course-card .course-title-row,#courses .course-title-row{gap:6px!important}
  .course-card .course-title,#courses .course-title-row h3{font-size:13px!important}
  .course-card .course-lower-badges>*,#courses .course-lower-badges>*{font-size:7.5px!important;padding:3px 5px!important}
  .course-card .stats-grid,#courses .course-stats{gap:0!important}
  .course-card .stat-box,#courses .course-stat{padding-inline:4px!important}
  .course-card .stat-box small,#courses .course-stat small{margin-inline:-4px!important;font-size:8px!important}
  .course-card .stat-box strong,#courses .course-stat strong{font-size:9px!important}
}