/*
 * ============================================================================
 * Copyright (c) 2026 ATH SOLUTIONS (PTY) LTD. All rights reserved.
 * KwaZulu-Natal, Republic of South Africa.
 * ============================================================================
 *
 * @BEGIN Developer Log Header Block
 * @FILENAME: templates.css
 * @TITLE: PATHWRITE
 * @DESCRIPTION: Template browsing view - template/format selection cards and preview flip container and book cover thumbnail.
 * @AUTHOR: Ary van der Pijl
 * @COMPANY: ATH SOLUTIONS (PTY) LTD
 * @WEBSITE: https://www.ath.solutions/
 * @EMAIL: info@ath.solutions
 * @COPYRIGHT: All Rights Reserved
 * @LICENSE: ATH SOLUTIONS - PROPRIETARY SOFTWARE LICENCE AGREEMENT (https://www.ath.solutions/documents/ath_solutions_software_licence_agreement.pdf)
 *
 * BEGIN CHANGELOG
 * @IMPORTANT NOTICE: Developers working on these files MUST update and maintain the Developers Change Log, failure to do is not an option:
 * !==================================================================================================================================================================
 * VERSION 1.0.2
 * - File Modified | Ary van der Pijl | 2026-09-03 | Gap Analysis v4.0 §4.0: added .sf-book-thumb--md (160x200, step3-names.php), --xs (60x80, step6-checkout.php's order-summary thumbnail), and --draft-card (height:200px, subscriber/dashboard.php's draft-card template) - same class of fix as VERSION 1.0.1's --sm variant. .sf-icon-book-thumb/.sf-icon-book-thumb--sm (already existed) exactly matched the inline icon styles found on all 3 pages - reused as-is. |
 * VERSION 1.0.1
 * - File Modified | Ary van der Pijl | 2026-08-15 | Added .sf-book-thumb--sm/.sf-icon-book-thumb--sm - small-thumbnail variants for order-detail.php's book summary card, replacing an inline style="width:120px;height:160px;..." block (hard-constraint violation) found while retrofitting that page for multi-language support. |
 * VERSION 1.0.0
 * + File Created | Ary van der Pijl | 2026-08-06 | Extracted from main.css as part of the Phase 17 CSS architecture split (9-file hierarchy per STD-E). |
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */

/* ─── Template Card Grid ─────────────────────────────────────────────────── */

.sf-template-card {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  cursor: pointer;
}

.sf-template-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
}

.sf-template-card.border-primary {
  box-shadow: 0 0 0 3px var(--color-primary), 0 8px 24px rgba(0, 0, 0, .08);
}

/* ─── Format Selection Cards ─────────────────────────────────────────────── */

.sf-format-card {
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  cursor: pointer;
}

.sf-format-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
}

.sf-format-card.border-primary {
  box-shadow: 0 0 0 3px var(--color-primary);
}

/* ─── Preview Page Flip Container ────────────────────────────────────────── */

.sf-preview-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 400px;
  padding: var(--space-4);
}

.sf-preview-page {
  display: none;
  animation: sf-fadein .3s ease;
}

.sf-preview-page.active,
.sf-preview-page[style*="display: block"] {
  display: block;
}

@keyframes sf-fadein {
  from {
    opacity: 0;
    transform: scale(.97);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.sf-preview-page img {
  max-height: 560px;
  width: auto;
  display: block;
  margin: 0 auto;
}

/* ─── Book Cover Thumbnail ───────────────────────────────────────────────── */

.sf-book-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-primary-bg);
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-book-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-icon-empty {
  font-size: 56px;
  opacity: .3;
}

.sf-book-thumb--sm {
  width: 120px;
  height: 160px;
  border-radius: 8px;
}

.sf-book-thumb--md {
  width: 160px;
  height: 200px;
  border-radius: 8px;
}

.sf-book-thumb--xs {
  width: 60px;
  height: 80px;
  border-radius: 4px;
}

.sf-book-thumb--draft-card {
  height: 200px;
}

.sf-icon-book-thumb--sm {
  font-size: 56px;
  color: var(--color-primary);
  opacity: .4;
}

.sf-icon-book-thumb {
  font-size: 72px;
  color: var(--color-primary);
  opacity: .3;
}

.sf-icon-pagination {
  font-size: 16px;
  vertical-align: text-bottom;
}

/* Draft card status shimmer on hover */
.sf-draft-card {
  transition: box-shadow .15s;
}

.sf-draft-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
}