/* Trezzon Store — assets/css/main.css */
/* All design tokens and component styles are in style.css (theme root) */
/* This file contains page-specific and utility overrides */

/* ============================================================
   SINGLE APP PAGE
   ============================================================ */

/* Swiper overrides for screenshots */
.swiper-button-next,
.swiper-button-prev {
  color: var(--clr-primary) !important;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 40px !important;
  height: 40px !important;
  box-shadow: var(--shadow-md);
}
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 14px !important;
  font-weight: 700;
}
.swiper-pagination-bullet-active {
  background: var(--clr-primary) !important;
}

/* App description content */
.app-description h1,.app-description h2,.app-description h3,
.app-description h4,.app-description h5 {
  color: var(--txt-primary);
  margin: 1.2em 0 0.6em;
}
.app-description p { margin-bottom: 1em; }
.app-description ul,.app-description ol { padding-inline-start: 1.5em; margin-bottom: 1em; list-style: revert; }
.app-description a { color: var(--clr-primary); text-decoration: underline; }
.app-description code {
  background: var(--bg-surface-2);
  padding: 2px 6px; border-radius: 4px;
  font-size: 0.85em; font-family: monospace;
}
.app-description blockquote {
  border-inline-start: 4px solid var(--clr-primary);
  padding: 8px 16px;
  background: var(--clr-primary-glow);
  /* Round only the trailing-edge corners so the accent stripe stays sharp. */
  border-start-end-radius: var(--radius-sm);
  border-end-end-radius: var(--radius-sm);
  margin: 1em 0;
}

/* ============================================================
   COMMENT FORM (reviews)
   ============================================================ */
.comment-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--txt-secondary);
  margin-bottom: 6px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-surface);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--txt-primary);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s;
  margin-bottom: 0;
}
.comment-form input:focus,
.comment-form textarea:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 4px var(--clr-primary-glow);
}
.comment-form p { margin-bottom: 16px; }
.comment-form .submit { margin-top: 4px; }

/* ============================================================
   ARCHIVE PAGE — Responsive grid adjustments
   ============================================================ */
@media (max-width: 600px) {
  .apps-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .app-card__icon { width: 52px; height: 52px; }
  .app-card__title { font-size: 0.8rem; }
}

/* ============================================================
   DASHBOARD
   ============================================================ */
.data-table .badge { font-size: 11px; }

/* Stat card hover */
.stat-card {
  transition: all 0.2s ease;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Upload zones */
.image-upload-zone {
  user-select: none;
}

/* Panel transitions */
.panel {
  animation: panelFadeIn 0.25s ease forwards;
}
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   LOGIN PAGE CARD HOVER
   ============================================================ */
.login-card {
  transition: box-shadow 0.3s ease;
}

/* ============================================================
   WORDPRESS DEFAULT OVERRIDES
   ============================================================ */
.wp-caption { max-width: 100%; }
.alignleft  { float: left; margin: 0 16px 16px 0; }
.alignright { float: right; margin: 0 0 16px 16px; }
.aligncenter { display: block; margin: 0 auto 16px; }

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .site-header,
  .site-footer,
  .modal-overlay,
  .toast-container { display: none !important; }
  body { background: white; color: black; }
}