/* Shopee Fee Calculator Philippines - Custom Theme for Bootstrap 5 */

:root {
  --shopee: #ee4d2d;        /* vivid brand orange - header gradient, buttons, CTA banners (white text), borders, accents */
  --shopee-text: #b3341a;   /* dark brand shade ONLY for small text/inline links/labels on white
                               (6.1:1 on white, >=4.6:1 even on tinted cells - passes WCAG AA) */
  --shopee-hover: #992d16;  /* darker hover (passes on white) */
  --mall: #c0392b;          /* 5.4:1 on white; white-on-it 5.4:1 */
  --marketplace: #a85200;   /* darkened amber: 5.5:1 on white; white-on-it 5.5:1 (was #e67e22 = 2.85, failed) */
  --success: #157347;       /* darkened green: 5.9:1 on white; white-on-it 5.9:1 (was #27ae60 = 2.87, failed) */
  --success-hover: #2ecc71;
  --sale: #006d7a;          /* darkened teal for AA on white */
  --sale-hover: #00acc1;
  --info-custom: #2c3e50;
  --info-light: #34495e;
  --info-hover: #3d566e;
}

body {
  font-size: 13px;
  background-color: #f3f4f6;
  color: #111827;
}

/* ========== HEADER ========== */
.site-header {
  background: linear-gradient(to right, var(--shopee), #f97316);
  color: #fff;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.site-header .site-title { font-size: 1.25rem; font-weight: 600; margin: 0; }
.site-header .site-subtitle { font-size: .75rem; opacity: 1; margin: 0; }
.site-header .site-disclaimer { font-size: 10px; opacity: .92; font-style: italic; margin-top: 2px; }

@media (max-width: 767.98px) {
  .site-header { flex-direction: column; text-align: center; padding: 0.75rem 1rem; }
  .site-header .site-title { font-size: 17px; }
}

/* ========== NAVIGATION ========== */
.site-nav {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.site-nav .nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  overflow-x: auto;
}
.site-nav a {
  display: inline-block;
  padding: 0.625rem 1rem;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color .2s, border-color .2s;
}
.site-nav a:hover, .site-nav a.active {
  color: var(--shopee-text);
  border-bottom-color: var(--shopee);
}
.site-nav a.active { font-weight: 600; }

@media (max-width: 767.98px) {
  .site-nav .nav-inner { padding: 0 0.75rem; }
  .site-nav a { padding: 0.5rem 0.625rem; font-size: 12px; }
}

/* ========== COLORS ========== */
.text-shopee { color: var(--shopee-text) !important; }
.text-shopee-hover:hover { color: var(--shopee-hover) !important; }
.text-mall { color: var(--mall) !important; }
.text-marketplace { color: var(--marketplace) !important; }
.text-success-custom { color: var(--success) !important; }
.text-sale { color: var(--sale) !important; }
.text-info-custom { color: var(--info-custom) !important; }

/* WCAG AA fixes for Bootstrap semantic text colors on light backgrounds
   (Bootstrap defaults #198754 / #dc3545 were ~4.3:1, just under 4.5). */
.text-success { color: #157347 !important; }
.text-danger  { color: #b02a37 !important; }
/* Force a dark table header with white text everywhere (Bootstrap .table otherwise
   paints thead cells white, which made red/amber header text unreadable). */
.comparison-table thead th, .rates-table thead th {
  background: #1f2937 !important;
  color: #fff !important;
  box-shadow: none !important;
}
.comparison-table thead .th-mall, .rates-table thead .th-mall { background: var(--mall) !important; }
.comparison-table thead .th-mp,   .rates-table thead .th-mp   { background: var(--marketplace) !important; }

.bg-shopee { background-color: var(--shopee) !important; }
/* CTA banners use .bg-shopee + .text-white, but .content-page p sets a dark color
   that overrides the inherited white. Force white on text elements inside the banner
   (not on .btn-light buttons, which keep their dark-on-light styling). */
.bg-shopee p, .bg-shopee h1, .bg-shopee h2, .bg-shopee h3, .bg-shopee h4, .bg-shopee h5,
.bg-shopee strong, .bg-shopee li, .bg-shopee span:not(.btn) { color: #fff !important; }
.bg-shopee-hover:hover { background-color: var(--shopee-hover) !important; }
.bg-mall { background-color: var(--mall) !important; }
.bg-marketplace { background-color: var(--marketplace) !important; }
.bg-success-custom { background-color: var(--success) !important; }
.bg-success-hover:hover { background-color: var(--success-hover) !important; }
.bg-sale { background-color: var(--sale) !important; }
.bg-info-custom { background-color: var(--info-custom) !important; }
.bg-info-light { background-color: var(--info-light) !important; }

.border-shopee { border-color: var(--shopee) !important; }
.border-mall { border-color: var(--mall) !important; }
.border-marketplace { border-color: var(--marketplace) !important; }
.border-success-custom { border-color: var(--success) !important; }

/* ========== BUTTONS ========== */
.btn-shopee {
  background-color: var(--shopee);
  color: #fff;
  border: none;
  font-weight: 700;
}
.btn-shopee:hover { background-color: var(--shopee-hover); color: #fff; }

/* ========== HERO CALCULATOR ========== */
#hero-calc {
  background: #fff;
  border-radius: 0.75rem;
  border-top: 4px solid var(--shopee);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1);
  overflow: hidden;
  padding: 1.25rem 1rem 1rem;
  margin: 0 1.5rem 1.25rem;
}
#hero-calc h2 { font-size: 1rem; font-weight: 700; color: var(--shopee-text); margin-bottom: 0.875rem; }

@media (max-width: 767.98px) {
  #hero-calc { margin: 0 1rem 1.25rem; }
}

/* ========== FORM INPUTS ========== */
.form-control:focus, .form-select:focus {
  border-color: var(--shopee);
  box-shadow: 0 0 0 .2rem rgba(238,77,45,.15);
}
.accent-shopee { accent-color: var(--shopee); }

/* ========== RESULTS CARDS ========== */
.result-card {
  background: #f9fafb;
  border-radius: 0.5rem;
  padding: 0.875rem;
  border: 1px solid #e5e7eb;
}
.result-card h3 {
  font-size: 0.875rem;
  margin-bottom: 0.625rem;
  padding-bottom: 0.375rem;
  font-weight: 600;
}
.result-card .border-mall { border-bottom: 2px solid var(--mall); }
.result-card .border-marketplace { border-bottom: 2px solid var(--marketplace); }

.result-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 0.75rem;
  font-size: 12px;
}
.result-grid .fee-total {
  font-weight: 700;
  padding-top: 0.25rem;
  border-top: 1px solid #d1d5db;
  margin-top: 0.125rem;
}

/* ========== BULK UPLOAD ========== */
.upload-accordion {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  overflow: hidden;
  margin: 0 1.5rem 1.25rem;
}
.upload-accordion summary {
  padding: 0.875rem 1rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.upload-accordion summary::-webkit-details-marker { display: none; }
.upload-accordion summary::before {
  content: '\25B6';
  font-size: 10px;
  color: var(--shopee);
  transition: transform .2s;
}
.upload-accordion[open] summary::before { transform: rotate(90deg); }
.upload-accordion summary:hover { background: #fff7ed; }
.upload-accordion summary h2 { display: inline; font-size: 15px; font-weight: 600; color: var(--shopee-text); margin: 0; }

@media (max-width: 767.98px) {
  .upload-accordion { margin: 0 1rem 1.25rem; }
}

/* Upload zone */
.upload-zone {
  border: 2px dashed #d1d5db;
  border-radius: 0.75rem;
  padding: 1.25rem;
  text-align: center;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s;
}
.upload-zone:hover { border-color: #9ca3af; }

/* ========== DATA TABLE ========== */
#data-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  font-size: 12px;
}
#data-table thead {
  background: #1f2937;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}
#data-table thead th {
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
#data-table thead th:hover { background: #374151; }
#table-body td {
  padding: 5px 10px;
  font-size: 11px;
  white-space: nowrap;
  border-bottom: 1px solid #f3f4f6;
}

/* ========== STATS CARDS ========== */
.stat-card {
  background: #fff;
  border-radius: 0.75rem;
  padding: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.stat-card .stat-label {
  font-size: 11px;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.stat-card .stat-value { font-size: 22px; font-weight: 700; }

/* ========== MARGIN CLASSES ========== */
.margin-negative { background: #7f1d1d; color: #fff; }
.margin-low { background: #fef2f2; color: #991b1b; }
.margin-medium { background: #fffbeb; color: #92400e; }
.margin-good { background: #f0fdf4; color: #166534; }
.margin-none { color: #9ca3af; font-style: italic; }

.fee-high { background: #fef2f2; color: #991b1b; }
.fee-medium { background: #fffbeb; color: #92400e; }
.fee-low { background: #f0fdf4; color: #166534; }

/* ========== COLUMN TOGGLE ========== */
.col-toggle-wrapper { position: relative; }
.col-toggle-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1);
  padding: 0.5rem 0;
  min-width: 200px;
  margin-top: 0.25rem;
}
.col-toggle-dropdown label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.col-toggle-dropdown label:hover { background: #f3f4f6; }
.col-toggle-dropdown input { accent-color: var(--shopee); width: 14px; height: 14px; }
.col-toggle-dropdown hr { border: none; border-top: 1px solid #e5e7eb; margin: 0.25rem 0; }

/* ========== PAGINATION ========== */
#pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
}

/* ========== CONTENT PAGES ========== */
.content-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  line-height: 1.7;
  font-size: 14px;
  color: #374151;
}
.content-page h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; color: #111827; }
.content-page h2 { font-size: 1.125rem; font-weight: 700; margin-top: 1.75rem; margin-bottom: 0.75rem; color: #111827; }
.content-page p { margin-bottom: 0.875rem; color: #4b5563; line-height: 1.7; }
.content-page a:not(.btn) { color: var(--shopee-text); }
.content-page a:not(.btn):hover { color: var(--shopee-hover); }
/* Buttons must keep their own readable text colour regardless of content-page link styling */
.btn-shopee, a.btn-shopee { color: #fff !important; }

@media (max-width: 767.98px) {
  .content-page { padding: 1.5rem 1rem 2rem; }
}

/* ========== COMPARISON TABLE ========== */
.comparison-table { width: 100%; border-collapse: collapse; font-size: 13px; border-radius: 0.5rem; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.comparison-table thead { background: #1f2937; color: #fff; }
.comparison-table thead th { padding: 0.625rem 0.875rem; text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.comparison-table thead .th-mall { background: var(--mall); }
.comparison-table thead .th-mp { background: var(--marketplace); }
.comparison-table tbody td { padding: 0.5rem 0.875rem; border-bottom: 1px solid #f3f4f6; color: #4b5563; }
.comparison-table tbody tr:nth-child(even) { background: #f9fafb; }
.comparison-table tbody tr.total-row { font-weight: 600; background: #fff7ed; }

/* ========== FOOTER ========== */
.site-footer {
  background: #111827;
  color: #9ca3af;
  margin-top: 3rem;
}
.site-footer h2, .site-footer h3 { color: #fff; }
.site-footer h3 { font-size: 14px; font-weight: 600; color: #fb923c; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.625rem; }
.site-footer a { color: #9ca3af; text-decoration: none; }
.site-footer a:hover { color: #fb923c; text-decoration: underline; }
.site-footer .footer-bottom {
  border-top: 1px solid rgba(107,114,128,.3);
  text-align: center;
  padding: 1rem 1.5rem;
  font-size: 12px;
  color: #9ca3af;
}

/* FAQ in footer */
.site-footer details { margin-bottom: 0.5rem; border-bottom: 1px solid rgba(107,114,128,.3); padding-bottom: 0.5rem; }
.site-footer summary { cursor: pointer; color: #d1d5db; font-weight: 500; padding: 0.25rem 0; font-size: 12.5px; }
.site-footer summary:hover { color: #fb923c; }
.site-footer details p { font-size: 12px; color: #9ca3af; margin-top: 0.375rem; padding-left: 0.75rem; border-left: 2px solid #374151; }

/* ========== LOADING SPINNER ========== */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f4f6;
  border-top-color: var(--shopee);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 0.75rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== COMMISSION RATES TABLE ========== */
.rates-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rates-table thead { background: #1f2937; color: #fff; position: sticky; top: 0; }
.rates-table thead th { padding: 8px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.rates-table tbody td { padding: 6px 12px; border-bottom: 1px solid #f3f4f6; }
.rates-table tbody tr:hover { background: #fff7ed; }
.rates-table .category-header { background: #f3f4f6; font-weight: 600; }
.rates-table .rate-low { background: #dcfce7; }
.rates-table .rate-high { background: #fee2e2; }

/* ========== FORMULA BLOCKS (fee-guide page) ========== */
.formula-block {
  background: #f3f4f6;
  border-left: 4px solid var(--shopee);
  padding: 0.75rem 1rem;
  margin: 0.875rem 0;
  border-radius: 0 0.375rem 0.375rem 0;
  font-family: monospace;
  font-size: 13px;
  color: #374151;
  overflow-x: auto;
}

/* ========== TWO-COLUMN LIST ========== */
.two-col-list {
  columns: 2;
  column-gap: 1.5rem;
  margin: 0.75rem 0 1.25rem;
}
.two-col-list li { margin-bottom: 0.375rem; break-inside: avoid; }
@media (max-width: 480px) {
  .two-col-list { columns: 1; }
}

/* ========== MISC UTILITIES ========== */
.text-xs { font-size: 12px; }
.text-xxs { font-size: 11px; }
.text-10 { font-size: 10px; }
.opacity-85 { opacity: .85; }
.opacity-65 { opacity: .65; }
.border-top-shopee { border-top: 3px solid var(--shopee); }
.min-w-150 { min-width: 150px; }

/* Editable cell styling */
.editable-cell { cursor: pointer; }
.editable-cell:hover { background: #fff7ed; }
.editable-cell input {
  width: 80px;
  padding: 2px 4px;
  font-size: 11px;
  border: 1px solid var(--shopee);
  border-radius: 3px;
}

/* ========== TAILWIND UTILITY COMPAT (for dynamically generated HTML in app.js) ========== */
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.italic { font-style: italic; }
.inline-block { display: inline-block; }
.rounded { border-radius: 0.25rem; }
.whitespace-nowrap { white-space: nowrap; }
.cursor-pointer { cursor: pointer; }
.min-w-\[55px\] { min-width: 55px; }

/* Tailwind padding/margin used in dynamic table cells */
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.pt-1 { padding-top: 0.25rem; }
.mt-0\.5 { margin-top: 0.125rem; }

/* Tailwind color utilities used in dynamic JS */
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-green-600 { color: #16a34a; }
.text-green-800 { color: #166534; }
.text-red-500 { color: #ef4444; }
.text-red-800 { color: #991b1b; }
.text-amber-500 { color: #f59e0b; }
.text-amber-800 { color: #92400e; }
.text-blue-600 { color: #2563eb; }
.text-white { color: #fff; }

.bg-red-100 { background-color: #fee2e2; }
.bg-red-900 { background-color: #7f1d1d; }
.bg-green-100 { background-color: #dcfce7; }
.bg-amber-100 { background-color: #fef3c7; }
.bg-orange-50 { background-color: #fff7ed; }

.border-t { border-top: 1px solid; }
.border-gray-100 { border-color: #f3f4f6; }
.border-gray-300 { border-color: #d1d5db; }

/* Text size utilities used in JS-generated HTML */
.text-\[22px\] { font-size: 22px; }
.text-\[13px\] { font-size: 13px; }
.text-\[11px\] { font-size: 11px; }
.text-\[10px\] { font-size: 10px; }
.text-base { font-size: 1rem; }
.text-sm { font-size: 0.875rem; }

/* Sortable table headers */
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { background: #374151; }

/* ===== AdSense ad slots — reserved heights to prevent layout shift (CLS) ===== */
.ad-slot { display: block; margin: 1.5rem auto; max-width: 728px; text-align: center; overflow: hidden; clear: both; }
.ad-slot .ad-label { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #9ca3af; margin-bottom: 2px; }
.ad-slot ins { display: block; }
.ad-slot--inarticle { min-height: 280px; }
.ad-slot--leaderboard { min-height: 100px; }
.ad-slot--multiplex { min-height: 300px; }
/* Collapse unfilled AdSense units so they never leave a blank gap */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }