/* components.css - Reusable UI Components */

/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 10px 20px;
  min-height: 44px;
  border-radius: var(--radius-button);
  transition: all var(--transition-fast);
  text-align: center;
  cursor: pointer;
  gap: 8px;
}

.btn:active {
  transform: scale(0.98);
}

/* Button variants */
.btn-primary {
  background-color: var(--primary-rose);
  color: var(--text-on-accent);
}

.btn-primary:hover {
  background-color: var(--deep-rose);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 26, 74, 0.2);
}

/* Specific to Product Card Add Button */
.add-to-cart-btn {
  flex-shrink: 0;
  min-width: 90px;
  padding: 0.5rem 0.8rem;
}

.btn-outline {
  border: 1px solid var(--primary-rose);
  color: var(--primary-rose);
}

.btn-outline:hover {
  background-color: var(--primary-rose);
  color: var(--text-on-accent);
}

.btn-secondary {
  background-color: var(--champagne-gold);
  color: var(--text-on-light-accent);
  font-weight: 700;
}

.btn-secondary:hover {
  background-color: #c09643;
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-disabled, .btn[disabled] {
  background-color: var(--warm-gray) !important;
  color: var(--velvet-cream) !important;
  cursor: not-allowed;
  pointer-events: none;
  border-color: var(--warm-gray) !important;
}

/* --- PRODUCT CARD --- */
.product-card {
  background-color: var(--ivory-white);
  border: 1px solid var(--velvet-cream);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  position: relative;
  height: 100%;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.product-card__img-container {
  aspect-ratio: 1;
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  background-color: var(--velvet-cream);
  position: relative;
}

.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.product-card:hover .product-card__img {
  transform: scale(1.06);
}

.product-card__badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}

.product-card__content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product-card__category {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--warm-gray);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.product-card__title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 6px;
  line-height: 1.35;
  min-height: calc(1.35em * 2);
  color: var(--deep-charcoal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__model {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--warm-gray);
  margin-bottom: 8px;
}

.product-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  /* Keep every card's footer the same height regardless of whether its own
     price happens to have a discount or not, so the price/button row lands
     at the same y-position across every card in a shop grid row. */
  min-height: 44px;
}

/* --- PRICE DISPLAY --- */
.price-display {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex: 1;
  /* Was flex-wrap: wrap -- a discounted price (current + strikethrough old)
     wrapped onto 2 lines while a plain price stayed on 1, making the footer
     taller on discounted cards and visibly misaligning it against its
     neighbors in the same row. Force one line and let it shrink instead. */
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0; /* let the flex item shrink below its content size instead of overflowing the card */
}

.price-display__current {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--primary-rose);
  /* Same graceful-truncation safety net as .price-display__old -- a hard
     overflow:hidden clip with no ellipsis reads as a rendering bug (e.g. a
     clipped "0" looking like a "C"); an ellipsis at least signals on
     purpose if a price value is ever wide enough to not fully fit. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.price-display__old {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--warm-gray);
  text-decoration: line-through;
  /* Graceful fallback for any future price value tight layouts can't fully
     fit -- truncates with an ellipsis instead of a raw character clip. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* --- CATEGORY CARD --- */
.category-card {
  position: relative;
  aspect-ratio: 3/2;
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-end;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.category-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.category-card__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform var(--transition-slow);
}

.category-card:hover .category-card__img {
  transform: scale(1.05);
}

.category-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(45, 45, 45, 0.85) 0%, rgba(45, 45, 45, 0.2) 60%, rgba(45, 45, 45, 0) 100%);
  z-index: 2;
}

.category-card__content {
  position: relative;
  z-index: 3;
  padding: 16px;
  color: var(--text-on-accent);
  width: 100%;
}

.category-card__title {
  color: var(--text-on-accent);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin-bottom: 2px;
}

.category-card__cta {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--champagne-gold);
}

/* --- QUANTITY STEPPER --- */
.stepper {
  display: inline-flex;
  border: 1px solid var(--velvet-cream);
  border-radius: var(--radius-button);
  background-color: var(--ivory-white);
  overflow: hidden;
}

.stepper__btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--velvet-cream);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-rose);
  transition: background-color var(--transition-fast);
}

.stepper__btn:hover {
  background-color: #eadfd4;
}

.stepper__input {
  width: 40px;
  height: 36px;
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.95rem;
  border-left: 1px solid var(--velvet-cream);
  border-right: 1px solid var(--velvet-cream);
}

/* --- SHIMMER / LOADING SKELETON --- */
.shimmer-card {
  background-color: var(--ivory-white);
  border: 1px solid var(--velvet-cream);
  border-radius: var(--radius-card);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shimmer-box {
  background: linear-gradient(90deg, var(--velvet-cream) 25%, var(--ivory-white) 50%, var(--velvet-cream) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

.shimmer-card__img {
  aspect-ratio: 1;
  border-radius: var(--radius-card);
}

.shimmer-card__title {
  height: 18px;
  width: 80%;
}

.shimmer-card__price {
  height: 16px;
  width: 40%;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* --- REVIEWS CARD --- */
.review-card {
  background-color: var(--velvet-cream);
  padding: 24px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-card__stars {
  color: var(--champagne-gold);
  font-size: 1.1rem;
}

.review-card__text {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--deep-charcoal);
  margin-bottom: 0;
}

.review-card__author {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--primary-rose);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- BREADCRUMBS --- */
.breadcrumbs {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--warm-gray);
  margin: 16px 0;
  display: flex;
  gap: 8px;
}

.breadcrumbs a:hover {
  color: var(--primary-rose);
}

/* --- EMPTY STATE --- */
.empty-state {
  text-align: center;
  padding: 48px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.empty-state__icon {
  width: 80px;
  height: 80px;
  opacity: 0.3;
  fill: var(--warm-gray);
}

.empty-state__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--primary-rose);
}

.empty-state__desc {
  font-size: 0.95rem;
  color: var(--warm-gray);
  max-width: 300px;
}

/* --- INLINE ADMIN CONTROLS & MODALS --- */
.product-card {
  position: relative; /* Ensure child absolute elements anchor properly */
}

.product-card__edit-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 15;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--ivory-white);
  border: 1px solid var(--velvet-cream);
  color: var(--primary-rose);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.product-card__edit-btn:hover {
  background-color: var(--primary-rose);
  color: var(--text-on-accent);
  border-color: var(--primary-rose);
  transform: scale(1.1);
}

.product-card__edit-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.product-detail__edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 50px;
  background-color: var(--ivory-white);
  border: 1px solid var(--primary-rose);
  color: var(--primary-rose);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.product-detail__edit-btn:hover {
  background-color: var(--primary-rose);
  color: var(--text-on-accent);
}

.product-detail__edit-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Modal Overlay */
.admin-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(45, 45, 45, 0.65);
  backdrop-filter: blur(2px);
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal Window */
.admin-modal__content {
  background-color: var(--ivory-white);
  padding: 28px;
  border-radius: var(--radius-card);
  max-width: 550px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  position: relative;
  border: 1px solid var(--velvet-cream);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.admin-modal__title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--primary-rose);
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--velvet-cream);
}

.admin-modal__close {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--warm-gray);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.admin-modal__close:hover {
  color: var(--deep-charcoal);
}

/* Form Styles inside Modal */
.admin-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-form-group label {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--deep-charcoal);
  text-transform: uppercase;
}

.admin-form-input,
.admin-form-select,
.admin-form-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--velvet-cream);
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-size: 16px; /* prevent iOS auto-zoom */
  color: var(--deep-charcoal);
  background-color: var(--ivory-white);
}

.admin-form-textarea {
  min-height: 80px;
  resize: vertical;
}

.admin-form-input:focus,
.admin-form-select:focus,
.admin-form-textarea:focus {
  outline: none;
  border-color: var(--primary-rose);
  box-shadow: 0 0 0 3px rgba(139, 26, 74, 0.1);
}

.admin-form-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.admin-form-row > .admin-form-group {
  flex: 1;
  min-width: 120px;
}

.admin-modal__img-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.admin-modal__img-preview {
  width: 70px;
  height: 70px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--velvet-cream);
  background-color: var(--velvet-cream);
  flex-shrink: 0;
}

@media (max-width: 480px) {
  /* On a narrow modal, a preview image (especially the banner form's wide
     120x60 one) plus a 16px gap left very little width for the native file
     input, which truncated its own "Choose file / No file chosen" label.
     Stack them instead so the file input gets the modal's full width, same
     as every other field. */
  .admin-modal__img-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-modal__img-row .admin-form-input {
    width: 100%;
  }
}

/* Buttons */
.admin-modal__buttons {
  display: flex;
  gap: 12px;
  /* Sticky footer: the form can grow taller than the modal's max-height (e.g.
     with the additional-image fields), so without this the Save/Delete
     buttons scroll out of view and clicks land on whatever's behind them. */
  position: sticky;
  bottom: 0;
  /* 24px top margin (was 12px) -- forms whose last field sits directly
     above this footer (e.g. the banner form's Display Order) were only
     clearing it by a couple of px even scrolled all the way down, so the
     field and the sticky bar visually ran into each other. */
  margin: 24px -28px -28px;
  padding: 12px 28px 28px;
  background-color: var(--ivory-white);
  border-top: 1px solid var(--velvet-cream);
}

.btn-admin-save {
  flex: 2;
  background-color: var(--primary-rose);
  color: #ffffff;
  font-weight: 700;
}

.btn-admin-save:hover {
  background-color: var(--deep-rose);
}

.admin-modal__img-remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #ffcdd2;
  background-color: #ffebee;
  color: #c62828;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.admin-modal__img-remove:hover {
  background-color: #c62828;
  color: #ffffff;
  border-color: #c62828;
}

.btn-admin-delete {
  flex: 1;
  background-color: #ffebee;
  color: #c62828;
  border: 1px solid #ffcdd2;
  font-weight: 700;
}

.btn-admin-delete:hover {
  background-color: #c62828;
  color: #ffffff;
  border-color: #c62828;
}

.btn-admin-save:disabled,
.btn-admin-delete:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Toast Notification */
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--toast-bg);
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 3000;
  text-align: center;
  max-width: 90%;
  word-break: break-word;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast.error {
  background: #d32f2f;
}

.toast.success {
  background: #388e3c;
}

/* Floating Action Button for Admins */
.admin-fab {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 2500;
  background-color: var(--primary-rose);
  color: white;
  border: none;
  border-radius: 50px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  font-size: 1rem;
}

.admin-fab svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  margin-right: 8px;
  transition: transform 0.3s ease;
}

.admin-fab:hover {
  background-color: #70133a;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.admin-fab:hover svg {
  transform: rotate(90deg);
}

@media (max-width: 768px) {
  .admin-fab {
    height: 48px;
    padding: 0 14px;
    font-size: 0.85rem;
    bottom: 15px;
    left: 15px;
  }
  .admin-fab svg {
    width: 20px;
    height: 20px;
    margin-right: 4px;
  }
}