/*
 * core/base.css — پایه‌ی مشترک همه‌ی layoutهای فرانت (app و auth)
 * ترتیب بخش‌ها مهم است؛ جابه‌جا نکنید.
 */

/* توکن‌ها (رنگ، radius، سایه و ...) در core/tokens.css تعریف شده‌اند. */

/* ==========================================================================
   Bootstrap overrides (قبلاً custom-bootstrap.css)
   ========================================================================== */


/* استایل دکمه‌ها (.btn و همه‌ی variantها) در core/buttons.css است. */

/* =========================================================
 * 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(--color-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(--color-primary);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-primary) 15%, transparent);
}

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

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

.form-check-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-primary) 15%, transparent);
}

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

.card-header {
  border-bottom: 1px solid var(--color-border);
  padding: 15px;
  font-weight: 700;
  font-size: 18px;
  color: var(--color-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(--radius-pill) !important;
  min-width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-subtle);
  font-weight: var(--btn-font-weight);
  font-size: 13px;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

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

/* was a teal-to-red diagonal gradient (--color-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(--color-primary), var(--color-primary-dark)) !important;
  color: var(--color-white) !important;
  border-color: transparent;
  box-shadow: var(--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(--radius-md);
  font-size: 14px;
  line-height: 1.9;
  box-shadow: var(--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(--color-primary-dark);
  background-color: var(--color-primary-soft);
  border-color: var(--color-secondary);
}

.alert-secondary {
  color: var(--color-text-subtle);
  background-color: var(--color-secondary-soft);
  border-color: var(--color-secondary);
}

.alert-success {
  color: var(--color-success);
  background-color: var(--color-success-soft);
  border-color: var(--color-success-border);
}

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

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

.alert-danger {
  color: var(--color-sale);
  background-color: var(--color-danger-soft);
  border-color: var(--color-danger-border);
}

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

.alert-dark {
  color: var(--color-white);
  background-color: var(--color-dark);
  border-color: var(--color-text-subtle);
}

.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(--color-primary-soft) !important;
  color: var(--color-primary-dark) !important;
}

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

.badge.bg-success {
  background: var(--color-success-soft) !important;
  color: var(--color-success-text) !important;
}

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

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

.badge.bg-info {
  background: var(--color-info-soft) !important;
  color: var(--color-info-text) !important;
}

.badge.bg-dark {
  background: color-mix(in srgb, var(--color-dark) 8%, transparent) !important;
  color: var(--color-dark) !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(--color-text-subtle);
  transition: color .2s ease;
}

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

.breadcrumb-item.active {
  color: var(--color-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(--color-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(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

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

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
}
/* ==========================================================================
   Form validation tooltips (قبلاً form-validation.css)
   ========================================================================== */

/* Styled replacement for the browser's native constraint-validation bubble.
   Paired with public/js/form-validation.js (frontend layouts only). */

.fv-tip {
  position: fixed;
  top: 0;
  right: auto;
  left: 0;
  z-index: 20000;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 340px;
  padding: 10px 12px;
  border: 1px solid var(--color-sale);
  border-radius: var(--radius-sm);
  background: var(--color-danger-subtle);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--color-danger) 22%, transparent);
  color: var(--color-sale-dark);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  text-align: right;
  direction: rtl;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  pointer-events: none;
}

.fv-tip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fv-tip__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--color-sale);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.fv-tip__icon::before {
  content: "!";
}

.fv-tip__text {
  flex: 1 1 auto;
}

/* Arrow — --fv-arrow-x is set by the script so it points at the field's center. */
.fv-tip::before,
.fv-tip::after {
  content: "";
  position: absolute;
  left: var(--fv-arrow-x, 20px);
  width: 0;
  height: 0;
  margin-left: -7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}

.fv-tip[data-placement="bottom"]::before {
  bottom: 100%;
  border-bottom: 7px solid var(--color-sale);
}

.fv-tip[data-placement="bottom"]::after {
  bottom: calc(100% - 1px);
  border-bottom: 7px solid var(--color-danger-subtle);
}

.fv-tip[data-placement="top"]::before {
  top: 100%;
  border-top: 7px solid var(--color-sale);
}

.fv-tip[data-placement="top"]::after {
  top: calc(100% - 1px);
  border-top: 7px solid var(--color-danger-subtle);
}

/* The offending control, while it stays invalid. */
.fv-invalid,
.fv-invalid.form-control,
.fv-invalid.form-select {
  border-color: var(--color-sale) !important;
  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--color-danger) 16%, transparent) !important;
}

.fv-invalid.btn-check + .btn {
  border-color: var(--color-sale);
  color: var(--color-sale-dark);
}