/* ════════════════════════════════════════════════════════ product.css — JioMart Product Detail Page Font: Plus Jakarta Sans (loaded in product.php ) ════════════════════════════════════════════════════════ */ /* ── Font override (applies to this page only) ─────────── */ *, body, input, button, select, textarea { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; } /* ── Design tokens ──────────────────────────────────────── */ :root { --jm-blue: #0C4FA1; --jm-blue-dark: #083d80; --jm-blue-light: #deeaf9; --jm-red: #E21F26; --jm-green: #138808; --jm-orange: #F7941D; --jm-yellow: #FFC220; --jm-text: #1c1c1c; --jm-text2: #4a4a4a; --jm-text3: #767676; --jm-bg: #f0f2f5; --jm-card: #ffffff; --jm-border: #e2e5ea; --jm-radius: 14px; --jm-shadow: 0 2px 12px rgba(0, 0, 0, .08); } body { background: var(--jm-bg) !important; color: var(--jm-text) !important; font-size: 14px !important; -webkit-font-smoothing: antialiased !important; } /* ── Layout ─────────────────────────────────────────────── */ .product-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .product-layout { grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; } } /* ── Breadcrumb ─────────────────────────────────────────── */ .jm-breadcrumb-bar { background: #fff; border-bottom: 1px solid var(--jm-border); } .breadcrumb { display: flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600; color: var(--jm-text3); flex-wrap: wrap; } .breadcrumb a { color: var(--jm-blue); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb-sep { color: #ccc; } .bc-current { color: var(--jm-text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; } /* ── Gallery ────────────────────────────────────────────── */ .gallery-col { display: flex; flex-direction: column; gap: .75rem; } .gallery-main-wrap { position: relative; background: #fff; border: 1px solid #efefef; border-radius: var(--jm-radius); overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 280px; max-height: 360px; padding: 1rem; } .gallery-main-wrap img { max-height: 320px; width: 100%; object-fit: contain; transition: opacity .25s ease, transform .25s ease; } .gallery-main-wrap img.fade-out { opacity: 0; transform: scale(.97); } .gallery-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .thumb-item { border: 2px solid var(--jm-border); border-radius: 10px; overflow: hidden; cursor: pointer; transition: border-color .18s, box-shadow .18s; background: #f9fafb; padding: .25rem; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; } .thumb-item img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; pointer-events: none; } .thumb-item:hover { border-color: #9ca3af; } .thumb-item.active { border-color: var(--jm-blue); box-shadow: 0 0 0 2px rgba(12, 79, 161, .2); } .gallery-zoom-btn { position: absolute; top: .75rem; right: .75rem; background: rgba(255, 255, 255, .9); border: 1px solid var(--jm-border); border-radius: 8px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #6b7280; transition: background .15s; z-index: 5; } .gallery-zoom-btn:hover { background: #fff; color: #111; } /* ── Trust badges ───────────────────────────────────────── */ .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .25rem; } .trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; background: #f7f9fc; border: 1px solid var(--jm-border); border-radius: 12px; padding: 10px 8px; } .trust-icon { font-size: 1.1rem; margin-bottom: 4px; } .trust-lbl { font-size: .65rem; font-weight: 800; color: var(--jm-text); line-height: 1.3; } .trust-sub { font-size: .6rem; color: var(--jm-text3); margin-top: 2px; } /* ── Info col ───────────────────────────────────────────── */ .info-col { display: flex; flex-direction: column; gap: 1rem; } /* ── Badges ─────────────────────────────────────────────── */ .badge-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .badge-blue { display: inline-block; background: var(--jm-blue-light); color: var(--jm-blue); font-size: .68rem; font-weight: 800; padding: 3px 10px; border-radius: 50px; } .badge-gray { display: inline-block; background: #f0f2f5; color: var(--jm-text2); font-size: .68rem; font-weight: 700; padding: 3px 10px; border-radius: 50px; text-decoration: none; transition: background .15s; } .badge-gray:hover { background: #e2e5ea; } /* ── Product name & unit ────────────────────────────────── */ .product-name { font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 900; color: var(--jm-text); line-height: 1.2; letter-spacing: -.3px; } .product-unit { font-size: .78rem; color: var(--jm-text3); font-weight: 600; margin-top: -4px; } .product-unit strong { color: var(--jm-text2); } /* ── Rating ─────────────────────────────────────────────── */ .rating-row { display: flex; align-items: center; gap: 6px; } .stars { display: flex; align-items: center; gap: 2px; } .rating-val { font-size: .82rem; font-weight: 800; color: var(--jm-text); } .rating-count { font-size: .72rem; color: var(--jm-text3); } /* ── Price block ────────────────────────────────────────── */ .price-block { background: #f7f9fc; border: 1px solid var(--jm-border); border-radius: var(--jm-radius); padding: 1rem 1.1rem; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; } .price-label { font-size: .65rem; color: var(--jm-text3); font-weight: 700; margin-bottom: 2px; } .price-main { font-size: 2rem; font-weight: 900; color: var(--jm-blue); letter-spacing: -.5px; line-height: 1; } .price-mrp { font-size: 1rem; color: #aaa; text-decoration: line-through; font-weight: 600; } .price-save { font-size: .82rem; font-weight: 800; color: var(--jm-green); background: #e6f4ea; padding: 3px 9px; border-radius: 6px; line-height: 1.6; } .stock-wrap { margin-left: auto; align-self: center; } .stock-in { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 800; color: var(--jm-green); } .stock-dot { width: 8px; height: 8px; background: var(--jm-green); border-radius: 50%; animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(1.3); } } .stock-out { font-size: .75rem; font-weight: 800; color: var(--jm-red); } /* ── Qty + Add to cart ──────────────────────────────────── */ .atc-row { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; } .qty-wrap { display: flex; flex-direction: column; gap: 4px; } .qty-label { font-size: .65rem; color: var(--jm-text3); font-weight: 700; } .qty-stepper { display: flex; align-items: center; border: 2px solid var(--jm-border); border-radius: 10px; overflow: hidden; width: fit-content; } .qty-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 800; color: var(--jm-blue); background: none; border: none; cursor: pointer; transition: background .15s; } .qty-btn:hover { background: var(--jm-blue-light); } .qty-btn:disabled { color: #ccc; cursor: not-allowed; } .qty-val { min-width: 36px; text-align: center; font-size: .9rem; font-weight: 800; color: var(--jm-text); border-left: 1.5px solid var(--jm-border); border-right: 1.5px solid var(--jm-border); padding: 0 6px; line-height: 36px; } .btn-atc { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--jm-blue); color: #fff; font-size: .92rem; font-weight: 800; padding: 11px 22px; border-radius: 12px; border: none; cursor: pointer; transition: background .15s, transform .1s; -webkit-tap-highlight-color: transparent; min-height: 44px; } .btn-atc:hover { background: var(--jm-blue-dark); } .btn-atc:active { transform: scale(.97); } /* ── Out of stock box ───────────────────────────────────── */ .oos-box { background: #fff5f5; border: 1px solid #fecaca; border-radius: var(--jm-radius); padding: 1rem; text-align: center; } .oos-title { font-weight: 800; color: var(--jm-red); margin-bottom: 4px; } .oos-sub { font-size: .78rem; color: var(--jm-text3); margin-bottom: .75rem; } .btn-outline-sm { display: inline-block; padding: 8px 20px; border: 1.5px solid var(--jm-blue); color: var(--jm-blue); border-radius: 10px; font-size: .78rem; font-weight: 800; text-decoration: none; transition: background .15s; } .btn-outline-sm:hover { background: var(--jm-blue-light); } /* ══════════════════════════════════════════════════ PINCODE SECTION ══════════════════════════════════════════════════ */ .pincode-section { background: #fff; border: 1.5px solid var(--jm-border); border-radius: var(--jm-radius); padding: 14px 15px; } .pincode-title { font-size: .78rem; font-weight: 800; color: var(--jm-text); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .pincode-input-row { display: flex; gap: 8px; align-items: stretch; } .pincode-input { flex: 1; height: 42px; border: 1.5px solid var(--jm-border); border-radius: 10px; padding: 0 12px; font-size: .88rem; font-weight: 700; color: var(--jm-text); outline: none; transition: border-color .18s, box-shadow .18s; -webkit-appearance: none; letter-spacing: 2px; background: #fafbfc; } .pincode-input::placeholder { color: var(--jm-text3); letter-spacing: normal; font-weight: 500; } .pincode-input:focus { border-color: var(--jm-blue); box-shadow: 0 0 0 3px rgba(12, 79, 161, .1); background: #fff; } .pincode-input.input-error { border-color: var(--jm-red); box-shadow: 0 0 0 3px rgba(226, 31, 38, .1); } .pincode-input.input-success { border-color: var(--jm-green); box-shadow: 0 0 0 3px rgba(19, 136, 8, .1); } .btn-check-pin { height: 42px; padding: 0 18px; background: var(--jm-blue); color: #fff; font-size: .78rem; font-weight: 800; border: none; border-radius: 10px; cursor: pointer; white-space: nowrap; transition: background .15s; -webkit-tap-highlight-color: transparent; min-width: 70px; } .btn-check-pin:disabled { background: #b0bec5; cursor: not-allowed; opacity: 0.65; } .btn-check-pin:hover { background: var(--jm-blue-dark); } .btn-check-pin:active { transform: scale(.97); } .pincode-msg { margin-top: 10px; font-size: .75rem; font-weight: 700; display: none; align-items: flex-start; gap: 7px; padding: 10px 12px; border-radius: 9px; line-height: 1.5; } .pincode-msg.show { display: flex; } .pincode-msg.msg-success { background: #e6f4ea; color: #155724; border: 1px solid #b7dfbf; } .pincode-msg.msg-error { background: #fdecea; color: #7b1010; border: 1px solid #f5b8b8; } .pincode-msg.msg-warn { background: #fff8e1; color: #6d4c0a; border: 1px solid #ffe082; } .pin-msg-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; } /* ── Delivery info ──────────────────────────────────────── */ .delivery-info-box { background: #f7f9fc; border: 1px solid var(--jm-border); border-radius: var(--jm-radius); padding: 13px 14px; display: flex; flex-direction: column; gap: 10px; } .delivery-title { font-size: .68rem; font-weight: 800; color: var(--jm-blue); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 2px; } .delivery-row { display: flex; align-items: flex-start; gap: 10px; } .delivery-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; } .delivery-head { font-size: .78rem; font-weight: 800; color: var(--jm-text); } .delivery-sub { font-size: .68rem; color: var(--jm-text3); margin-top: 2px; line-height: 1.4; } /* ── Tabs ───────────────────────────────────────────────── */ .tabs-card { background: #fff; border-radius: var(--jm-radius); box-shadow: var(--jm-shadow); border: 1px solid var(--jm-border); overflow: hidden; } .tab-bar { display: flex; border-bottom: 1px solid var(--jm-border); overflow-x: auto; } .tab-bar::-webkit-scrollbar { display: none; } .tab-btn { flex-shrink: 0; padding: .9rem 1.2rem; font-size: .78rem; font-weight: 700; border-bottom: 2.5px solid transparent; color: var(--jm-text3); background: none; border-left: none; border-right: none; border-top: none; cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s; -webkit-tap-highlight-color: transparent; } .tab-btn:hover { color: var(--jm-text); } .tab-btn.active-tab { border-bottom-color: var(--jm-blue); color: var(--jm-blue); } .tab-body { padding: 1.25rem 1.4rem; } .tab-panel {} .tab-panel.hidden { display: none; } /* Description */ .product-desc { font-size: .82rem; color: var(--jm-text2); line-height: 1.7; margin-bottom: 1rem; } .features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-top: .75rem; } @media (min-width: 480px) { .features-grid { grid-template-columns: repeat(3, 1fr); } } .feature-item { display: flex; align-items: center; gap: 6px; background: #f7f9fc; border-radius: 10px; padding: 8px 10px; font-size: .7rem; font-weight: 700; color: var(--jm-text2); } /* Details table */ .details-table { width: 100%; border-collapse: collapse; font-size: .78rem; } .row-white { background: #fff; } .row-gray { background: #f9fafb; } .detail-key { padding: 9px 14px; font-weight: 700; color: var(--jm-text3); width: 140px; border-bottom: 1px solid var(--jm-border); white-space: nowrap; } .detail-val { padding: 9px 14px; color: var(--jm-text); font-weight: 600; border-bottom: 1px solid var(--jm-border); } /* Reviews */ .reviews-top { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 1.25rem; } @media (min-width: 480px) { .reviews-top { flex-direction: row; align-items: flex-start; } } .review-score-box { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f7f9fc; border-radius: 14px; padding: 1.1rem 1.5rem; min-width: 110px; } .review-score-num { font-size: 2.8rem; font-weight: 900; color: var(--jm-text); line-height: 1; } .review-stars-sm { display: flex; gap: 2px; margin: 6px 0 4px; } .review-count-sm { font-size: .68rem; color: var(--jm-text3); } .review-bars { flex: 1; display: flex; flex-direction: column; gap: 6px; justify-content: center; } .review-bar-row { display: flex; align-items: center; gap: 6px; } .bar-star { font-size: .72rem; font-weight: 800; color: var(--jm-text2); width: 8px; } .bar-track { flex: 1; height: 7px; background: #f0f2f5; border-radius: 50px; overflow: hidden; } .bar-fill { height: 100%; background: var(--jm-orange); border-radius: 50px; transition: width .8s cubic-bezier(.16, 1, .3, 1); } .bar-count { font-size: .65rem; color: var(--jm-text3); width: 20px; text-align: right; } .review-card { border: 1px solid var(--jm-border); border-radius: 12px; padding: 13px 14px; margin-bottom: 10px; } .review-card:last-child { margin-bottom: 0; } .review-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; } .review-user-row { display: flex; align-items: center; gap: 8px; } .review-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--jm-blue-light); color: var(--jm-blue); font-weight: 900; font-size: .8rem; display: flex; align-items: center; justify-content: center; } .review-name { font-size: .78rem; font-weight: 800; color: var(--jm-text); } .review-date { font-size: .65rem; color: var(--jm-text3); } .review-text { font-size: .75rem; color: var(--jm-text2); line-height: 1.55; } /* ── Related / Product cards ────────────────────────────── */ .related-scroll { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; } .rp-card { flex-shrink: 0; width: 158px; } .product-card { background: #fff; border-radius: var(--jm-radius); border: 1px solid var(--jm-border); box-shadow: var(--jm-shadow); overflow: hidden; position: relative; transition: transform .18s, box-shadow .18s; } .product-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0, 0, 0, .12); } .card-img-wrap { background: #f7f8fa; border-bottom: 1px solid #f1f3f5; aspect-ratio: 1 / 1; overflow: hidden; display: flex; align-items: center; justify-content: center; } .card-img-wrap img { width: 100%; height: 100%; object-fit: contain; padding: 10px; transition: transform .25s ease; } .product-card:hover .card-img-wrap img { transform: scale(1.05); } .card-body { padding: 9px 10px 10px; display: flex; flex-direction: column; gap: 3px; } .card-name { font-size: .75rem; font-weight: 700; color: var(--jm-text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none; } .card-name:hover { color: var(--jm-blue); } .card-unit { font-size: .62rem; color: var(--jm-text3); font-weight: 600; } .card-price-row { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; } .card-price { font-size: .88rem; font-weight: 800; color: var(--jm-blue); } .card-mrp { font-size: .63rem; color: #aaa; text-decoration: line-through; font-weight: 600; margin-left: 4px; } .discount-badge { position: absolute; top: 7px; left: 7px; background: var(--jm-red); color: #fff; font-size: .58rem; font-weight: 800; padding: 2px 7px; border-radius: 50px; z-index: 3; letter-spacing: .2px; } .btn-add-cart { width: 30px; height: 30px; min-width: 30px; background: var(--jm-blue); color: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; transition: background .15s, transform .1s; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .btn-add-cart:hover { background: var(--jm-blue-dark); } .btn-add-cart:active { transform: scale(.92); } /* ── Lightbox ───────────────────────────────────────────── */ #imgLightbox { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .88); z-index: 9999; align-items: center; justify-content: center; } #imgLightbox.open { display: flex; } #imgLightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: .75rem; } .close-lb { position: absolute; top: 1rem; right: 1.25rem; color: #fff; font-size: 1.5rem; cursor: pointer; background: rgba(255, 255, 255, .1); border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: background .15s; } .close-lb:hover { background: rgba(255, 255, 255, .2); } /* ══════════════════════════════════════════════════ META IN-APP BROWSER POPUP ══════════════════════════════════════════════════ */ #jm-meta-popup { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, .65); align-items: flex-end; justify-content: center; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: jmFadeIn .25s ease; } #jm-meta-popup.show { display: flex; } @keyframes jmFadeIn { from { opacity: 0 } to { opacity: 1 } } .jm-meta-sheet { background: #fff; border-radius: 22px 22px 0 0; width: 100%; max-width: 480px; padding: 24px 22px 36px; text-align: center; animation: jmSlideUp .3s cubic-bezier(.16, 1, .3, 1); box-shadow: 0 -8px 40px rgba(0, 0, 0, .18); } @keyframes jmSlideUp { from { transform: translateY(100%) } to { transform: translateY(0) } } .jm-meta-handle { width: 40px; height: 4px; background: #e2e5ea; border-radius: 4px; margin: 0 auto 16px; } .jm-meta-icon { width: 60px; height: 60px; background: #fff3cd; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin: 0 auto 12px; border: 2px solid #ffe69c; } .jm-meta-sheet h3 { font-size: 1rem; font-weight: 900; color: #1c1c1c; margin-bottom: 6px; } .jm-meta-sheet>p { font-size: .78rem; color: #6b7280; line-height: 1.55; margin-bottom: 16px; max-width: 300px; margin-left: auto; margin-right: auto; } .jm-meta-steps { background: #f7f8fa; border: 1px solid #e8eaed; border-radius: 12px; padding: 12px 14px; text-align: left; margin-bottom: 16px; } .jm-meta-steps-title { font-size: .72rem; font-weight: 800; color: #1c1c1c; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .jm-meta-step { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 8px; } .jm-meta-step:last-child { margin-bottom: 0; } .jm-step-num { width: 20px; height: 20px; background: var(--jm-blue); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 800; flex-shrink: 0; margin-top: 1px; } .jm-step-txt { font-size: .72rem; color: #4a4a4a; line-height: 1.45; font-weight: 600; } .jm-step-txt strong { color: #1c1c1c; font-weight: 800; } .jm-meta-btn-primary { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 13px; background: var(--jm-blue); color: #fff; border: none; border-radius: 12px; font-size: .88rem; font-weight: 800; cursor: pointer; margin-bottom: 8px; transition: background .15s; -webkit-tap-highlight-color: transparent; } .jm-meta-btn-primary:active { background: var(--jm-blue-dark); } .jm-meta-btn-skip { display: block; width: 100%; padding: 10px; background: none; color: #767676; border: 1.5px solid #e2e5ea; border-radius: 12px; font-size: .75rem; font-weight: 700; cursor: pointer; transition: border-color .15s, color .15s; -webkit-tap-highlight-color: transparent; } .jm-meta-btn-skip:active { border-color: #aaa; color: #444; } /* ── Utilities ──────────────────────────────────────────── */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { scrollbar-width: none; } .hidden { display: none !important; } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .section-title { font-size: 1rem; font-weight: 800; color: var(--jm-text); } .section-link { font-size: .75rem; font-weight: 700; color: var(--jm-blue); text-decoration: none; } .section-link:hover { text-decoration: underline; } /* ── Pincode success delivery card ─────────────────────── */ .pin-success-main { font-size: .78rem; color: #155724; margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid #b7dfbf; } .pin-delivery-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .pin-delivery-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #b7dfbf; border-radius: 9px; padding: 8px 11px; } .pin-d-icon { font-size: 1.1rem; flex-shrink: 0; } .pin-d-label { display: block; font-size: .7rem; font-weight: 700; color: #155724; line-height: 1.2; } .pin-d-date { display: block; font-size: .68rem; color: #4a4a4a; margin-top: 2px; } .pin-d-date strong { color: #0C4FA1; font-weight: 800; } .pin-free-tag { font-size: .7rem; font-weight: 700; color: #155724; background: #d4edda; border-radius: 7px; padding: 5px 10px; text-align: center; } /* pincode-msg success layout override */ .pincode-msg.msg-success { display: block; /* override flex for rich content */ padding: 12px 13px; } #pincodeMsg { display: none; margin-top: 10px; border-radius: 10px; font-size: .8rem; line-height: 1.5; overflow: hidden; } #pincodeMsg.pin-visible { display: block !important; } #pincodeMsg.msg-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; padding: 10px 13px; display: flex; align-items: flex-start; gap: 8px; } #pincodeMsg.msg-success { background: #f0fdf4; border: 1px solid #86efac; color: #15803d; padding: 12px 13px; } .pin-msg-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; } .pin-success-main { font-size: .78rem; color: #155724; margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid #b7dfbf; } .pin-delivery-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .pin-delivery-row { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #b7dfbf; border-radius: 9px; padding: 8px 11px; } .pin-d-icon { font-size: 1.1rem; flex-shrink: 0; } .pin-d-label { display: block; font-size: .7rem; font-weight: 700; color: #155724; line-height: 1.2; } .pin-d-date { display: block; font-size: .68rem; color: #4a4a4a; margin-top: 2px; } .pin-d-date strong { color: #0C4FA1; font-weight: 800; } .pin-free-tag { font-size: .7rem; font-weight: 700; color: #155724; background: #d4edda; border-radius: 7px; padding: 5px 10px; text-align: center; } .input-success { border-color: #16a34a !important; box-shadow: 0 0 0 3px rgba(22, 163, 74, .15) !important; } .input-error { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important; }