/* ================================================================
   assets/css/card.css  —  Public digital card styles
================================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body.card-body-bg { background: #f0faf4; font-family: 'DM Sans', sans-serif; }

.card-wrapper { max-width: 420px; margin: 0 auto; background: #fff;
                min-height: 100vh; box-shadow: 0 0 40px rgba(0,0,0,.1); }

/* ── Header ──────────────────────────────────────────────────── */
.card-head   { padding: 32px 20px 24px; text-align: center; position: relative; }
.card-logo   { width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
               border: 3px solid rgba(255,255,255,.5); margin-bottom: 12px;
               box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.card-logo-placeholder { width: 76px; height: 76px; border-radius: 50%;
               background: rgba(255,255,255,.2); border: 3px solid rgba(255,255,255,.5);
               display: flex; align-items: center; justify-content: center;
               font-size: 28px; font-weight: 800; color: #fff;
               font-family: 'Syne',sans-serif; margin: 0 auto 12px; }
.card-name   { font-size: 16px; font-weight: 800; color: #fff; font-family: 'Syne',sans-serif;
               line-height: 1.2; margin-bottom: 4px; }
.card-role   { font-size: 14px; color: rgba(255,255,255,.8); margin-top: 2px; }
.card-company{ font-size: 18px; color: rgba(255,255,255,.9); margin-top: 8px;
               display: flex; align-items: center; justify-content: center; gap: 7px;
               line-height: 1.25; font-weight: 700; }
.card-city   { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 6px;
               display: flex; align-items: center; justify-content: center; gap: 7px;
               line-height: 1.3; }
.card-company i,
.card-city i { flex: 0 0 auto; opacity: .85; }
.share-btn,
.qr-btn      { position: absolute; top: 14px; width: 34px; height: 34px;
               border-radius: 50%; background: rgba(255,255,255,.2);
               border: none; color: #fff; cursor: pointer; font-size: 14px;
               display: flex; align-items: center; justify-content: center; transition: .2s; }
.share-btn   { right: 14px; }
.qr-btn      { left: 14px; }
.share-btn:hover,
.qr-btn:hover { background: rgba(255,255,255,.35); }

/* ── Action row ──────────────────────────────────────────────── */
.action-row  { display: flex; gap: 6px; justify-content: center; padding: 18px 16px;
               background: #fff; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap; }
.dc-action   { display: flex; flex-direction: column; align-items: center;
               gap: 6px; text-decoration: none; flex: 1; min-width: 56px; max-width: 72px; }
.dc-action-btn { width: 52px; height: 52px; border-radius: 50%;
                 display: flex; align-items: center; justify-content: center;
                 font-size: 20px; color: #fff; transition: .15s; }
.dc-action-btn:hover { transform: scale(1.08); }
.dc-action span { font-size: 11px; color: #64748b; font-weight: 500; }

/* ── CTA buttons ─────────────────────────────────────────────── */
.card-cta-row { display: grid; grid-template-columns: 1fr 1fr; }
.card-cta-row.single { grid-template-columns: 1fr; }
.btn-cta     { padding: 14px 8px; font-size: 14px; font-weight: 700; letter-spacing: .5px;
               color: #fff; border: none; cursor: pointer; display: flex;
               align-items: center; justify-content: center; gap: 8px; transition: .15s; }
.btn-cta:hover { filter: brightness(.9); }

/* ── Navigation grid ─────────────────────────────────────────── */
.nav-grid    { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid #e2e8f0; }
.grid-item   { display: flex; flex-direction: column; align-items: center; justify-content: center;
               padding: 14px 6px; cursor: pointer; transition: .15s;
               border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
               color: inherit; text-decoration: none !important; }
.grid-item:nth-child(4n) { border-right: none; }
.grid-item:hover { background: #f8fafb; text-decoration: none !important; }
.grid-item:focus,
.grid-item:active,
.grid-item:visited,
.grid-item *,
.grid-item:hover * { text-decoration: none !important; }
.grid-icon   { width: 38px; height: 38px; border-radius: 10px; background: #f0faf4;
               display: flex; align-items: center; justify-content: center;
               margin-bottom: 6px; border: 1px solid #e2e8f0; font-size: 16px; }
.grid-label  { font-size: 10px; color: #64748b; text-align: center; font-weight: 500;
               text-transform: uppercase; letter-spacing: .4px; line-height: 1.3; }

/* ── Card section ────────────────────────────────────────────── */
.card-section { padding: 20px 18px; border-bottom: 1px solid #e2e8f0; scroll-margin-top: 12px; }
.section-title { font-size: 14px; font-weight: 700; color: #1a202c; margin-bottom: 14px;
                 text-transform: uppercase; letter-spacing: .8px; font-family: 'Syne',sans-serif;
                 display: flex; align-items: center; gap: 7px; }
.about-text  { font-size: 14px; line-height: 1.75; color: #374151; }

/* ── Products ────────────────────────────────────────────────── */
.products-scroll { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.products-scroll::-webkit-scrollbar { height: 4px; }
.products-scroll::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 2px; }
.product-card { width: 100%; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden;
                cursor: pointer; transition: .15s; }
.product-card:hover,
.product-card:focus { border-color: #cbd5e1; box-shadow: 0 4px 14px rgba(15,23,42,.1); outline: none; }
.product-img  { width: 100%; height: 112px; object-fit: cover; }
.product-img-placeholder { width: 100%; height: 112px; background: #f0faf4;
                            display: flex; align-items: center; justify-content: center; font-size: 28px; }
.product-body { padding: 8px; }
.product-name { font-size: 12px; font-weight: 600; line-height: 1.3; margin-bottom: 2px; }
.product-desc { font-size: 10px; color: #64748b; margin-bottom: 4px; }
.product-price-row { margin-bottom: 6px; }
.product-mrp  { font-size: 11px; color: #94a3b8; text-decoration: line-through; margin-right: 4px; }
.product-offer{ font-size: 13px; font-weight: 700; color: var(--btn, #1a7a4a); }
.product-buy-btn { display: block; text-align: center; background: var(--btn, #1a7a4a);
                   color: #fff; font-size: 11px; font-weight: 600; padding: 5px;
                   border-radius: 6px; text-decoration: none; transition: .15s; }
.product-buy-btn:hover { filter: brightness(.88); }

/* ── Gallery ─────────────────────────────────────────────────── */
.gallery-grid-card { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.gallery-card-item { aspect-ratio: 1; border-radius: 6px; overflow: hidden; cursor: pointer; }
.gallery-card-img  { width: 100%; height: 100%; object-fit: cover;
                     display: block; transition: transform .2s; }
.gallery-card-item:hover .gallery-card-img { transform: scale(1.05); }

/* ── Payment QR ──────────────────────────────────────────────── */
.pay-grid  { display: grid; grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); gap: 12px; }
.pay-card  { border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px; text-align: center; }
.pay-label { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.pay-number{ font-size: 13px; font-weight: 600; color: #1a202c; margin-bottom: 6px; }
.pay-qr    { width: 90px; height: 90px; object-fit: contain; border-radius: 6px; }

/* Contact and feedback */
.contact-list { display: grid; gap: 10px; }
.contact-row  { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 12px;
                padding: 12px; border: 1px solid #e2e8f0; border-radius: 12px; color: #1f2937;
                background: #fff; text-decoration: none !important; line-height: 1.4;
                box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: .15s; }
.contact-row:hover { background: #f8fafb; border-color: #cbd5e1; transform: translateY(-1px);
                     text-decoration: none !important; }
.contact-row:focus,
.contact-row:active,
.contact-row:visited,
.contact-row *,
.contact-row:hover * { text-decoration: none !important; }
.contact-icon { width: 40px; height: 40px; border-radius: 10px; background: #f0faf4;
                border: 1px solid #dbeafe; display: flex; align-items: center; justify-content: center;
                color: var(--btn, #1a7a4a); font-size: 15px; }
.contact-detail { min-width: 0; display: grid; gap: 2px; }
.contact-label { color: #64748b; font-size: 10px; font-weight: 700; letter-spacing: .7px;
                 text-transform: uppercase; }
.contact-value { color: #111827; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.feedback-card { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                 border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; background: #f8fafb; }
.feedback-title { font-size: 14px; font-weight: 700; color: #1a202c; margin-bottom: 3px; }
.feedback-text { font-size: 12px; color: #64748b; line-height: 1.4; }
.feedback-btn { flex: 0 0 auto; background: var(--btn, #1a7a4a); color: #fff;
                border-radius: 8px; padding: 9px 12px; text-decoration: none;
                font-size: 12px; font-weight: 700; }
.feedback-btn:hover { filter: brightness(.9); color: #fff; }

/* ── Marketplace links ───────────────────────────────────────── */
.mkt-links { display: flex; flex-wrap: wrap; gap: 8px; }
.mkt-link  { padding: 7px 16px; border-radius: 20px; background: #f0faf4;
             border: 1px solid #c6e8d4; color: #1a7a4a; font-size: 13px;
             font-weight: 600; text-decoration: none; transition: .15s; }
.mkt-link:hover { background: #1a7a4a; color: #fff; }

/* ── Social icons ────────────────────────────────────────────── */
.social-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.social-icon{ width: 42px; height: 42px; border-radius: 50%;
              display: flex; align-items: center; justify-content: center;
              font-size: 17px; color: #fff; text-decoration: none; transition: .2s; }
.social-icon:hover { transform: translateY(-3px); }

/* ── Card footer ─────────────────────────────────────────────── */
.card-footer-bar { text-align: center; padding: 14px; font-size: 12px; color: #94a3b8; }
.card-footer-bar a { color: #1a7a4a; text-decoration: none; font-weight: 600; }

/* ── WhatsApp FAB ────────────────────────────────────────────── */
.wa-fab { position: fixed; bottom: 22px; right: 22px; width: 54px; height: 54px;
          border-radius: 50%; background: #25d366; color: #fff; font-size: 26px;
          display: flex; align-items: center; justify-content: center;
          box-shadow: 0 4px 16px rgba(37,211,102,.45); text-decoration: none;
          transition: transform .2s; z-index: 999; }
.wa-fab:hover { transform: scale(1.08); color: #fff; }

/* ── Lightbox ────────────────────────────────────────────────── */
.lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.88);
            z-index: 9998; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img  { max-width: 92vw; max-height: 88vh; border-radius: 8px;
                 box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox-close { position: fixed; top: 16px; right: 16px; width: 40px; height: 40px;
                  border-radius: 50%; border: none; background: rgba(255,255,255,.16);
                  color: #fff; cursor: pointer; display: flex; align-items: center;
                  justify-content: center; font-size: 18px; z-index: 10000; }
.lightbox-close:hover { background: rgba(255,255,255,.28); }

/* ── Modal ───────────────────────────────────────────────────── */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5);
                 z-index: 9000; align-items: flex-end; justify-content: center; padding: 16px; }
.modal-overlay.open { display: flex; }
.modal-box   { background: #fff; border-radius: 20px 20px 0 0; width: 100%; position: relative;
               max-width: 420px; max-height: 80vh; overflow-y: auto; padding: 24px; }
.modal-close { position: absolute; top: 12px; right: 16px; background: none;
               border: none; font-size: 20px; color: #64748b; cursor: pointer; }
.modal-title { font-weight: 700; font-size: 18px; margin-bottom: 16px;
               font-family: 'Syne',sans-serif; }
.qr-modal-box { text-align: center; }
.qr-code-wrap { display: flex; justify-content: center; margin: 6px 0 14px; }
.qr-code-img  { width: 260px; max-width: 100%; height: auto; border-radius: 12px;
                border: 1px solid #e2e8f0; padding: 10px; background: #fff; }
.qr-link      { color: #475569; font-size: 12px; line-height: 1.4; margin-bottom: 14px;
                overflow-wrap: anywhere; }
.qr-share-btn { width: 100%; border: none; border-radius: 10px; background: var(--btn, #1a7a4a);
                color: #fff; cursor: pointer; font-size: 14px; font-weight: 700; padding: 12px 16px; }
.qr-share-btn:hover { filter: brightness(.92); }
.product-modal-box { text-align: left; }
.product-modal-box .modal-close { width: 40px; height: 40px; border-radius: 50%;
                                  background: rgba(15,23,42,.72); color: #fff;
                                  display: flex; align-items: center; justify-content: center;
                                  top: 12px; right: 12px; z-index: 2; }
.product-modal-box .modal-close:hover { background: rgba(15,23,42,.9); }
.product-modal-image-wrap { margin: -24px -24px 18px; background: #f8fafb; }
.product-modal-image { width: 100%; max-height: 260px; object-fit: cover; display: block; }
.product-modal-title { padding-right: 34px; margin-bottom: 8px; }
.product-modal-desc { color: #475569; font-size: 14px; line-height: 1.65; margin-bottom: 14px;
                      white-space: pre-wrap; overflow-wrap: anywhere; }
.product-modal-price-row { align-items: baseline; display: flex; gap: 8px; margin-bottom: 16px; }
.product-modal-mrp { color: #94a3b8; font-size: 13px; text-decoration: line-through; }
.product-modal-price { color: var(--btn, #1a7a4a); font-size: 20px; font-weight: 800; }
.product-modal-buy { background: var(--btn, #1a7a4a); border-radius: 10px; color: #fff;
                     display: block; font-size: 14px; font-weight: 700; padding: 12px 16px;
                     text-align: center; text-decoration: none; }
.product-modal-buy:hover { color: #fff; filter: brightness(.92); }

/* ── Toast ───────────────────────────────────────────────────── */
.card-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px);
              background: #1a202c; color: #fff; padding: 10px 22px; border-radius: 20px;
              font-size: 13px; z-index: 9999; opacity: 0; transition: .3s; white-space: nowrap; }
.card-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 420px) {
  .card-wrapper {
    max-width: none;
    width: 100%;
    box-shadow: none;
  }
  .card-head { padding: 28px 16px 22px; }
  .card-company,
  .card-city { overflow-wrap: anywhere; }
  .action-row { gap: 4px; padding: 14px 10px; }
  .dc-action { min-width: 54px; }
  .dc-action-btn { width: 48px; height: 48px; }
  .nav-grid { grid-template-columns: repeat(2,1fr); }
  .grid-item:nth-child(2n) { border-right: none; }
  .grid-item:nth-child(4n) { border-right: none; }
  .card-section { padding: 18px 14px; }
  .feedback-card {
    align-items: stretch;
    flex-direction: column;
  }
  .feedback-btn { text-align: center; }
  .modal-overlay { padding: 10px; }
  .modal-box { padding: 20px 16px; }
  .product-modal-image-wrap { margin: -20px -16px 16px; }
  .product-modal-image { max-height: 220px; }
  .lightbox-close { top: 12px; right: 12px; }
  .card-toast {
    max-width: calc(100vw - 24px);
    white-space: normal;
    text-align: center;
  }
}