/* =============================================
   TeacherPlatform — Global Styles
   ============================================= */

:root {
  --brand: #f97316;
  --brand-dark: #ea6a0a;
  --brand-light: rgba(249,115,22,0.15);
  --bg: #fafaf9;
  --bg-dark: #0f0f0f;
  --card: #ffffff;
  --border: #e5e5e5;
  --text: #1a1a1a;
  --text-muted: #737373;
  --radius: 12px;
}

/* ---- Keyframe Animations ---- */

@keyframes blob-drift-1 {
  0%,100%{transform:translate(0px) scale(1);}
  33%{transform:translate(60px,-80px) scale(1.12);}
  66%{transform:translate(-40px,40px) scale(0.92);}
}
@keyframes blob-drift-2 {
  0%,100%{transform:translate(0px) scale(1);}
  33%{transform:translate(-70px,35px) scale(1.08);}
  66%{transform:translate(80px,-25px) scale(0.88);}
}
@keyframes blob-drift-3 {
  0%,100%{transform:translate(0px) scale(1.08);}
  33%{transform:translate(35px,70px) scale(0.93);}
  66%{transform:translate(-55px,-40px) scale(1.06);}
}
@keyframes grain-shift {
  0%,100%{transform:translate(0px);}
  20%{transform:translate(-4%,4%);}
  40%{transform:translate(4%,-3%);}
  60%{transform:translate(-3%,-4%);}
  80%{transform:translate(3%,3%);}
}
@keyframes shimmer-text {
  0%{background-position:200% center;}
  100%{background-position:-200% center;}
}
@keyframes shimmer {
  0%{background-position:-200% 0;}
  100%{background-position:200% 0;}
}
@keyframes fade-up {
  0%{opacity:0;transform:translateY(24px);}
  100%{opacity:1;transform:translateY(0);}
}
@keyframes float {
  0%,100%{transform:translateY(0px);}
  50%{transform:translateY(-8px);}
}
@keyframes scroll-pulse {
  0%,100%{opacity:1;transform:translateY(0);}
  50%{opacity:0.3;transform:translateY(6px);}
}
@keyframes ping {
  75%,100%{opacity:0;transform:scale(2);}
}
@keyframes loadBar {
  from{transform:scaleX(0);transform-origin:left;}
  to{transform:scaleX(1);transform-origin:left;}
}
@keyframes marquee {
  from{transform:translateX(0);}
  to{transform:translateX(calc(-50% - var(--gap,16px)/2));}
}
@keyframes border-beam-spin {
  100%{transform:rotate(360deg);}
}

/* ---- Utility Classes ---- */

.animate-blob-1{animation:blob-drift-1 18s ease-in-out infinite;}
.animate-blob-2{animation:blob-drift-2 22s ease-in-out infinite;}
.animate-blob-3{animation:blob-drift-3 26s ease-in-out infinite;}
.animate-grain{animation:grain-shift 0.4s steps(1) infinite;}
.animate-fade-up{animation:fade-up 0.5s ease forwards;}
.animate-float{animation:float 3s ease-in-out infinite;}
.animate-marquee{animation:marquee var(--duration,32s) linear infinite;}
.animate-load-bar{animation:loadBar 0.7s ease-out forwards;}
.animate-ping{animation:ping 1s cubic-bezier(0,0,0.2,1) infinite;}

.shimmer-text {
  background:linear-gradient(90deg,#f97316,#fbbf24,#f97316);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer-text 3s linear infinite;
}

.skeleton {
  background:linear-gradient(90deg,#f0f0f0 0%,#e0e0e0 40%,#f0f0f0 80%) 0/200% 100%;
  animation:shimmer 1.4s ease-in-out infinite;
  border-radius:var(--radius);
}

/* ---- Glass Card ---- */
.glass-card {
  background:rgba(255,255,255,0.8);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 2px 20px rgba(0,0,0,0.08);
  backdrop-filter:blur(12px);
  border-radius:var(--radius);
}
.glass-card-dark {
  background:rgba(18,18,18,0.7);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 2px 20px rgba(0,0,0,0.4);
  backdrop-filter:blur(12px);
  border-radius:var(--radius);
}

/* ---- Glow ---- */
.glow-brand{box-shadow:0 0 20px rgba(249,115,22,0.4);}
.glow-brand-sm{box-shadow:0 0 12px rgba(249,115,22,0.25);}

/* ---- Buttons ---- */
.btn-primary {
  background:var(--brand);
  color:#fff;
  padding:0.6rem 1.4rem;
  border-radius:8px;
  font-weight:600;
  font-size:0.9rem;
  border:none;
  cursor:pointer;
  transition:background 0.2s,box-shadow 0.2s,transform 0.15s;
  display:inline-flex;align-items:center;gap:6px;
}
.btn-primary:hover{background:var(--brand-dark);box-shadow:0 4px 16px rgba(249,115,22,0.35);transform:translateY(-1px);}
.btn-primary:active{transform:translateY(0);}

.btn-secondary {
  background:transparent;
  color:var(--brand);
  padding:0.6rem 1.4rem;
  border-radius:8px;
  font-weight:600;
  font-size:0.9rem;
  border:1.5px solid var(--brand);
  cursor:pointer;
  transition:all 0.2s;
  display:inline-flex;align-items:center;gap:6px;
}
.btn-secondary:hover{background:var(--brand-light);}

.btn-ghost {
  background:transparent;
  color:var(--text);
  padding:0.6rem 1.2rem;
  border-radius:8px;
  font-weight:500;
  font-size:0.9rem;
  border:1px solid var(--border);
  cursor:pointer;
  transition:all 0.2s;
  display:inline-flex;align-items:center;gap:6px;
}
.btn-ghost:hover{background:#f5f5f5;border-color:#ccc;}

/* ---- Product Card ---- */
.product-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform 0.25s ease,box-shadow 0.25s ease;
  cursor:pointer;
}
.product-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.12);}
.product-card .cover{aspect-ratio:4/3;overflow:hidden;background:#f5f5f5;}
.product-card .cover img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease;}
.product-card:hover .cover img{transform:scale(1.05);}

/* ---- Form inputs ---- */
.form-input {
  width:100%;
  padding:0.65rem 1rem;
  border:1.5px solid var(--border);
  border-radius:8px;
  font-size:0.9rem;
  background:#fff;
  color:var(--text);
  transition:border-color 0.2s,box-shadow 0.2s;
  outline:none;
}
.form-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(249,115,22,0.12);}

/* ---- Custom cursor ---- */
@media(pointer:fine){
  body *{cursor:none!important;}
  #cur-dot,#cur-ring{display:block;}
}
@media(pointer:coarse){
  #cur-dot,#cur-ring{display:none;}
}
#cur-dot{
  position:fixed;width:8px;height:8px;
  background:var(--brand);border-radius:50%;
  pointer-events:none;z-index:99999;
  transform:translate(-50%,-50%);
  transition:transform 0.05s;
}
#cur-ring{
  position:fixed;width:30px;height:30px;
  border:1.5px solid rgba(249,115,22,0.6);
  border-radius:50%;pointer-events:none;z-index:99998;
  transform:translate(-50%,-50%);
  transition:transform 0.12s ease,width 0.2s,height 0.2s,border-color 0.2s;
}

/* ---- Page load bar ---- */
#load-bar{
  position:fixed;top:0;left:0;right:0;height:2px;
  background:var(--brand);z-index:9999;
  transform:scaleX(0);transform-origin:left;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:#f1f1f1;}
::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:#a3a3a3;}

/* ---- Toast notifications ---- */
.toast{
  position:fixed;bottom:24px;right:24px;z-index:9999;
  background:#1a1a1a;color:#fff;padding:0.75rem 1.25rem;
  border-radius:10px;font-size:0.875rem;font-weight:500;
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
  animation:fade-up 0.3s ease;
  display:flex;align-items:center;gap:8px;
}
.toast.success{border-left:3px solid #22c55e;}
.toast.error{border-left:3px solid #ef4444;}
.toast.info{border-left:3px solid var(--brand);}

/* ---- Star rating ---- */
.stars{color:#fbbf24;letter-spacing:1px;}

/* ---- Badge ---- */
.badge{
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:999px;
  font-size:0.7rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;
}
.badge-orange{background:rgba(249,115,22,0.12);color:#c2410c;}
.badge-green{background:rgba(34,197,94,0.12);color:#15803d;}
.badge-blue{background:rgba(59,130,246,0.12);color:#1d4ed8;}
.badge-gray{background:#f5f5f5;color:#737373;}

/* ---- Selects — global modern style (covers all selects site-wide) ---- */
select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0.6rem 2.5rem 0.6rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.875rem;
  font-family: Inter, sans-serif;
  font-weight: 500;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px;
  color: var(--text);
  cursor: pointer;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  line-height: 1.4;
}
select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.12);
  background-color: #fff;
}
select:hover {
  border-color: #c4c4c4;
}
/* select-wrapper — legacy wrapper still supported, ::after removed (bg-image handles chevron) */
.select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}
/* pod-input selects inherit global select styles, just need size override */
select.pod-input {
  padding: 0.625rem 2.5rem 0.625rem 0.875rem;
}
/* Compact inline variant (sort dropdowns, filter bars) */
.select-compact {
  width: auto;
  padding: 0.45rem 2.2rem 0.45rem 0.8rem;
  font-size: 0.8rem;
  background-position: right 0.6rem center;
  background-size: 14px;
}

/* ---- Sidebar link (dashboard) ---- */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #525252;
  transition: background-color 0.15s, color 0.15s;
}
.sidebar-link:hover { background: #f5f5f5; }
.sidebar-link.active { background: #fff7ed; color: #ea580c; }


/* ---- Dark Mode ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0f0f;
    --text: #e5e5e5;
    --card-bg: #1a1a1a;
    --card-border: #2a2a2a;
    --muted: #a3a3a3;
  }
}

[data-theme="dark"] {
  --bg: #0f0f0f;
  --text: #e5e5e5;
  --card-bg: #1a1a1a;
  --card-border: #2a2a2a;
  --muted: #a3a3a3;
}

[data-theme="dark"] body { background: #0f0f0f; color: #e5e5e5; }
[data-theme="dark"] nav { background: rgba(15,15,15,0.95) !important; border-color: #2a2a2a !important; }
[data-theme="dark"] .glass-card, [data-theme="dark"] .co-card { background: #1a1a1a !important; border-color: #2a2a2a !important; }
[data-theme="dark"] footer { background: #0f0f0f !important; border-color: #2a2a2a !important; }
[data-theme="dark"] .bg-white { background: #1a1a1a !important; }
[data-theme="dark"] .bg-gray-50, [data-theme="dark"] .bg-gray-100 { background: #111 !important; }
[data-theme="dark"] .text-gray-900 { color: #e5e5e5 !important; }
[data-theme="dark"] .text-gray-800 { color: #d4d4d4 !important; }
[data-theme="dark"] .text-gray-700 { color: #b0b0b0 !important; }
[data-theme="dark"] .text-gray-600 { color: #a3a3a3 !important; }
[data-theme="dark"] .text-gray-500 { color: #888 !important; }
[data-theme="dark"] .border-gray-100, [data-theme="dark"] .border-gray-200 { border-color: #2a2a2a !important; }
[data-theme="dark"] .border-gray-50 { border-color: #222 !important; }
[data-theme="dark"] .form-input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #222 !important; border-color: #333 !important; color: #e5e5e5 !important; }
[data-theme="dark"] .form-input:focus, [data-theme="dark"] select:focus { border-color: #f97316 !important; }
[data-theme="dark"] .sidebar-link { color: #b0b0b0; }
[data-theme="dark"] .sidebar-link:hover { background: #222; }
[data-theme="dark"] .sidebar-link.active { background: #1a0f00; color: #f97316; }
[data-theme="dark"] .product-card { background: #1a1a1a; border-color: #2a2a2a; }
[data-theme="dark"] .product-card:hover { border-color: #444; }
[data-theme="dark"] .badge-orange { background: rgba(249,115,22,0.2); }
[data-theme="dark"] .skeleton { background: linear-gradient(90deg, #222 0%, #333 40%, #222 80%); }
[data-theme="dark"] .btn-ghost { color: #ccc; border-color: #444; }
[data-theme="dark"] .btn-ghost:hover { background: #222; }