/* This file's own variable names (--primary, --dark, --p-accent, ...) are
   kept for backward compatibility with the rest of the codebase, but they
   now only alias the canonical tokens defined in variables.css - edit
   values there, not here. */
:root {
  --primary: var(--tb-primary);
  --primary-rgb: var(--tb-primary-rgb);
  --dark: var(--tb-dark);
  --p-deep-light: var(--tb-deep-light);
  --p-sale: var(--tb-sale);
  --p-accent: var(--tb-accent);
  --p-accent-dark: var(--tb-accent-dark);
  --border: var(--tb-border);
  --p-bg: var(--tb-page-bg);
  /* --p-ink / --p-deep used to be undefined everywhere they're referenced
     (article.css, components.css, editor-content.css, account.css,
     login-register.css, product.css, this file) - each spot only "worked"
     via its own copy-pasted fallback literal (mostly leftover browns from
     an older theme, e.g. #2b1d14 / #3e2723), so the same nominal color
     rendered inconsistently from file to file. Defining them for real
     here, aliased to the site's actual ink tokens, makes every one of
     those spots resolve to the same color. */
  --p-ink: var(--tb-ink);
  --p-deep: var(--tb-dark);
}

.btn {
  --bs-btn-border-radius: var(--tb-btn-radius);
  --bs-btn-font-weight: var(--tb-btn-font-weight);
  --bs-btn-padding-x: var(--tb-btn-padding-x);
  --bs-btn-padding-y: var(--tb-btn-padding-y);
  --bs-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
  font-family: inherit;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-lg {
  --bs-btn-border-radius: var(--tb-btn-radius-lg);
}

.btn-sm {
  --bs-btn-border-radius: var(--tb-btn-radius-sm);
}

.btn-primary {
  --bs-btn-color: var(--tb-white);
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--tb-white);
  --bs-btn-hover-bg: var(--tb-secondary);
  --bs-btn-hover-border-color: var(--tb-secondary);
  --bs-btn-active-color: var(--tb-white);
  --bs-btn-active-bg: var(--tb-secondary-dark);
  --bs-btn-active-border-color: var(--tb-secondary-dark);
  --bs-btn-disabled-color: var(--tb-white);
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
  --bs-btn-disabled-opacity: 0.55;
}

.btn-outline-primary {
  --bs-btn-color: var(--dark);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--dark);
  --bs-btn-hover-bg: var(--tb-deep-light);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-active-color: var(--dark);
  --bs-btn-active-bg: var(--tb-deep-light);
  --bs-btn-active-border-color: var(--primary);
  --bs-btn-disabled-color: var(--dark);
  --bs-btn-disabled-border-color: var(--primary);
}

.btn-secondary {
  --bs-btn-color: var(--tb-white);
  --bs-btn-bg: var(--p-deep-light);
  --bs-btn-border-color: var(--p-deep-light);
  --bs-btn-hover-color: var(--tb-white);
  --bs-btn-hover-bg: var(--dark);
  --bs-btn-hover-border-color: var(--dark);
  --bs-btn-active-color: var(--tb-white);
  --bs-btn-active-bg: var(--dark);
  --bs-btn-active-border-color: var(--dark);
  --bs-btn-disabled-color: var(--tb-white);
  --bs-btn-disabled-bg: var(--p-deep-light);
  --bs-btn-disabled-border-color: var(--p-deep-light);
  --bs-btn-disabled-opacity: 0.55;
}

.btn-outline-secondary {
  --bs-btn-color: var(--p-deep-light);
  --bs-btn-border-color: var(--p-deep-light);
  --bs-btn-hover-color: var(--p-deep-light);
  --bs-btn-hover-bg: var(--tb-secondary-soft);
  --bs-btn-hover-border-color: var(--p-deep-light);
  --bs-btn-active-color: var(--p-deep-light);
  --bs-btn-active-bg: var(--tb-secondary-soft);
  --bs-btn-active-border-color: var(--p-deep-light);
  --bs-btn-disabled-color: var(--p-deep-light);
  --bs-btn-disabled-border-color: var(--p-deep-light);
}

/* .btn-success stays green (success = green is worth keeping), but uses
 * the same green already established site-wide in .alert-success below
 * (#1e5c3a) instead of Bootstrap's stock green, so it reads as part of
 * the same theme rather than a foreign color dropped on top of it. */
.btn-success {
  --bs-btn-color: var(--tb-white);
  --bs-btn-bg: #1e5c3a;
  --bs-btn-border-color: #1e5c3a;
  --bs-btn-hover-color: var(--tb-white);
  --bs-btn-hover-bg: #164529;
  --bs-btn-hover-border-color: #164529;
  --bs-btn-active-color: var(--tb-white);
  --bs-btn-active-bg: #123a22;
  --bs-btn-active-border-color: #123a22;
  --bs-btn-disabled-color: var(--tb-white);
  --bs-btn-disabled-bg: #1e5c3a;
  --bs-btn-disabled-border-color: #1e5c3a;
  --bs-btn-disabled-opacity: 0.55;
}

.btn-outline-success {
  --bs-btn-color: #1e5c3a;
  --bs-btn-border-color: #1e5c3a;
  --bs-btn-hover-color: var(--tb-white);
  --bs-btn-hover-bg: #1e5c3a;
  --bs-btn-hover-border-color: #1e5c3a;
  --bs-btn-active-color: var(--tb-white);
  --bs-btn-active-bg: #1e5c3a;
  --bs-btn-active-border-color: #1e5c3a;
  --bs-btn-disabled-color: #1e5c3a;
  --bs-btn-disabled-border-color: #1e5c3a;
}

.btn-danger {
  --bs-btn-color: var(--tb-white);
  --bs-btn-bg: var(--p-sale);
  --bs-btn-border-color: var(--p-sale);
  --bs-btn-hover-color: var(--tb-white);
  --bs-btn-hover-bg: var(--tb-sale-dark);
  --bs-btn-hover-border-color: var(--tb-sale-dark);
  --bs-btn-active-color: var(--tb-white);
  --bs-btn-active-bg: var(--tb-accent-dark);
  --bs-btn-active-border-color: var(--tb-accent-dark);
  --bs-btn-disabled-color: var(--tb-white);
  --bs-btn-disabled-bg: var(--p-sale);
  --bs-btn-disabled-border-color: var(--p-sale);
  --bs-btn-disabled-opacity: 0.55;
}

.btn-outline-danger {
  --bs-btn-color: var(--p-sale);
  --bs-btn-border-color: var(--p-sale);
  --bs-btn-hover-color: var(--p-sale);
  --bs-btn-hover-bg: #fbe8e2;
  --bs-btn-hover-border-color: var(--p-sale);
  --bs-btn-active-color: var(--p-sale);
  --bs-btn-active-bg: #fbe8e2;
  --bs-btn-active-border-color: var(--p-sale);
  --bs-btn-disabled-color: var(--p-sale);
  --bs-btn-disabled-border-color: var(--p-sale);
}

/* .btn-warning used to mix an unrelated red family (var(--p-accent), the
 * site's danger/accent red) as its base color with a completely different
 * gold on hover/active - a jarring hue jump, and dark-red text on a red
 * background was barely readable. Standardized on the site's one amber
 * "warning" hue (--tb-warning, already used for hover accents in
 * category.css/checkout.css) end to end instead. */
.btn-warning {
  --bs-btn-color: var(--tb-dark);
  --bs-btn-bg: var(--tb-warning);
  --bs-btn-border-color: var(--tb-warning);
  --bs-btn-hover-color: var(--tb-dark);
  --bs-btn-hover-bg: var(--tb-warning-dark);
  --bs-btn-hover-border-color: var(--tb-warning-dark);
  --bs-btn-active-color: var(--tb-dark);
  --bs-btn-active-bg: var(--tb-warning-dark);
  --bs-btn-active-border-color: var(--tb-warning-dark);
  --bs-btn-disabled-color: var(--tb-dark);
  --bs-btn-disabled-bg: var(--tb-warning);
  --bs-btn-disabled-border-color: var(--tb-warning);
  --bs-btn-disabled-opacity: 0.55;
}

.btn-outline-warning {
  --bs-btn-color: var(--tb-warning-dark);
  --bs-btn-border-color: var(--tb-warning);
  --bs-btn-hover-color: var(--tb-dark);
  --bs-btn-hover-bg: var(--tb-warning-light);
  --bs-btn-hover-border-color: var(--tb-warning);
  --bs-btn-active-color: var(--tb-dark);
  --bs-btn-active-bg: var(--tb-warning-light);
  --bs-btn-active-border-color: var(--tb-warning);
  --bs-btn-disabled-color: var(--tb-warning-dark);
  --bs-btn-disabled-border-color: var(--tb-warning);
}

.btn-dark {
  --bs-btn-color: var(--tb-white);
  --bs-btn-bg: var(--dark);
  --bs-btn-border-color: var(--dark);
  --bs-btn-hover-color: var(--tb-white);
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
  --bs-btn-active-color: var(--tb-white);
  --bs-btn-active-bg: #000;
  --bs-btn-active-border-color: #000;
  --bs-btn-disabled-color: var(--tb-white);
  --bs-btn-disabled-bg: var(--dark);
  --bs-btn-disabled-border-color: var(--dark);
  --bs-btn-disabled-opacity: 0.55;
}

.btn-outline-dark {
  --bs-btn-color: var(--dark);
  --bs-btn-border-color: var(--dark);
  --bs-btn-hover-color: var(--dark);
  --bs-btn-hover-bg: #f5f5f5;
  --bs-btn-hover-border-color: var(--dark);
  --bs-btn-active-color: var(--dark);
  --bs-btn-active-bg: #f5f5f5;
  --bs-btn-active-border-color: var(--dark);
  --bs-btn-disabled-color: var(--dark);
  --bs-btn-disabled-border-color: var(--dark);
}

.btn-info {
  --bs-btn-color: var(--tb-white);
  --bs-btn-bg: var(--tb-secondary);
  --bs-btn-border-color: var(--tb-secondary);
  --bs-btn-hover-color: var(--tb-white);
  --bs-btn-hover-bg: var(--tb-secondary-dark);
  --bs-btn-hover-border-color: var(--tb-secondary-dark);
  --bs-btn-active-color: var(--tb-white);
  --bs-btn-active-bg: var(--tb-secondary-dark);
  --bs-btn-active-border-color: var(--tb-secondary-dark);
  --bs-btn-disabled-color: var(--tb-white);
  --bs-btn-disabled-bg: var(--tb-secondary);
  --bs-btn-disabled-border-color: var(--tb-secondary);
  --bs-btn-disabled-opacity: 0.55;
}

.btn-outline-info {
  --bs-btn-color: var(--tb-secondary-dark);
  --bs-btn-border-color: var(--tb-secondary);
  --bs-btn-hover-color: var(--tb-white);
  --bs-btn-hover-bg: var(--tb-secondary);
  --bs-btn-hover-border-color: var(--tb-secondary);
  --bs-btn-active-color: var(--tb-white);
  --bs-btn-active-bg: var(--tb-secondary);
  --bs-btn-active-border-color: var(--tb-secondary);
  --bs-btn-disabled-color: var(--tb-secondary-dark);
  --bs-btn-disabled-border-color: var(--tb-secondary);
}

.btn-pill {
  --bs-btn-border-radius: 999px;
}

/* =========================================================
 * Form controls
 * Was missing entirely for plain pages (e.g. contact-us), which fell
 * back to raw unbranded Bootstrap inputs (sharp corners, blue focus
 * ring) unlike checkout.css / account.css / article.css, which already
 * theme their own forms the same way this generalizes.
 * ========================================================= */
.form-control,
.form-select {
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 13px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Bootstrap 5 dropped .text-right (replaced by the logical .text-end),
 * but .text-end flips to left-aligned under RTL, which is wrong for this
 * site — this keeps the old BS4 behavior for RTL-safe right alignment. */
.text-right {
  text-align: right !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .15);
}

.form-label {
  font-weight: 600;
  color: var(--dark);
}

.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.form-check-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb), .15);
}

/* =========================================================
 * Cards
 * Moved from custom.css (was unscoped/generic there too).
 * ========================================================= */
.card {
  background: var(--tb-white);
  min-height: 50px;
  box-shadow: var(--shadow-box);
  border-radius: 15px;
  position: relative;
}

.card-header {
  border-bottom: 1px solid var(--border);
  padding: 15px;
  font-weight: 700;
  font-size: 18px;
  color: var(--dark);
}

/* =========================================================
 * Pagination
 * Moved from custom.css. NOTE: category.css still ships a
 * different, more specific pagination look (bordered squares,
 * 10px radius) for the category/listing page — that one wins
 * there via selector specificity, so the two designs currently
 * differ across the site. Left as-is pending a decision on
 * which look should be the single site-wide pagination style.
 * ========================================================= */
.pagination {
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.page-link {
  border: none !important;
  border-radius: var(--tb-radius-pill) !important;
  min-width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--p-deep-light);
  font-weight: var(--tb-btn-font-weight);
  font-size: 13px;
  background: var(--tb-white);
  box-shadow: var(--p-shadow-sm);
}

.page-link:hover {
  color: var(--tb-primary-dark);
}

/* was a teal-to-red diagonal gradient (--p-accent is the site's danger
 * red) - a jarring, near-complementary color clash for something as
 * common as the active page number. A tonal teal gradient reads as one
 * brand color instead of two clashing ones. */
.page-item.active .page-link {
  z-index: 3;
  background: linear-gradient(135deg, var(--tb-primary), var(--tb-primary-dark)) !important;
  color: var(--tb-white) !important;
  border-color: transparent;
  box-shadow: var(--p-shadow-sm);
}

.page-item.disabled .page-link {
  opacity: .4;
  box-shadow: none;
}

/* =========================================================
 * Alerts
 * Moved from custom.css (was unscoped/generic there too).
 * ========================================================= */
.alert {
  position: relative;
  padding: 16px 20px;
  border: 1px solid transparent;
  border-radius: var(--p-radius-md);
  font-size: 14px;
  line-height: 1.9;
  box-shadow: var(--p-shadow-sm);
}

.alert strong {
  font-weight: 700;
}

.alert-dismissible {
  padding-left: 44px;
}

.alert-dismissible .btn-close,
.alert-dismissible .close {
  position: absolute;
  top: 0;
  left: 0;
  padding: 16px 18px;
  color: inherit;
  opacity: 0.6;
}

.alert-dismissible .btn-close:hover,
.alert-dismissible .close:hover {
  opacity: 1;
}

.alert-primary {
  color: var(--tb-primary-dark);
  background-color: var(--account-brand-soft);
  border-color: var(--tb-secondary);
}

.alert-secondary {
  color: var(--p-deep-light);
  background-color: var(--tb-secondary-soft);
  border-color: var(--tb-secondary);
}

.alert-success {
  color: #1e5c3a;
  background-color: #e3f1e6;
  border-color: #8fbf9f;
}

.alert-info {
  color: var(--tb-primary-dark);
  background-color: #eaf3f2;
  border-color: var(--tb-secondary);
}

.alert-warning {
  color: var(--tb-warning-dark);
  background-color: var(--tb-warning-light);
  border-color: var(--tb-warning);
}

.alert-danger {
  color: var(--p-sale);
  background-color: #fbe8e2;
  border-color: #e3a692;
}

.alert-light {
  color: var(--p-ink);
  background-color: var(--tb-gray-100);
  border-color: var(--border);
}

.alert-dark {
  color: var(--tb-white);
  background-color: var(--p-deep);
  border-color: var(--p-deep-light);
}

.alert a,
.alert .alert-link {
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
}

/* =========================================================
 * Badges
 * Generalized from account.css's .main-table .badge.bg-*
 * (soft pill style instead of Bootstrap's raw solid colors).
 * ========================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  line-height: 1.6;
}

.badge.bg-primary {
  background: var(--account-brand-soft) !important;
  color: var(--tb-primary-dark) !important;
}

.badge.bg-secondary {
  background: var(--tb-secondary-soft) !important;
  color: var(--tb-secondary-dark) !important;
}

.badge.bg-success {
  background: #e3f3ea !important;
  color: #1f7a4d !important;
}

.badge.bg-danger {
  background: #fbe6e1 !important;
  color: var(--p-sale) !important;
}

.badge.bg-warning {
  background: #fbf0dc !important;
  color: var(--tb-warning-dark) !important;
}

.badge.bg-info {
  background: #e4f1f3 !important;
  color: #217084 !important;
}

.badge.bg-dark {
  background: rgba(23, 23, 23, .08) !important;
  color: var(--p-deep) !important;
}

/* =========================================================
 * Breadcrumbs
 * Unified from two page-scoped, mutually inconsistent versions
 * (product.css used plain gray text + manual "/" separator spans;
 * article.css used branded colors + a Font Awesome chevron divider).
 * Standardized on the article.css look; products/show.blade.php had
 * its manual separator spans removed to match.
 * ========================================================= */
.breadcrumb {
  flex-wrap: wrap;
  gap: 4px 0;
}

.breadcrumb-item,
.breadcrumb-item a {
  font-size: 13px;
  color: var(--p-deep-light);
  transition: color .2s ease;
}

.breadcrumb-item a:hover {
  color: var(--tb-primary-dark);
}

.breadcrumb-item.active {
  color: var(--tb-primary-dark);
  font-weight: 700;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "\f104";
  font-family: var(--fa-family-active-light);
  font-weight: var(--fa-weight-active-light);
  color: var(--tb-primary);
}

/* =========================================================
 * Modals
 * Generalized from category.css (#sortModal) and product.css
 * (.added-to-cart-modal / .share-modal), which both already used
 * this exact radius/shadow — previously unstyled modals elsewhere
 * (e.g. account/comments) rendered as plain sharp-cornered Bootstrap
 * modals instead of matching the site's rounded, soft-shadow look.
 * ========================================================= */
.modal-content {
  border: 0;
  border-radius: var(--p-radius-md, 18px);
  overflow: hidden;
  box-shadow: var(--p-shadow, 0 14px 32px rgba(23, 23, 23, .14));
}

.modal-header,
.modal-footer {
  border-color: var(--border);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
}