/*
  site-extra.css
  Toffa Gallery - Storefront
  Developed by Pankaj

  Small additions the POSH template doesn't ship with: the mobile
  app-style bottom navigation, toast/confirm-modal styling (no browser
  alert()/confirm() anywhere), the product customization form, and a
  few utility tweaks used across converted pages. Everything else
  (colors, spacing, buttons, cards) comes from main.css untouched.
*/

/* ---------------------------------------------------------------------
   Mobile bottom navigation (storefront) - mirrors the admin panel's
--------------------------------------------------------------------- */
.tg-site-bottom-nav {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top: 1px solid #eee;
    z-index: 999;
    box-shadow: 0 -4px 20px rgba(0,0,0,.06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tg-site-bottom-nav ul { display: flex; margin: 0; padding: 0; list-style: none; height: 60px; }
.tg-site-bottom-nav li { flex: 1; }
.tg-site-bottom-nav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; height: 100%; color: #777; font-size: .64rem; font-weight: 600; position: relative;
    text-decoration: none;
}
.tg-site-bottom-nav a i { font-size: 1.1rem; }
.tg-site-bottom-nav .tg-nav-badge {
    position: absolute; top: 4px; right: 24%;
    background: var(--theme, #d4a24c); color: #fff;
    font-size: .6rem; font-style: normal; border-radius: 20px;
    padding: 0 5px; min-width: 15px; text-align: center; line-height: 15px;
}

@media (max-width: 991.98px) {
    .tg-site-bottom-nav { display: block; }
    body { padding-bottom: 60px; }
}

/* ---------------------------------------------------------------------
   Toasts + custom confirm modal
--------------------------------------------------------------------- */
.tg-toast-stack {
    position: fixed; top: 90px; right: 16px; z-index: 99999;
    display: flex; flex-direction: column; gap: 10px; max-width: 90vw;
}
.tg-toast {
    min-width: 240px; max-width: 340px; background: #fff; border-radius: 8px;
    padding: 12px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.15);
    border-left: 4px solid #2d9cff; font-size: .88rem;
}
.tg-toast.success { border-color: #1cbf73; }
.tg-toast.error { border-color: #f5455c; }

/* ---------------------------------------------------------------------
   Product customization form (product.php)
--------------------------------------------------------------------- */
.tg-customize-box {
    border: 1px dashed #ddd;
    border-radius: 10px;
    padding: 18px;
    margin: 20px 0;
    background: #fafafa;
}
.tg-customize-box h5 { margin-bottom: 14px; font-size: 1rem; font-weight: 700; }
.tg-customize-field { margin-bottom: 14px; }
.tg-customize-field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
.tg-customize-field .required { color: #f5455c; }
.tg-customize-field input[type="text"],
.tg-customize-field input[type="number"],
.tg-customize-field textarea,
.tg-customize-field select {
    width: 100%; border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px 12px; font-size: .9rem;
}
.tg-customize-field .extra-price { font-size: .76rem; color: #999; margin-left: 6px; }
.tg-customize-field input[type="file"] {
    width: 100%; border: 1px dashed #ccc; border-radius: 8px; padding: 10px; font-size: .85rem; background: #fff;
}

/* ---------------------------------------------------------------------
   Misc small helpers used across converted pages
--------------------------------------------------------------------- */
.tg-newsletter-input {
    width: 100%; border: 1px solid #e0e0e0; border-radius: 30px; padding: 10px 18px; font-size: .88rem;
}
.tg-out-of-stock { color: #f5455c; font-weight: 700; }
.tg-empty-state { text-align: center; padding: 60px 20px; }
.tg-empty-state i { font-size: 3rem; color: #ddd; margin-bottom: 16px; }
.tg-address-card {
    border: 1px solid #eee; border-radius: 10px; padding: 16px; margin-bottom: 12px; position: relative;
}
.tg-address-card.selected { border-color: #d4a24c; background: #fdf8ef; }
.tg-order-timeline { list-style: none; padding: 0; margin: 0; }
.tg-order-timeline li { display: flex; gap: 12px; margin-bottom: 14px; }
.tg-order-timeline i { color: #1cbf73; margin-top: 3px; }
.tg-gallery-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tg-gallery-thumbs img { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
.tg-gallery-thumbs img.active { border-color: #d4a24c; }