/* ============================================================
   Custom styles — loaded alongside Tailwind CDN
   ============================================================ */

/* Accent CSS variables — default: amber/gold */
:root {
  --p-50:  255 251 235;
  --p-100: 254 243 199;
  --p-200: 253 230 138;
  --p-300: 252 211 77;
  --p-400: 251 191 36;
  --p-500: 245 158 11;
  --p-600: 217 119 6;
  --p-700: 180 83 9;
  --p-800: 146 64 14;
  --p-900: 120 53 15;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: rgb(var(--p-500)); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--p-600)); }

html { scroll-behavior: smooth; }

/* Arabic font */
[dir="rtl"] { font-family: 'Cairo', Arial, sans-serif; }

/* Hero overlay */
.hero-overlay {
  background: linear-gradient(135deg,rgba(17,24,39,.85) 0%,rgba(17,24,39,.6) 50%,rgb(var(--p-500)/.2) 100%);
}
html:not(.dark) .hero-overlay {
  background: linear-gradient(135deg,rgba(17,24,39,.45) 0%,rgba(17,24,39,.25) 50%,rgb(var(--p-500)/.1) 100%);
}

/* Stripe accent */
.stripe-accent {
  background: repeating-linear-gradient(45deg,rgb(var(--p-500)),rgb(var(--p-500)) 10px,rgb(var(--p-600)) 10px,rgb(var(--p-600)) 20px);
}

/* Card hover */
.card-hover { transition: all .3s; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); }

/* Glow */
.yellow-glow:hover { box-shadow: 0 0 20px rgb(var(--p-500)/.4); }

/* Input field */
.input-field {
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  padding: .625rem 1rem;
  font-size: .875rem;
  transition: all .15s;
  background: white;
  outline: none;
  width: 100%;
}
.input-field:focus { border-color: rgb(var(--p-400)); box-shadow: 0 0 0 3px rgb(var(--p-400)/.2); }
.dark .input-field { background: #1f2937; border-color: #374151; color: #f9fafb; }
.dark .input-field:focus { border-color: rgb(var(--p-400)); }

/* Buttons */
.btn-primary {
  display:inline-flex;align-items:center;gap:.5rem;
  background: rgb(var(--p-500));
  color: #111827;
  font-weight: 700;
  padding: .625rem 1.25rem;
  border-radius: .75rem;
  transition: background .15s;
  border: none; cursor: pointer; font-size:.875rem;
}
.btn-primary:hover { background: rgb(var(--p-600)); }
.btn-primary:disabled { opacity:.6; cursor:not-allowed; }

.btn-secondary {
  display:inline-flex;align-items:center;gap:.5rem;
  background: #f3f4f6; color: #1f2937;
  font-weight: 600;
  padding: .625rem 1.25rem;
  border-radius: .75rem;
  transition: background .15s;
  border: none; cursor: pointer; font-size:.875rem;
}
.btn-secondary:hover { background: #e5e7eb; }

.btn-danger {
  display:inline-flex;align-items:center;gap:.5rem;
  background: #fef2f2; color: #dc2626;
  font-weight: 600;
  padding: .5rem 1rem;
  border-radius: .75rem;
  transition: background .15s;
  border: none; cursor: pointer; font-size:.875rem;
}
.btn-danger:hover { background: #fee2e2; }

/* Scroll indicator bounce */
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
.bounce { animation: bounce 1.5s infinite; }

/* Fade-in on scroll (JS adds .visible) */
.fade-in { opacity:0; transform:translateY(20px); transition:opacity .6s,transform .6s; }
.fade-in.visible { opacity:1; transform:none; }

/* Rich text content (blog/services/projects) */
.rich-content h1 { font-size:1.875rem;font-weight:800;margin-bottom:1rem;margin-top:1.5rem; }
.rich-content h2 { font-size:1.5rem;font-weight:700;margin-bottom:.75rem;margin-top:1.25rem; }
.rich-content h3 { font-size:1.25rem;font-weight:600;margin-bottom:.5rem;margin-top:1rem; }
.rich-content p  { margin-bottom:1rem;line-height:1.75; }
.rich-content ul { list-style:disc;padding-left:1.5rem;margin-bottom:1rem; }
.rich-content ol { list-style:decimal;padding-left:1.5rem;margin-bottom:1rem; }
.rich-content blockquote { border-left:4px solid rgb(var(--p-500));padding-left:1rem;font-style:italic;margin:1rem 0;color:#6b7280; }
.rich-content img { border-radius:.5rem;margin:1rem 0;max-width:100%; }
.rich-content a { color:rgb(var(--p-600));text-decoration:underline; }
.rich-content strong { font-weight:700; }

/* Line clamp */
.line-clamp-2 { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.line-clamp-3 { display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }

/* Quill editor overrides (admin) */
.ql-toolbar { border-radius:.75rem .75rem 0 0!important; border-color:#e5e7eb!important; }
.ql-container { border-radius:0 0 .75rem .75rem!important; border-color:#e5e7eb!important; min-height:200px; font-size:.875rem; }
.ql-editor { min-height:200px; }

/* Image upload preview */
.img-preview { width:100%;height:160px;object-fit:cover;border-radius:.75rem;border:2px solid #e5e7eb; }

/* Admin table */
.admin-table { width:100%;border-collapse:collapse; }
.admin-table th { background:#f9fafb;text-align:left;padding:.75rem 1rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#6b7280;border-bottom:2px solid #e5e7eb; }
.admin-table td { padding:.75rem 1rem;border-bottom:1px solid #f3f4f6;font-size:.875rem; }
.admin-table tr:hover td { background:#fafafa; }

/* Status badges */
.badge { display:inline-flex;align-items:center;padding:.25rem .625rem;border-radius:9999px;font-size:.75rem;font-weight:600; }
.badge-green  { background:#dcfce7;color:#166534; }
.badge-yellow { background:#fef9c3;color:#854d0e; }
.badge-red    { background:#fee2e2;color:#991b1b; }
.badge-blue   { background:#dbeafe;color:#1e40af; }
.badge-gray   { background:#f3f4f6;color:#374151; }

/* Flash messages */
.flash-success { background:#dcfce7;color:#166534;border:1px solid #bbf7d0;border-radius:.75rem;padding:.75rem 1rem;margin-bottom:1rem; }
.flash-error   { background:#fee2e2;color:#991b1b;border:1px solid #fecaca;border-radius:.75rem;padding:.75rem 1rem;margin-bottom:1rem; }