/* ===== Custom CSS - Light Theme ===== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ===== Text Gradients ===== */
.text-gradient-gold {
  background: linear-gradient(to right, #ca8a04, #a16207, #ca8a04, #a16207);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  animation: shine 4s linear infinite;
}

@keyframes shine {
  to { background-position: 200% center; }
}

/* ===== Light Cards ===== */
.glass-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.glass-card-strong {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
}

/* ===== Gold Glow Effect (popular plan card) ===== */
.gold-glow {
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.12), 0 4px 20px rgba(0, 0, 0, 0.08);
  border-color: rgba(245, 158, 11, 0.4);
}

.gold-border-gradient {
  position: relative;
  background-clip: padding-box;
  border: 1px solid transparent;
}
.gold-border-gradient::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.8), rgba(217, 119, 6, 0.2), rgba(245, 158, 11, 0.8));
  z-index: -1;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
}

/* ===== Gold Gradient Line (header underline) ===== */
.gold-gradient-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(202, 138, 4, 0.5), rgba(234, 179, 8, 0.8), rgba(202, 138, 4, 0.5), transparent);
}

/* ===== Light Input Style ===== */
.dark-input {
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  color: #111827;
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  outline: none;
  transition: all 0.2s ease;
}

.dark-input:focus {
  border-color: #eab308;
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.15);
}

.dark-input::placeholder {
  color: #9ca3af;
}

/* ===== Light Scrollbar ===== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f9fafb;
}
::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* ===== Quill Editor Light Theme ===== */
.ql-container {
  min-height: 400px;
  background: #ffffff;
  border-color: #d1d5db !important;
  color: #374151;
}

.ql-editor {
  min-height: 380px;
  color: #374151;
}

.ql-editor.ql-blank::before {
  color: #9ca3af;
}

.ql-toolbar.ql-snow {
  background: #f9fafb;
  border-color: #d1d5db !important;
}

.ql-snow .ql-stroke {
  stroke: #6b7280 !important;
}

.ql-snow .ql-fill {
  fill: #6b7280 !important;
}

.ql-snow .ql-picker-label {
  color: #6b7280 !important;
}

.ql-snow .ql-picker-options {
  background: #ffffff !important;
  border-color: #d1d5db !important;
}

.ql-snow .ql-picker-item {
  color: #374151 !important;
}

.ql-snow .ql-picker-item:hover {
  color: #ca8a04 !important;
}

.ql-snow .ql-active .ql-stroke {
  stroke: #ca8a04 !important;
}

.ql-snow .ql-active .ql-fill {
  fill: #ca8a04 !important;
}

.ql-snow .ql-active {
  color: #ca8a04 !important;
}

.ql-snow .ql-picker-label:hover .ql-stroke {
  stroke: #ca8a04 !important;
}

.ql-snow button:hover .ql-stroke {
  stroke: #ca8a04 !important;
}

.ql-snow button:hover .ql-fill {
  fill: #ca8a04 !important;
}

/* ===== Prose Light (legal pages) ===== */
.prose-dark {
  color: #374151;
}
.prose-dark h1, .prose-dark h2, .prose-dark h3, .prose-dark h4 {
  color: #111827;
}
.prose-dark a {
  color: #ca8a04;
}
.prose-dark a:hover {
  color: #a16207;
}
.prose-dark strong {
  color: #1f2937;
}
.prose-dark ul, .prose-dark ol {
  color: #374151;
}
.prose-dark li::marker {
  color: #ca8a04;
}
.prose-dark blockquote {
  border-left-color: #eab308;
  color: #6b7280;
}
.prose-dark table {
  border-color: #e5e7eb;
}
.prose-dark th {
  background: #f9fafb;
  color: #1f2937;
  border-color: #e5e7eb;
}
.prose-dark td {
  border-color: #e5e7eb;
  color: #374151;
}

/* ===== PayTR iframe sizing ===== */
#paytriframe {
  min-height: 400px;
}

/* ===== Sidebar transition for mobile ===== */
.sidebar-transition {
  transition: transform 0.3s ease;
}

/* ===== Select appearance fix ===== */
select.dark-input {
  appearance: auto;
}