/* ==========================================================================
   components.css - Reusable Frontend Components for cloudshop
   Health Supplements & CBD Cosmetics E-Commerce

   Ultima modificare: 2026-09-10 17:10
   Modificari:
     2026-09-10 17:10 — Lista derulanta select2 (localitati, judete, orice select cautabil) primeste
       fundal de SUPRAFATA si culoare de text din tema. Fara asta ramanea albul fix din select2.min.css,
       iar pe temele inchise optiunile erau alb pe alb. Plus optiunea SELECTATA pe tema inchisa si
       bara de derulare a listei.
     2026-07-27 23:05 — Footer zona 6 (--footer-fg derivat din suprafata) + newsletter zona 3 (on-primary) + cookie link mix text
     2026-05-06 09:00 — Back-to-top: coborat la bottom 0.75rem (era 2rem) ca sa
                        nu se ciocneasca cu bula WhatsApp configurata din admin
                        pe pozitii inalte (ex: bottom 80-150px). Aplica la toti clientii.
     2026-05-01 12:00 — Bula WhatsApp: scos pozitia hardcodata (vine inline din layout.php)
                        + reguli pentru orientarea labelului in functie de anchor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Newsletter Section
   -------------------------------------------------------------------------- */
.newsletter-section {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%);
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}

.newsletter-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.newsletter-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.newsletter-section .section-title {
  font-size: var(--font-size-2xl);
  margin-bottom: 0.5rem;
}

.newsletter-section .section-subtitle {
  font-size: var(--font-size-base);
  color: color-mix(in srgb, var(--color-on-primary, #fff) 85%, transparent);
  margin-bottom: 1.5rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 480px;
}

.newsletter-form {
  width: 100%;
}

.newsletter-form .form-control {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid transparent;
  border-radius: var(--border-radius-lg);
  font-size: var(--font-size-sm);
  background: var(--color-white);
}

.newsletter-form .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: none;
}

.newsletter-form .btn {
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius-lg);
  font-weight: 600;
  white-space: nowrap;
}

.newsletter-note {
  font-size: var(--font-size-xs);
  color: color-mix(in srgb, var(--color-on-primary, #fff) 72%, transparent);
  margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   Benefits Bar
   -------------------------------------------------------------------------- */
.benefits-bar {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, var(--color-primary-lightest) 0%, var(--color-white) 100%);
  flex-wrap: wrap;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  transition: all 0.3s ease;
  border-radius: var(--border-radius-lg);
}

.benefit-item:hover {
  background-color: var(--color-primary-lightest);
  transform: translateY(-2px);
}

.benefit-item-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary-lightest);
  color: var(--color-primary);
  border-radius: var(--border-radius-lg);
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
  border: 1px solid var(--color-primary-lightest);
}

.benefit-item:hover .benefit-item-icon {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.benefit-item-text {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.benefit-item-subtext {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   Alert / Flash Messages
   -------------------------------------------------------------------------- */
.alert-custom {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  margin-bottom: 1rem;
  animation: slideDown 0.3s ease;
  border: 1px solid transparent;
}

.alert-custom .alert-icon {
  font-size: 1.125rem;
  flex-shrink: 0;
  margin-top: 0.0625rem;
}

.alert-custom .alert-content {
  flex: 1;
}

.alert-custom .alert-title {
  font-weight: 600;
  margin-bottom: 0.125rem;
}

.alert-custom .alert-close {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.5;
  font-size: 1.125rem;
  padding: 0;
  line-height: 1;
  transition: var(--transition-fast);
}

.alert-custom .alert-close:hover {
  opacity: 1;
}

.alert-success {
  background-color: var(--color-primary-lightest);
  border-color: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.alert-error {
  background-color: color-mix(in srgb, var(--color-danger) 7%, var(--color-white) 93%);
  border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-white) 55%);
  color: color-mix(in srgb, var(--color-danger) 65%, var(--color-text) 35%);
}

.alert-warning {
  background-color: color-mix(in srgb, var(--color-warning) 7%, var(--color-white) 93%);
  border-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-white) 55%);
  color: color-mix(in srgb, var(--color-warning) 55%, var(--color-text) 45%);
}

.alert-info {
  background-color: color-mix(in srgb, var(--color-info) 7%, var(--color-white) 93%);
  border-color: color-mix(in srgb, var(--color-info) 40%, var(--color-white) 60%);
  color: color-mix(in srgb, var(--color-info) 70%, var(--color-text) 30%);
}

/* --------------------------------------------------------------------------
   Loading Spinner
   -------------------------------------------------------------------------- */
.loading-spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.loading-spinner-sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.loading-spinner-lg {
  width: 48px;
  height: 48px;
  border-width: 4px;
}

.loading-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  backdrop-filter: blur(2px);
}

.loading-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}

/* --------------------------------------------------------------------------
   Empty State
   -------------------------------------------------------------------------- */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
}

.empty-state-icon {
  font-size: 3rem;
  color: var(--color-text-light);
  margin-bottom: 1rem;
  opacity: 0.4;
}

.empty-state-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.empty-state-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   Star Rating Display
   -------------------------------------------------------------------------- */
.star-rating {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.star-rating .star {
  color: var(--color-warning);
  font-size: var(--font-size-sm);
}

.star-rating .star-empty {
  color: var(--color-border);
}

.star-rating .star-half {
  color: var(--color-warning);
  position: relative;
}

/* --------------------------------------------------------------------------
   Quantity Selector (Standalone)
   -------------------------------------------------------------------------- */
.qty-selector {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.qty-selector .qty-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: none;
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--color-text);
  transition: var(--transition-fast);
  user-select: none;
}

.qty-selector .qty-btn:hover {
  background-color: var(--color-primary-lightest);
  color: var(--color-primary);
}

.qty-selector .qty-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.qty-selector .qty-input {
  width: 44px;
  height: 36px;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-family: var(--font-family);
  /* Fundalul TREBUIE declarat: fara el, browserul deseneaza input-ul ALB, iar pe
     temele intunecate `--color-text` e tot deschis => cifra cantitatii devenea
     INVIZIBILA (alb pe alb). Acelasi fundal ca butoanele +/- de langa el, ca
     tot controlul sa arate dintr-o bucata. (raportat pe porcusorulpofticios) */
  background: var(--color-bg);
  color: var(--color-text);
  -moz-appearance: textfield;
}

.qty-selector .qty-input::-webkit-inner-spin-button,
.qty-selector .qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Back to Top Button
   -------------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  bottom: 0.75rem;
  right: calc(2rem + 4px);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--border-radius-full);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 30%, transparent);
  cursor: pointer;
  font-size: 1.125rem;
  z-index: var(--z-sticky);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

/* --------------------------------------------------------------------------
   WhatsApp Float Button (Mobile)
   -------------------------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  /* Pozitia (top/bottom + left/right) este injectata inline din layout.php
     pe baza setarilor din admin (Setari > Contact > card "Buton WhatsApp").
     Default: bottom-right, 32px lateral / 96px vertical pe desktop. */
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #25d366;
  color: var(--color-white);
  border: none;
  border-radius: var(--border-radius-full);
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  cursor: pointer;
  font-size: 1.625rem;
  z-index: var(--z-sticky);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: whatsapp-pulse 3s ease-in-out infinite;
}

/* Label tooltip — apare in directia opusa marginii orizontale */
.whatsapp-float--bottom-left .whatsapp-float-label,
.whatsapp-float--top-left    .whatsapp-float-label {
  right: auto;
  left: calc(100% + 0.75rem);
}

@keyframes whatsapp-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); }
  50% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 0 12px rgba(37, 211, 102, 0.1); }
}

.whatsapp-float:hover {
  background-color: #20bd5a;
  color: var(--color-white);
  transform: scale(1.1);
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.5);
  animation: none;
}

.whatsapp-float-label {
  position: absolute;
  right: calc(100% + 0.75rem);
  white-space: nowrap;
  background: var(--color-white);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  opacity: 0;
  transition: var(--transition-fast);
}

.whatsapp-float:hover .whatsapp-float-label {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Toast Notifications
   -------------------------------------------------------------------------- */
.toast-container {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.25rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  min-width: 280px;
  max-width: 400px;
  animation: slideDown 0.3s ease;
}

.toast-success {
  border-left: 3px solid var(--color-primary);
}

.toast-error {
  border-left: 3px solid var(--color-danger);
}

.toast-warning {
  border-left: 3px solid var(--color-warning);
}

.toast-icon {
  font-size: 1.125rem;
  flex-shrink: 0;
}

.toast-success .toast-icon { color: var(--color-primary); }
.toast-error .toast-icon { color: var(--color-danger); }
.toast-warning .toast-icon { color: var(--color-warning); }

.toast-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  padding: 0;
  transition: var(--transition-fast);
}

.toast-close:hover {
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Cookie Banner
   -------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  padding: 1.25rem;
  z-index: var(--z-overlay);
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.cookie-banner.show {
  display: flex;
  animation: slideUp 0.4s ease;
}

.cookie-banner-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 900px;
}

.cookie-banner-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  max-width: 600px;
}

.cookie-banner-text a {
  color: color-mix(in srgb, var(--color-primary) 52%, var(--color-text));
  text-decoration: underline;
}

.cookie-banner-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Push Notification Prompt ────────────────────────────────────────── */
#push-prompt {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1050;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  pointer-events: none;
}

#push-prompt.push-prompt-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.push-prompt-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  max-width: 420px;
}

.push-prompt-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 8px;
  background: var(--color-primary);
  /* on-primary, nu alb: pe un brand deschis (auriu, lime) albul e invizibil.
     Vezi REGULA ZONE — zona 3, banda/buton de brand. */
  color: var(--color-on-primary, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.push-prompt-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.push-prompt-text strong {
  font-size: 0.82rem;
  color: var(--color-text);
}

.push-prompt-text span {
  font-size: 0.72rem;
  color: var(--color-text-secondary);
}

.push-prompt-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.push-prompt-btn {
  border: none;
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.push-prompt-accept {
  background: var(--color-primary);
  /* on-primary, nu alb: pe un brand deschis (auriu, lime) albul e invizibil.
     Vezi REGULA ZONE — zona 3, banda/buton de brand. */
  color: var(--color-on-primary, #fff);
  border-radius: 20px;
}

.push-prompt-accept:hover {
  background: var(--color-primary-dark);
}

.push-prompt-dismiss {
  background: var(--color-bg-alt);
  color: var(--color-text-secondary);
}

.push-prompt-dismiss:hover {
  background: var(--color-border);
}

@media (max-width: 480px) {
  #push-prompt {
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
  }
  .push-prompt-inner {
    max-width: 100%;
  }
}

/* Cookie Settings Panel */
.cookie-settings-panel {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) + 1);
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.cookie-settings-inner {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 480px;
  width: 100%;
}

.cookie-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.cookie-settings-header h6 {
  margin: 0;
  font-weight: 600;
}

.cookie-settings-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
}

.cookie-settings-close:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.cookie-settings-body {
  padding: 1.25rem;
}

.cookie-option {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
}

.cookie-option + .cookie-option {
  border-top: 1px solid var(--color-border);
}

.cookie-option-info strong {
  font-size: var(--font-size-sm);
  display: block;
  margin-bottom: 0.25rem;
}

.cookie-option-info p {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin: 0;
}

.cookie-settings-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--color-border);
  text-align: right;
}

/* --------------------------------------------------------------------------
   Newsletter Section — detailed sub-components
   -------------------------------------------------------------------------- */
.newsletter-inner {
  padding: 0.5rem 0;
}

.newsletter-title {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--color-on-primary, #fff);
  margin-bottom: 0.625rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.newsletter-text {
  font-size: var(--font-size-base);
  color: color-mix(in srgb, var(--color-on-primary, #fff) 85%, transparent);
  margin: 0;
  line-height: 1.6;
}

.newsletter-form-group {
  display: flex;
  gap: 0.75rem;
}

.newsletter-input-wrapper {
  position: relative;
  flex: 1;
}

.newsletter-input-icon {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-light);
  font-size: 1rem;
  pointer-events: none;
}

.newsletter-input {
  width: 100%;
  padding: 1rem 1.25rem 1rem 3rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-white);
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.newsletter-input:focus {
  border-color: var(--color-on-primary, #fff);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2), 0 4px 16px rgba(0, 0, 0, 0.08);
}

.newsletter-submit {
  padding: 1rem 1.75rem;
  border-radius: var(--border-radius-full);
  font-weight: 700;
  white-space: nowrap;
  font-size: var(--font-size-base);
  background: var(--color-on-primary, #fff);
  color: var(--color-primary-dark);
  border: 2px solid #ffffff;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.01em;
}

.newsletter-submit:hover {
  background: color-mix(in srgb, var(--color-on-primary, #fff) 88%, var(--color-primary));
  color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.newsletter-disclaimer {
  font-size: var(--font-size-xs);
  color: color-mix(in srgb, var(--color-on-primary, #fff) 68%, transparent);
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.newsletter-message {
  font-size: var(--font-size-sm);
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--border-radius);
}

.newsletter-message-success {
  color: var(--color-on-primary, #fff);
  background: color-mix(in srgb, var(--color-on-primary, #fff) 20%, transparent);
}

.newsletter-message-error {
  color: color-mix(in srgb, var(--color-danger) 28%, var(--color-white) 72%);
  background: color-mix(in srgb, var(--color-danger) 20%, transparent);
}

@media (max-width: 767.98px) {
  .newsletter-title {
    font-size: 1.375rem;
  }

  .newsletter-form-group {
    flex-direction: column;
  }

  .newsletter-submit {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Site Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: linear-gradient(180deg, var(--color-text) 0%, var(--color-text) 100%);
  /* ZONA 6 — footerul e o banda INCHISA (fundalul lui = var(--color-text)).
     Textul din interior NU poate veni din scala de text a paginii: pe temele light
     ar insemna gri-inchis pe navy (masurat 1,99:1 = ilizibil). Il derivam din
     SUPRAFATA footerului. Directia difera pe light vs dark, deci varianta dark
     e suprascrisa mai jos. (audit contrast 62 de teme, 2026-07-27) */
  --footer-fg: var(--color-white);
  --footer-fg-muted: color-mix(in srgb, var(--footer-fg) 78%, transparent);
  --footer-fg-soft: color-mix(in srgb, var(--footer-fg) 62%, transparent);
  color: var(--footer-fg-muted);
  padding: 3.5rem 0 0;
  margin-top: 0;
}
/* Pe temele intunecate fundalul footerului e dat de tema (mix din --color-bg),
   deci culoarea lizibila e chiar textul paginii (deschis).
   ⚠️ BUG REPARAT 2026-07-29: regula de mai sus pune `background: linear-gradient(...)`
   din `--color-text`. Pe DARK, `--color-text` e DESCHIS => footer deschis, iar
   `--footer-fg` (tot din --color-text) devine text deschis pe fundal deschis =
   INVIZIBIL. Gradientul e background-IMAGE, deci un `background-color` din tema
   clientului nu-l putea acoperi. Aici il stingem explicit si punem fundalul
   documentat pentru dark: mix(--color-bg, negru). Prins la QA vizual pe
   porcusorulpofticios (tema dark). Afecteaza ORICE client cu tema inchisa. */
body.theme-dark .site-footer {
  --footer-fg: var(--color-text);
  background-image: none;
  background-color: color-mix(in srgb, var(--color-bg) 92%, #000);
}

.footer-brand {
  margin-bottom: 1.25rem;
}

.footer-brand img {
  height: 38px;
  width: auto;
  filter: brightness(10);
}

.footer-description {
  font-size: 0.875rem;
  color: var(--footer-fg-muted);
  line-height: 1.65;
  max-width: 300px;
  margin-bottom: 0;
}

.footer-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--footer-fg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  position: relative;
}

.footer-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: 1px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: var(--footer-fg-muted);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-links a:hover {
  color: var(--footer-fg);
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}

.footer-contact i {
  color: var(--color-primary);
  font-size: 0.875rem;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-contact a,
.footer-contact span {
  color: var(--footer-fg-muted);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-contact a:hover {
  color: var(--footer-fg);
}

.footer-social {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.footer-social a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--footer-fg-muted);
  border-radius: var(--border-radius-full);
  font-size: 0.875rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-social a:hover {
  background-color: var(--color-primary);
  color: var(--footer-fg);
  transform: translateY(-3px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 35%, transparent);
  border-color: var(--color-primary);
}

.footer-bottom {
  border-top: 1px solid color-mix(in srgb, var(--footer-fg) 14%, transparent);
  margin-top: 2.5rem;
  padding: 1.25rem 0;
}

.footer-copyright {
  font-size: 0.8125rem;
  color: var(--footer-fg-muted);
  margin: 0;
}

.footer-anpc {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
}

.footer-anpc a {
  display: inline-block;
  transition: opacity 0.2s;
}

.footer-anpc img {
  height: 40px;
  border-radius: 4px;
  opacity: 0.85;
}

.footer-anpc a:hover img {
  opacity: 1;
}

.footer-payment {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-end;
}

.footer-payment-label {
  font-size: 0.8125rem;
  color: var(--footer-fg-muted);
}

.footer-payment i {
  font-size: 1.5rem;
  color: var(--footer-fg-muted);
}

@media (max-width: 767.98px) {
  .site-footer {
    padding-top: 2.5rem;
  }

  .footer-bottom .row {
    text-align: center;
  }

  .footer-copyright {
    margin-bottom: 1rem;
  }

  .footer-payment {
    justify-content: center;
    margin-top: 1rem;
  }
}

/* ============================================================================
   SITE CTA SECTIONS — reusable call-to-action banners from DB
   ============================================================================ */

.site-cta {
  padding: 2rem 0;
  text-align: center;
  color: #fff;
}

/* The inner card: contained, rounded, with background */
.site-cta-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  border-radius: var(--border-radius-xl, 16px);
  position: relative;
  overflow: hidden;
}

/* Background styles — applied on .site-cta-inner (not section) for rounded effect */
.site-cta-gradient-green .site-cta-inner {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}
.site-cta-gradient-dark .site-cta-inner {
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-text) 100%);
}
.site-cta-gradient-blue .site-cta-inner {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-info) 75%, var(--color-text) 25%) 0%, color-mix(in srgb, var(--color-info) 65%, var(--color-text) 35%) 100%);
}
.site-cta-solid-green .site-cta-inner {
  background: var(--color-primary);
}
.site-cta-solid-dark .site-cta-inner {
  background: var(--color-text);
}
.site-cta-light .site-cta-inner {
  background: var(--color-bg-alt);
  color: var(--color-text);
}
.site-cta-light .site-cta-title { color: var(--color-text); }
.site-cta-light .site-cta-text { color: var(--color-text-secondary); }
.site-cta-light .site-cta-badge { background: rgba(var(--color-primary-rgb), 0.1); color: var(--color-primary); border-color: rgba(var(--color-primary-rgb), 0.2); }

.site-cta-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.site-cta-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.site-cta-title {
  font-family: var(--font-family-heading);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: inherit;
}

.site-cta-text {
  font-size: 1.05rem;
  line-height: 1.7;
  opacity: 0.9;
  margin-bottom: 1.5rem;
  color: inherit;
}

.site-cta-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.site-cta-btn {
  font-weight: 600;
  padding: 0.65rem 1.5rem;
  border-radius: var(--border-radius);
}

@media (max-width: 768px) {
  .site-cta { padding: 1.5rem 0; }
  .site-cta-inner { padding: 2rem 1.25rem; border-radius: var(--border-radius-lg, 12px); }
  .site-cta-title { font-size: 1.5rem; }
  .site-cta-text { font-size: 0.95rem; }
  .site-cta-actions { flex-direction: column; align-items: center; }
  .site-cta-badges { gap: 0.35rem; }
  .site-cta-badge { font-size: 0.72rem; padding: 0.25rem 0.6rem; }
}

/* ============================================================================
   ACCOUNT PAGES — typography, clickable order rows, general styling
   ============================================================================ */

/* Headings in account pages use the heading font (Montserrat) */
.account-section h1,
.account-section h2,
.account-section h3,
.account-section h4,
.account-section h5 {
  font-family: var(--font-family-heading);
}

/* Clickable order rows in orders table */
.account-section .table-hover tbody tr[onclick] {
  transition: background-color 0.15s ease;
}

.account-section .table-hover tbody tr[onclick]:hover {
  background-color: var(--color-primary-lightest) !important;
}

.account-section .table-hover tbody tr[onclick]:hover td {
  color: var(--color-primary-dark);
}

/* ============================================================================
   ACCOUNT SIDEBAR NAVIGATION — styled menu for customer account pages
   ============================================================================ */

.account-nav {
  padding: 0;
}

.account-nav ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-nav-link {
  display: flex;
  align-items: center;
  padding: 0.55rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--border-radius);
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.account-nav-link:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-lightest);
  border-left-color: var(--color-primary-light);
}

.account-nav-link.active {
  color: var(--color-primary-dark);
  background: linear-gradient(135deg, var(--color-primary-lightest), color-mix(in srgb, var(--color-success) 12%, var(--color-white) 88%));
  border-left-color: var(--color-primary);
  font-weight: 600;
}

.account-nav-link.active i {
  color: var(--color-primary);
}

.account-nav-link i {
  width: 18px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-light);
  transition: color 0.2s ease;
}

.account-nav-link:hover i {
  color: var(--color-primary);
}

.account-nav-link.text-danger {
  color: var(--color-danger) !important;
}

.account-nav-link.text-danger:hover {
  background-color: color-mix(in srgb, var(--color-danger) 7%, var(--color-white) 93%);
  border-left-color: var(--color-danger);
}

/* Account user header in sidebar */
.account-user {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

/* ============================================================================
   SELECT2 — Override cu tema MyCell (emerald + Figtree + border-radius)
   Folosit pentru Select2-uri din checkout + account-addresses pentru orase.
   ============================================================================ */

/* Wrapper-ul containerului: must be 100% identic cu .form-select din Bootstrap + tema */
.select2-container--default .select2-selection--single {
  /* height = padding 0.625rem × 2 + (font-size 14px × line-height 1.5) + border 2px = ~43px */
  height: 43px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-white);
  font-family: var(--font-family);
  font-size: var(--font-size-sm); /* 14px */
  color: var(--color-text);
  transition: var(--transition-fast);
  box-shadow: none;
  display: flex;
  align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.5;
  padding: 0 2.5rem 0 0.875rem; /* left 14px like form-select, right 2.5rem for arrow */
  color: var(--color-text);
  font-size: var(--font-size-sm);
  width: 100%;
  font-family: var(--font-family);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--color-text-light);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: 0.625rem;
  width: 20px;
}

/* Arrow: replace with a simple chevron that matches Bootstrap form-select */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  width: 14px;
  height: 14px;
  margin: 0;
  left: auto;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Focus state: emerald border + glow exactly like .form-control:focus */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
  outline: none;
}

/* Clear button: position tighter, neutral color */
.select2-container--default .select2-selection--single .select2-selection__clear {
  right: 30px;
  color: var(--color-text-light);
  font-weight: 400;
  margin-right: 0.25rem;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
  color: var(--color-danger);
}

/* Dropdown panel
   ⚠️ `background-color` e OBLIGATORIU aici. Fara el ramane alb fix, din select2.min.css
   (`.select2-dropdown{background-color:#fff}`), iar pe temele INCHISE optiunile se scriu cu
   `--color-text` (aproape alb) pe panoul alb — adica lista de localitati de la finalizarea
   comenzii era ALBA PE ALB, invizibila (masurat pe cetinis, 10 sep 2026: panou rgb(255,255,255),
   text rgb(234,242,236)). `--color-white` inseamna SUPRAFATA, nu culoarea alba: pe teme deschise
   e alb, pe teme inchise e suprafata cardului. */
.select2-container--default .select2-dropdown {
  background-color: var(--color-white);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  margin-top: 4px;
  overflow: hidden;
}

/* Search input inside dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  color: var(--color-text);
  background-color: var(--color-white);
  transition: var(--transition-fast);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.12);
  outline: none;
}

.select2-container--default .select2-search--dropdown {
  padding: 0.5rem;
}

/* Result items */
.select2-container--default .select2-results__option {
  padding: 0.625rem 0.875rem;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  font-family: var(--font-family);
  border-radius: var(--border-radius-sm);
  margin: 0 0.25rem;
}

.select2-container--default .select2-results__options {
  padding: 0.25rem 0;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--selected {
  background-color: var(--color-primary-lightest);
  color: var(--color-primary-dark);
}

/* Pe temele inchise, `--color-primary-lightest` e o tenta INCHISA, iar `--color-primary-dark`
   scris peste ea abia se citeste. Derivarea e directionala, deci merge sub clasa de tema. */
body.theme-dark .select2-container--default .select2-results__option[aria-selected=true],
body.theme-dark .select2-container--default .select2-results__option--selected {
  color: var(--color-primary);
}

/* Bara de derulare a listei — pe teme inchise cea implicita iese ca o dunga alba. */
.select2-container--default .select2-results__options::-webkit-scrollbar { width: 8px; }
.select2-container--default .select2-results__options::-webkit-scrollbar-track { background: transparent; }
.select2-container--default .select2-results__options::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}
.select2-container--default .select2-results__options {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.select2-container--default .select2-results__message {
  padding: 0.75rem 0.875rem;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

/* Loading state */
.select2-container--default .select2-results__option.loading-results {
  color: var(--color-text-light);
  font-style: italic;
}

/* Container spans full width, no weird inline-block gaps */
.select2-container {
  width: 100% !important;
}

/* --- Select2 icon prepend wrapper (matches Bootstrap input-group-text look) --- */
.select2-icon-wrapper {
  position: relative;
  display: flex;
  align-items: stretch;
}

.select2-icon-prepend {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-height: 43px;
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  color: var(--color-text-light);
  font-size: 1rem;
  flex-shrink: 0;
  z-index: 1;
}

/* Adjust Select2 container inside wrapper to connect to icon prepend */
.select2-icon-wrapper .select2-container {
  flex: 1;
}

.select2-icon-wrapper .select2-container--default .select2-selection--single {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Focus: glow on BOTH icon + select2 together */
.select2-icon-wrapper:has(.select2-container--focus) .select2-icon-prepend,
.select2-icon-wrapper:has(.select2-container--open) .select2-icon-prepend {
  border-color: var(--color-primary);
}

/* ============================================================================
   End Select2 overrides
   ============================================================================ */

/* ============================================================================
   Tooltip — JS-based via [data-tip]
   Rendered as fixed <div> on <body>, never clipped by overflow.
   ============================================================================ */
.site-tooltip {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    background: var(--color-text);
    color: var(--color-border);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.45;
    white-space: normal;
    max-width: 220px;
    width: max-content;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    letter-spacing: 0.01em;
    opacity: 0;
    transition: opacity 0.15s;
}
.site-tooltip.visible { opacity: 1; }
.site-tooltip::after {
    content: '';
    position: absolute;
    left: var(--arrow-left, 50%);
    transform: translateX(-50%);
    border: 5px solid transparent;
}
.site-tooltip.pos-top::after { top: 100%; border-top-color: var(--color-text); }
.site-tooltip.pos-bottom::after { bottom: 100%; border-bottom-color: var(--color-text); }

/* ============================================================================
   Account Forms — compact inputs matching checkout size
   ============================================================================ */
#addressForm .form-control,
#addressForm .form-select {
    padding: 0.3rem 0.65rem;
    font-size: 0.84rem;
    height: auto;
    min-height: 0;
}
#addressForm .input-group-text {
    padding: 0.3rem 0.55rem;
    font-size: 0.84rem;
}
#addressForm .form-label {
    font-size: 0.78rem;
    margin-bottom: 0.2rem;
}
#addressForm .btn-infocui-lookup {
    padding: 0.3rem 0.5rem;
}
#addressForm .input-group > .input-group-text:first-child + .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
/* Select2 compact inside address form */
#addressForm .select2-container--default .select2-selection--single {
    height: 34px;
    min-height: 34px;
    font-size: 0.84rem;
}
#addressForm .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
    font-size: 0.84rem;
    padding-left: 0.75rem;
}
#addressForm .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
}

/* ==========================================================================
   PASSWORD TOGGLE (eye icon) — login, reset-password, etc.
   ========================================================================== */
.password-toggle-group .password-toggle {
  border-left: none !important;
  border-color: var(--color-border) !important;
  background: var(--color-white) !important;
  color: var(--color-text-secondary) !important;
  transition: all 0.2s ease;
  padding: 0.5rem 0.85rem;
}
.password-toggle-group .password-toggle:hover {
  color: var(--color-primary) !important;
  background: var(--color-white) !important;
  border-color: var(--color-primary) !important;
}
.password-toggle-group .password-toggle:focus {
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 239, 68, 68), 0.2);
  outline: none;
}
.password-toggle-group .password-toggle i {
  pointer-events: none;
  font-size: 0.95rem;
}
/* Admin login: eye button este absolute positioned */
.password-eye-toggle:hover {
  color: var(--color-primary) !important;
}