/* ========================================================= KotaShaadi.com - Common CSS Homepage CSS extracted from original index.html + Vendor registration form CSS ========================================================= */ :root { --wine: #7B123C; --wine-deep: #47061F; --rani: #B51755; --rose: #DD5D8E; --lotus: #F9D9E7; --champagne: #D9B86A; --champagne-soft: #F7E8BB; --ivory: #FFF8ED; --ivory-2: #FFF0D8; --pearl: #FFFDF8; --ink: #22101E; --muted: #796372; --line: rgba(123, 18, 60, 0.14); --gold-line: rgba(217, 184, 106, 0.45); --shadow: 0 22px 60px rgba(71, 6, 31, 0.15); --soft-shadow: 0 12px 34px rgba(71, 6, 31, 0.09); --radius: 26px; --radius-sm: 17px; --max: 1120px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body, h1, h2, h3, p { margin: 0; } body { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: radial-gradient(circle at 12% -2%, rgba(217, 184, 106, .18), transparent 31%), radial-gradient(circle at 93% 5%, rgba(181, 23, 85, .13), transparent 28%), linear-gradient(180deg, var(--ivory) 0%, #fffaf5 48%, #fff6fb 100%); -webkit-tap-highlight-color: transparent; overscroll-behavior-x: none; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } button, a, .day-cell, .choice-card, .need-card { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } button > *, a > * { pointer-events: none; } .popup-panel, .popup-panel * { pointer-events: auto; } .popup-panel { max-width: 100%; } body.popup-open { overflow: hidden; touch-action: none; } img, svg { display: block; } img { max-width: 100%; } .hidden { display: none !important; } .container { width: min(100% - 32px, var(--max)); margin: 0 auto; } .page { min-height: 100vh; padding-bottom: 78px; } .topbar { position: sticky; top: 0; z-index: 40; background: rgba(255, 248, 237, 0.92); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(217, 184, 106, 0.34); } .nav { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .logo-mark { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 18%, #fff 0 28%, var(--ivory) 48%, #f7dfed 100%); border: 2px solid var(--wine); box-shadow: 0 0 0 3px rgba(217,184,106,.38), var(--soft-shadow); overflow: hidden; flex: 0 0 auto; } .logo-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .logo-fallback { display: none; flex-direction: column; align-items: center; line-height: .86; transform: translateY(1px); } .logo-fallback .kota { font-family: Georgia, serif; color: var(--wine-deep); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; } .logo-fallback .shaadi { font-family: Georgia, serif; color: var(--rani); font-size: 17px; font-weight: 950; letter-spacing: -.02em; } .logo-fallback .dotcom { color: var(--wine-deep); font-size: 7px; font-weight: 900; letter-spacing: .11em; } .brand-copy strong { display: block; color: var(--wine-deep); font-size: 1.12rem; line-height: 1; } .brand-copy > span { display: block; margin-top: 4px; color: var(--muted); font-size: .55rem; font-weight: 750; line-height: 1.15; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; } .nav-links { display:none; align-items: center; gap: 18px; color: var(--muted); font-size: .78rem; font-weight: 900; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 13px 18px; border-radius: 999px; font-weight: 950; border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; text-align: center; line-height: 1.1; } .btn:active { transform: scale(.985); } .btn-primary { color: #fff; background: linear-gradient(135deg, var(--wine), var(--rani) 58%, #C84475); box-shadow: 0 14px 30px rgba(181, 23, 85, .22); } .btn-secondary { color: var(--wine); background: rgba(255,255,255,.84); border-color: var(--gold-line); box-shadow: var(--soft-shadow); } .btn-dark { color:#fff; background: var(--wine-deep); } .btn-gold { color: var(--wine-deep); background: linear-gradient(135deg, var(--champagne-soft), var(--champagne)); } .btn-small { min-height: 42px; padding: 10px 14px; font-size: .83rem; } .btn-full { width: 100%; } .hero { padding: 38px 0 30px; overflow: hidden; } .hero-grid { display: grid; gap: 22px; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; color: var(--wine); background: rgba(255,255,255,.64); border: 1px solid var(--gold-line); font-size: .68rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rani); box-shadow: 0 0 0 5px rgba(181,23,85,.1); } h1 { margin-top: 15px; font-size: clamp(2.35rem, 12vw, 5.1rem); line-height: .95; letter-spacing: -.07em; color: var(--wine-deep); } h1 .accent { color: var(--rani); font-family: Georgia, serif; letter-spacing: -.055em; } .lead { margin-top: 16px; color: var(--muted); font-size: 1.02rem; line-height: 1.62; font-weight: 650; max-width: 38rem; } .hero-actions { display: grid; gap: 10px; margin-top: 20px; } .hero-note { margin-top: 12px; color: rgba(71,6,31,.62); font-size: .75rem; font-weight: 850; text-transform: uppercase; letter-spacing: .09em; } .hero-card { border-radius: 32px; padding: 12px; background: rgba(255,255,255,.62); border: 1px solid var(--gold-line); box-shadow: var(--shadow); } .photo-box { min-height: 320px; border-radius: 26px; overflow: hidden; position: relative; background: linear-gradient(135deg, var(--wine-deep), var(--rani)); } .photo-box img { width:100%; height:100%; min-height:320px; object-fit:cover; opacity:.82; } .photo-box::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(71,6,31,.04), rgba(71,6,31,.68)); } .photo-content { position:absolute; z-index:1; left:18px; right:18px; bottom:18px; color:#fff; } .photo-content h2 { margin-top:10px; font-size:2.25rem; line-height:.95; letter-spacing:-.06em; } .photo-content p { margin-top:8px; color:#ffe6f0; line-height:1.45; font-weight:700; } .feature-pill { display:inline-flex; border: 1px solid rgba(247,232,187,.55); color: #fff8dd; background: rgba(255,255,255,.12); backdrop-filter: blur(10px); padding: 8px 11px; border-radius: 999px; font-size: .66rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; } .mini-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; } .mini-stat { background:#fff; border:1px solid var(--gold-line); border-radius:18px; padding:12px 8px; text-align:center; } .mini-stat strong { color:var(--wine-deep); } .mini-stat span { display:block; color: var(--muted); font-size:.68rem; font-weight:850; text-transform:uppercase; letter-spacing:.08em; margin-top:3px; } .trust-strip { padding: 0 0 26px; } .trust-grid { display:grid; gap:10px; } .trust-item { display:flex; gap:10px; align-items:flex-start; background:rgba(255,255,255,.72); border:1px solid var(--gold-line); border-radius:20px; padding:14px; box-shadow:var(--soft-shadow); } .trust-item span { color: var(--rani); font-weight:900; } .trust-item b { color:var(--wine-deep); } .trust-item div { color:var(--muted); font-size:.86rem; line-height:1.45; font-weight:700; } section { padding: 48px 0; } .section-head { text-align:center; margin-bottom:22px; } .section-kicker { color: var(--rani); font-size: .72rem; font-weight: 950; text-transform: uppercase; letter-spacing: .16em; } .section-head h2 { margin-top:8px; color: var(--wine-deep); font-size: clamp(2rem, 8vw, 3.55rem); line-height:.98; letter-spacing:-.06em; } .section-head p { margin:12px auto 0; max-width: 42rem; color:var(--muted); line-height:1.6; font-weight:650; } .cards { display:grid; gap:14px; } .card, .step, .side-note, .featured-box, .faq details, .cta-panel { background: rgba(255,255,255,.78); border:1px solid var(--gold-line); border-radius: var(--radius); box-shadow: var(--soft-shadow); } .card { padding:18px; } .card-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:16px; background:#fff5fb; color: var(--rani); font-size:1.45rem; font-weight:950; } .card h3 { margin-top:14px; color: var(--wine-deep); font-size:1.18rem; } .card p { margin-top:9px; color:var(--muted); line-height:1.55; font-weight:650; } .tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; } .tag { display:inline-flex; padding:7px 10px; border-radius:999px; background:#fff; border:1px solid var(--line); color:var(--wine); font-size:.74rem; font-weight:900; } .card-cta { margin-top: 15px; width: 100%; } .featured { background: linear-gradient(180deg, rgba(123,18,60,.05), rgba(217,184,106,.08)); } .featured-box { display:grid; gap:16px; overflow:hidden; padding:14px; } .venue-visual { min-height:260px; border-radius:24px; overflow:hidden; position:relative; background:#fff0f7; } .venue-visual img { width:100%; height:100%; min-height:260px; object-fit:cover; } .venue-copy { padding:8px 4px 8px; } .venue-copy h2 { color:var(--wine-deep); font-size:2.05rem; line-height:.98; letter-spacing:-.05em; } .venue-copy p { margin-top:10px; color:var(--muted); line-height:1.6; font-weight:650; } .price-line { margin-top:14px; padding:12px 14px; border-radius:18px; color:var(--wine); background:#fff8ed; border:1px solid var(--gold-line); font-weight:950; } .facility-list { list-style:none; padding:0; margin:16px 0 0; display:grid; grid-template-columns:repeat(2,1fr); gap:9px; } .facility-list li { padding:10px; border-radius:14px; background:#fff; color:var(--wine-deep); border:1px solid rgba(123,18,60,.11); font-size:.82rem; font-weight:850; } .dark { background: linear-gradient(135deg, var(--wine-deep), #75113A); color:#fff; } .dark .section-head h2, .dark .card h3, .dark .vendor-cta h2 { color:#fff; } .dark .section-head p, .dark .card p, .dark .vendor-cta p { color:#f3ddeb; } .dark .card { background: rgba(255,255,255,.08); border-color: rgba(247,232,187,.2); box-shadow: none; } .dark .card-icon { background: rgba(255,255,255,.12); color: var(--champagne-soft); } .vendor-cta { text-align:center; padding: 24px; border-radius: 32px; background: rgba(255,255,255,.08); border:1px solid rgba(247,232,187,.2); } .vendor-cta p { margin: 12px auto 0; max-width: 42rem; line-height:1.6; font-weight:650; } .cta-panel { padding: 22px; text-align:center; background: linear-gradient(135deg, #fff, var(--ivory)); } .cta-panel h2 { color: var(--wine-deep); font-size: 2rem; line-height:1; letter-spacing:-.05em; } .cta-panel p { color:var(--muted); margin: 11px auto 0; line-height:1.55; max-width: 36rem; font-weight:650; } .cta-actions { display:grid; gap:10px; margin-top:18px; } .steps { display:grid; gap: 12px; } .step { padding: 18px; } .step h3 { display:flex; align-items:center; gap:9px; color:var(--wine-deep); } .step-icon { width:28px; height:28px; flex:0 0 28px; display:inline-grid; place-items:center; font-size:1.15rem; } .step-icon svg { width:21px; height:21px; fill:#25D366; } .step p { margin-top:8px; color:var(--muted); line-height:1.55; font-weight:650; } .faq { display:grid; gap: 10px; } .faq details { padding: 16px; } summary { cursor:pointer; font-weight:950; color:var(--wine-deep); } details p { color:var(--muted); margin:10px 0 0; line-height:1.55; font-weight:650; } .footer { background: linear-gradient(135deg, #270315, var(--wine-deep)); color:#fff; min-height: 240px; display: grid; align-items: center; padding: 36px 0; border-top: 1px solid rgba(241,219,157,.25); } .footer p { color:#f0dfbd; margin:10px 0 0; line-height:1.55; } .sticky-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: rgba(255,248,237,.94); backdrop-filter: blur(16px); border-top: 1px solid rgba(217,184,106,.45); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .lead-popup { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 12px; opacity: 0; pointer-events: none; transition: opacity .22s ease; } .lead-popup.hidden { display:none !important; } .lead-popup.is-visible { opacity: 1; pointer-events: auto; } .popup-backdrop { position:absolute; inset:0; background: rgba(34,16,30,.68); backdrop-filter: blur(4px); } .popup-panel { position: relative; width: min(95vw, 560px); height: min(94dvh, 610px); overflow: hidden; background: linear-gradient(180deg, #fff, var(--ivory)); border: 2px solid var(--champagne); border-radius: 28px; box-shadow: 0 30px 90px rgba(0,0,0,.35); padding: 15px; transform: translateY(18px) scale(.98); transition: transform .22s ease; display:flex; flex-direction:column; } .lead-popup.is-visible .popup-panel { transform: translateY(0) scale(1); } .popup-close { position:absolute; top:9px; right:9px; width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--wine); font-size:1.8rem; font-weight:900; line-height:1; display:grid; place-items:center; cursor:pointer; z-index:2; } .popup-kicker { display:none; padding:7px 10px; border-radius:999px; background:#fff4fb; color:var(--rani); border:1px solid var(--line); font-size:.66rem; font-weight:950; letter-spacing:.12em; text-transform:uppercase; } .popup-title { margin-top:13px; padding-right:46px; color:var(--wine-deep); font-size:1.6rem; line-height:1.04; letter-spacing:-.05em; } .popup-desc { display:none; } .step-progress { display:grid; grid-template-columns: repeat(6, 1fr); gap:6px; margin: 14px 0; } .progress-dot { height:5px; border-radius:999px; background:#f4e1e8; } .progress-dot.active { background: linear-gradient(90deg, var(--wine), var(--rani)); } .popup-step { display:none; } .popup-step.active { display:block; flex:1 1 auto; overflow-y:auto; padding: 2px 2px 8px; } .popup-footer { display:grid; grid-template-columns: 1fr 1.35fr; gap:10px; margin-top:auto; padding-top:14px; flex-shrink:0; background: linear-gradient(180deg, rgba(255,255,255,0.78), #fff); } .popup-footer .btn { min-height:50px; } /* Satkar-style compact calendar */ .calendar-card { width: 100%; background: #fff; border-radius: 1.35rem; padding: .78rem; border: 2px solid #f0cf80; box-shadow: 0 18px 44px -24px rgba(15, 23, 42, 0.72); overflow:hidden; } .calendar-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom: .85rem; } .month-btn { width: 3.1rem; height: 3.1rem; min-width:3.1rem; display:grid; place-items:center; border-radius: 1.05rem; background:#fff8ed; color:var(--wine); border:1px solid var(--gold-line); cursor:pointer; } .month-btn:disabled { opacity:.35; cursor:not-allowed; } #currentMonthYear { color:#111827; font-size:1.22rem; font-weight:950; font-style:italic; letter-spacing:-.03em; white-space:nowrap; text-align:center; } .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; } .weekday { text-align:center; color:#9c8792; font-size:9px; font-weight:950; letter-spacing:.08em; } .day-cell { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 10px; font-size: .82rem; background: #fff; transition: all 0.18s ease; border: 1.5px solid #eadce2; position: relative; user-select: none; min-height: 30px; font-weight: 900; color: var(--wine-deep); } .day-cell:active:not(.past-day):not(.empty-day) { transform: scale(0.94); background:#fff4fb; border-color:var(--rani); } .day-cell.selected-day { background: linear-gradient(135deg, var(--wine), var(--rani)); color:#fff; border-color: transparent; box-shadow: 0 9px 18px rgba(181,23,85,.22); } .past-day { color:#cfbdc6 !important; background:#faf7f9; border-color:#f0e7ec; cursor:not-allowed; } .empty-day { visibility:hidden; pointer-events:none; border-color:transparent; background:transparent; box-shadow:none; } .choice-grid, .need-grid { display:grid; gap:10px; } .choice-card, .need-card { border:1.5px solid var(--line); background:#fff; border-radius:17px; padding:13px; cursor:pointer; display:flex; gap:10px; align-items:flex-start; position:relative; } .choice-card input, .need-card input { position:absolute; opacity:0; pointer-events:none; } .choice-card strong, .need-card strong { display:block; color:var(--wine-deep); line-height:1.15; } .choice-card span, .need-card span { display:block; margin-top:3px; color:var(--muted); font-size:.78rem; font-weight:750; line-height:1.35; } .choice-card::before, .need-card::before { content:""; flex:0 0 auto; width:22px; height:22px; border-radius:50%; border:2px solid #e7c9d5; background:#fff; margin-top:1px; } .need-card::before { border-radius:7px; } .choice-card:has(input:checked), .need-card:has(input:checked) { border-color: var(--rani); background:#fff4fb; box-shadow:0 10px 22px rgba(181,23,85,.10); } .choice-card:has(input:checked)::before, .need-card:has(input:checked)::before { background: linear-gradient(135deg, var(--wine), var(--rani)); border-color: transparent; box-shadow: inset 0 0 0 5px #fff; } .field-grid { display:grid; gap:12px; } label.field-label { display:block; color:var(--wine-deep); font-size:.78rem; font-weight:950; margin: 0 0 7px; } input, select, textarea { width:100%; border:1px solid var(--line); border-radius:16px; padding:14px; background:#fff; color: var(--ink); outline:none; font: inherit; } textarea { min-height: 190px; resize: vertical; line-height: 1.45; } input:focus, select:focus, textarea:focus { border-color: var(--rani); box-shadow: 0 0 0 4px rgba(181,23,85,.08); } .vendor-progress { grid-template-columns: repeat(4, 1fr); } .final-cta-card { background:#fff; border:1px solid var(--gold-line); border-radius:20px; padding:16px; color:var(--muted); font-weight:800; line-height:1.55; } .review-card { background:#fff; border:1px solid var(--gold-line); border-radius:20px; padding:14px; display:grid; gap:9px; } .review-row { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid #f2e4d5; padding-bottom:8px; color:var(--muted); font-size:.86rem; font-weight:800; } .review-row:last-child { border-bottom:0; padding-bottom:0; } .review-row strong { color:var(--wine-deep); text-align:right; } .wa-btn { background:#25D366; color:#fff; box-shadow:0 12px 24px -8px rgba(37, 211, 102, 0.4); } @media (max-width: 380px) { .container { width: min(100% - 24px, var(--max)); } .brand-copy > span { display:none; }} .facility-list { grid-template-columns: 1fr; } .popup-panel { padding: 12px; border-radius: 22px; width: calc(100vw - 10px); height: min(94dvh, 610px); } .popup-title { font-size: 1.38rem; } .calendar-grid { gap:4px; } .day-cell { min-height: 28px; border-radius:8px; font-size:.76rem; } .month-btn { width:2.55rem; height:2.55rem; min-width:2.55rem; border-radius:.86rem; } #currentMonthYear { font-size:1.05rem; } } @media (min-width: 720px) { .page { padding-bottom: 0; } .hero-actions { grid-template-columns: max-content max-content; } .trust-grid { grid-template-columns: repeat(3,1fr); } .cards { grid-template-columns: repeat(3,1fr); } .featured-box { grid-template-columns: .92fr 1.08fr; padding:24px; } .choice-grid { grid-template-columns: repeat(2,1fr); } .need-grid { grid-template-columns: repeat(2,1fr); } .field-grid { grid-template-columns: 1fr 1fr; } .steps { grid-template-columns: repeat(3,1fr); } .cta-actions { grid-template-columns: max-content max-content; justify-content:center; } .sticky-mobile { display:none; } .footer { padding-bottom:36px; } } @media (min-width: 920px) { .nav-links { display:flex; } .hero { padding: 72px 0 52px; } .hero-grid { grid-template-columns: 1.05fr .95fr; } section { padding: 80px 0; } .popup-panel { padding: 18px; } } /* ===== v10 popup spacing refinement ===== */ #lead-popup .popup-panel { height: min(92dvh, 540px); } #vendor-popup .popup-panel { width: min(94vw, 480px); height: min(88dvh, 430px); } .popup-step.active { min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } #step-gathering .choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } #step-gathering .choice-card { min-height: 64px; align-items: center; } #vendor-popup .field-grid { grid-template-columns: 1fr !important; } #vendor-popup input, #vendor-popup textarea { width: 100%; } #vendor-popup textarea { min-height: 128px; } #vendor-popup .popup-footer, #lead-popup .popup-footer { border-top: 1px solid rgba(217,184,106,.22); } @media (max-width: 720px) { #lead-popup .popup-panel { height: min(92dvh, 560px); } #vendor-popup .popup-panel { width: calc(100vw - 24px); height: min(86dvh, 430px); } #step-gathering .choice-grid { grid-template-columns: 1fr; } } @media (max-width: 380px) { #lead-popup .popup-panel { height: min(92dvh, 540px); } #vendor-popup .popup-panel { height: min(86dvh, 405px); } } /* ===== v11 popup content utilization: vertical selection cards ===== */ #lead-popup .choice-grid, #lead-popup .need-grid { grid-template-columns: 1fr !important; gap: 9px !important; } #lead-popup .choice-card, #lead-popup .need-card { width: 100%; min-height: 58px; padding: 12px 14px; align-items: center; } #lead-popup .choice-card strong, #lead-popup .need-card strong { font-size: .94rem; line-height: 1.15; } #lead-popup .choice-card span, #lead-popup .need-card span { margin-top: 2px; font-size: .74rem; line-height: 1.25; } #step-gathering .choice-grid { grid-template-columns: 1fr !important; } #step-gathering .choice-card { min-height: 62px; } #step-location .need-card { min-height: 52px; } #step-function-type .choice-card { min-height: 62px; } #lead-popup .popup-step.active, #vendor-popup .popup-step.active { overflow-x: hidden !important; } @media (min-width: 720px) { #lead-popup .choice-grid, #lead-popup .need-grid, #step-gathering .choice-grid { grid-template-columns: 1fr !important; } } @media (max-width: 380px) { #lead-popup .choice-card, #lead-popup .need-card { min-height: 54px; padding: 11px 12px; } } /* ===== v12 popup UX refinements ===== */ #step-contact .field-grid { grid-template-columns: 1fr !important; max-width: 480px; margin: 0 auto; } #step-contact input { min-height: 58px; } #vendor-popup .popup-panel { width: min(94vw, 500px) !important; height: auto !important; min-height: 0 !important; max-height: min(86dvh, 560px) !important; overflow-y: auto !important; } #vendor-popup .step-progress { display: none !important; } #vendor-popup .popup-title { margin-bottom: 16px; } #vendor-popup .popup-step.active { overflow: visible !important; padding-bottom: 4px !important; } #vendor-popup .vendor-one-screen-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } #vendor-popup input, #vendor-popup textarea { min-height: 54px; border-radius: 16px; } #vendor-popup textarea { min-height: 104px !important; resize: vertical; } #vendor-popup .popup-footer { margin-top: 16px !important; padding-top: 12px !important; } @media (max-width: 480px) { #vendor-popup .popup-panel { width: calc(100vw - 22px) !important; max-height: min(88dvh, 540px) !important; } #step-contact .field-grid { max-width: none; } } /* ===== v14: fullscreen customer popup + compact one-screen vendor listing ===== */ #lead-popup { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; } #lead-popup .popup-panel { width: 100dvw !important; height: 100dvh !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; padding: clamp(14px, 2.2vw, 28px) !important; } #lead-popup .popup-close { top: clamp(10px, 1.4vw, 18px) !important; right: clamp(10px, 1.4vw, 18px) !important; } #lead-popup .popup-title, #lead-popup .step-progress, #lead-popup .popup-step.active, #lead-popup .popup-footer { width: min(100%, 760px) !important; margin-left: auto !important; margin-right: auto !important; } #lead-popup .popup-title { margin-top: clamp(18px, 3dvh, 34px) !important; padding-right: 60px !important; } #lead-popup .popup-step.active { flex: 1 1 auto !important; max-height: none !important; padding-bottom: 14px !important; } #lead-popup .popup-footer { position: sticky !important; bottom: 0 !important; padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; margin-top: 10px !important; } #step-contact .field-grid, #step-budget-send .field-grid { grid-template-columns: 1fr !important; gap: 14px !important; width: min(100%, 540px) !important; } #step-contact input, #step-budget-send input { min-height: 58px !important; font-size: 1rem !important; } #vendor-popup .popup-panel { width: min(94vw, 480px) !important; height: auto !important; min-height: 0 !important; max-height: min(88dvh, 620px) !important; border-radius: 24px !important; padding: 18px !important; } #vendor-popup .popup-title { margin-top: 8px !important; font-size: 1.45rem !important; } #vendor-popup .popup-step.active { flex: 0 1 auto !important; overflow-y: auto !important; padding-bottom: 8px !important; } #vendor-popup .vendor-one-screen-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; } #vendor-popup textarea { min-height: 110px !important; max-height: 180px !important; } #vendor-popup .popup-footer { margin-top: 12px !important; padding-top: 12px !important; position: static !important; } @media (max-width: 720px) { #lead-popup .popup-title, #lead-popup .step-progress, #lead-popup .popup-step.active, #lead-popup .popup-footer { width: 100% !important; } #lead-popup .popup-title { margin-top: 34px !important; } #vendor-popup .popup-panel { width: calc(100vw - 20px) !important; max-height: calc(100dvh - 24px) !important; } } /* ===== v15 public upload cleanup: standard brand text + cleaner sections ===== */ .brand-text { display: inline-flex; align-items: baseline; gap: 0.015em; white-space: nowrap; font-weight: inherit; letter-spacing: inherit; } .brand-text .brand-kota { color: #C9973F; font-family: Georgia, "Times New Roman", serif; font-weight: 950; } .brand-text .brand-shaadi { color: var(--wine-deep); font-weight: 950; } .brand-text .brand-dotcom { color: var(--rani); font-size: .78em; font-weight: 950; margin-left: .03em; } .brand-text.on-dark .brand-kota { color: var(--champagne-soft); } .brand-text.on-dark .brand-shaadi { color: #ffffff; text-shadow: 0 1px 0 rgba(0,0,0,.08); } .brand-text.on-dark .brand-dotcom { color: #F7E8BB; } .brand-copy strong .brand-text { font-size: inherit; } .footer .brand-copy strong { color: #fff !important; } .planning-section { background: radial-gradient(circle at 8% 10%, rgba(217, 184, 106, .18), transparent 28%), radial-gradient(circle at 92% 0%, rgba(181, 23, 85, .10), transparent 30%), linear-gradient(180deg, #FFF2F7 0%, #FFF7ED 100%); border-top: 1px solid rgba(217,184,106,.22); border-bottom: 1px solid rgba(217,184,106,.22); } .services-section { background: linear-gradient(180deg, #FFFDF8 0%, #FFF4E4 100%); } .section-head.section-head-compact { margin-bottom: 26px; } .section-head.section-head-compact p { display: none !important; } .vendor-cta p, .cta-panel p, .footer p.optional-copy { display: none !important; } .dark.vendor-dark { background: radial-gradient(circle at 10% 8%, rgba(249,217,231,.12), transparent 35%), linear-gradient(135deg, #4A061F 0%, #7B123C 58%, #8F1747 100%); } .vendor-cta-clean { max-width: 800px; margin: 0 auto; padding: 28px 18px; } .vendor-cta-clean h2 { max-width: 760px; margin: 0 auto; line-height: 1.08; letter-spacing: -.035em; } @media (min-width: 720px) { .vendor-cta-clean { padding: 38px 24px; } } /* ===== v16 rollback: compact lead popup + standard Kota/Shaadi.com brand colors ===== */ .brand-text .brand-kota { color: var(--ink) !important; font-family: inherit !important; font-weight: inherit !important; } .brand-text .brand-shaadi { color: var(--rani) !important; font-weight: 950 !important; } .brand-text .brand-dotcom { color: var(--ink) !important; font-weight: 950 !important; } .brand-text .brand-dotcom { font-size: .78em; margin-left: .03em; } .brand-text.on-dark .brand-kota { color: #ffffff !important; font-family: inherit !important; } .brand-text.on-dark .brand-shaadi { color: var(--champagne-soft) !important; text-shadow: 0 1px 0 rgba(0,0,0,.12); } .brand-text.on-dark .brand-dotcom { color: #ffffff !important; text-shadow: 0 1px 0 rgba(0,0,0,.12); } .brand-copy strong .brand-kota, .brand-copy strong .brand-dotcom { color: var(--wine-deep) !important; } .brand-copy strong .brand-shaadi { color: var(--rani) !important; } .footer .brand-copy strong .brand-kota, .footer .brand-copy strong .brand-dotcom { color: #ffffff !important; } .footer .brand-copy strong .brand-shaadi { color: var(--champagne-soft) !important; } #lead-popup { padding: 12px !important; align-items: center !important; justify-content: center !important; } #lead-popup .popup-panel { width: min(95vw, 560px) !important; height: min(92dvh, 560px) !important; max-width: 100% !important; max-height: calc(100dvh - 24px) !important; border-radius: 28px !important; border: 2px solid var(--champagne) !important; box-shadow: 0 30px 90px rgba(0,0,0,.35) !important; padding: 15px !important; background: linear-gradient(180deg, #fff, var(--ivory)) !important; overflow: hidden !important; } #lead-popup .popup-title, #lead-popup .step-progress, #lead-popup .popup-step.active, #lead-popup .popup-footer { width: auto !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } #lead-popup .popup-title { margin-top: 0 !important; padding-right: 58px !important; } #lead-popup .popup-step.active { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 2px 2px 8px !important; } #lead-popup .popup-footer { margin-top: auto !important; padding-top: 14px !important; flex-shrink: 0 !important; background: linear-gradient(180deg, rgba(255,255,255,0.78), #fff) !important; } @media (max-width: 720px) { #lead-popup .popup-panel { width: calc(100vw - 18px) !important; height: min(92dvh, 560px) !important; border-radius: 24px !important; padding: 13px !important; } } @media (max-width: 380px) { #lead-popup .popup-panel { width: calc(100vw - 10px) !important; height: min(92dvh, 540px) !important; border-radius: 20px !important; padding: 11px !important; } } /* ===== v17: keep KotaShaadi.com brand text in one line everywhere ===== */ .brand-copy .brand-text, .brand-text { display: inline-flex !important; flex-direction: row !important; align-items: baseline !important; gap: 0 !important; white-space: nowrap !important; word-break: keep-all !important; overflow-wrap: normal !important; text-transform: none !important; line-height: 1 !important; } .brand-copy .brand-text .brand-kota, .brand-copy .brand-text .brand-shaadi, .brand-copy .brand-text .brand-dotcom, .brand-text .brand-kota, .brand-text .brand-shaadi, .brand-text .brand-dotcom { display: inline !important; white-space: nowrap !important; text-transform: none !important; line-height: inherit !important; } .brand-copy > span { display: block !important; white-space: nowrap !important; } .brand-copy strong { white-space: nowrap !important; min-width: max-content !important; } @media (max-width: 420px) { .brand { gap: 8px !important; } .brand-copy strong { font-size: 1rem !important; } .brand-copy > span { font-size: .5rem !important; letter-spacing: .035em !important; } .logo-mark { width: 48px !important; height: 48px !important; } } /* ========================================================= Vendor Registration Form ========================================================= */ .vendor-registration-page { min-height: 100%; padding: 18px 12px 36px; } .vendor-registration-page .page-shell { width: min(100%, 720px); margin: 0 auto; } .vendor-registration-page .brand { display: flex; justify-content: center; margin: 4px 0 18px; } .vendor-registration-page .brand-copy > span.tagline { margin-top: 4px; } .vendor-registration-page .form-card { background: rgba(255,255,255,.9); border: 1px solid var(--gold-line); border-radius: 26px; box-shadow: var(--shadow); padding: clamp(18px, 4vw, 30px); } .vendor-registration-page .form-head { text-align: center; margin-bottom: 24px; } .vendor-registration-page .form-head .kicker { color: var(--rani); font-size: .72rem; font-weight: 950; text-transform: uppercase; letter-spacing: .13em; } .vendor-registration-page .form-head h1 { margin: 7px 0 0; color: var(--wine-deep); font-size: clamp(1.7rem, 6vw, 2.35rem); line-height: 1.02; letter-spacing: -.045em; } .vendor-registration-page .form-head p { margin: 10px auto 0; max-width: 520px; color: var(--muted); line-height: 1.5; font-size: .92rem; font-weight: 650; } #crmWebToEntityForm.crmWebToEntityForm { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; color: var(--ink) !important; text-align: left !important; } #crmWebToEntityForm .zcwf_title { display: none !important; } #crmWebToEntityForm .zcwf_row { margin: 0 0 18px !important; } #crmWebToEntityForm .zcwf_col_lab, #crmWebToEntityForm .zcwf_col_fld { width: 100% !important; float: none !important; padding: 0 !important; margin: 0 !important; } #crmWebToEntityForm .zcwf_col_lab { min-height: 0 !important; margin-bottom: 7px !important; } #crmWebToEntityForm .zcwf_col_lab label { display: block; color: var(--wine-deep); font-family: inherit !important; font-size: .82rem !important; font-weight: 900; line-height: 1.35; } #crmWebToEntityForm .zcwf_col_fld input[type="text"], #crmWebToEntityForm .zcwf_col_fld input[type="tel"], #crmWebToEntityForm .zcwf_col_fld textarea, #crmWebToEntityForm .zcwf_col_fld select:not([multiple]) { width: 100% !important; float: none !important; min-height: 52px; border: 1px solid var(--line) !important; border-radius: 16px !important; padding: 13px 14px !important; background: #fff !important; color: var(--ink) !important; font-family: inherit !important; font-size: 1rem !important; outline: none; box-shadow: none !important; } #crmWebToEntityForm .zcwf_col_fld input:focus, #crmWebToEntityForm .zcwf_col_fld select:focus, #crmWebToEntityForm .zcwf_col_fld textarea:focus { border-color: var(--rani) !important; box-shadow: 0 0 0 4px rgba(181,23,85,.08) !important; } #COBJ1CF15 { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; } .service-grid { display: grid; grid-template-columns: 1fr; gap: 9px; } .service-card { position: relative; display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--line); background: #fff; border-radius: 16px; cursor: pointer; user-select: none; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; } .service-card input { position: absolute; opacity: 0; pointer-events: none; } .service-card::before { content: ""; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px; border: 2px solid #e7c9d5; background: #fff; } .service-card span { color: var(--wine-deep); font-size: .94rem; font-weight: 800; } .service-card:has(input:checked) { border-color: var(--rani); background: #fff4fb; box-shadow: 0 8px 20px rgba(181,23,85,.08); } .service-card:has(input:checked)::before { background: linear-gradient(135deg, var(--wine), var(--rani)); border-color: transparent; box-shadow: inset 0 0 0 5px #fff; } .service-help { margin: 8px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.4; font-weight: 650; } #crmWebToEntityForm .zcwf_col_help { display: none !important; } .form-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 8px; } #crmWebToEntityForm .zcwf_button { width: 100% !important; max-width: none !important; min-height: 50px; border-radius: 999px !important; padding: 12px 18px !important; font-family: inherit !important; font-size: .94rem !important; font-weight: 900 !important; cursor: pointer; } #crmWebToEntityForm .formsubmit.zcwf_button { border: 0 !important; color: #fff !important; background: linear-gradient(135deg, var(--wine), var(--rani) 58%, #C84475) !important; box-shadow: 0 14px 30px rgba(181, 23, 85, .20); } #crmWebToEntityForm input[type="reset"].zcwf_button { color: var(--wine) !important; background: #fff !important; border: 1px solid var(--gold-line) !important; } .privacy-note { margin: 14px auto 0; text-align: center; color: var(--muted); font-size: .72rem; line-height: 1.45; max-width: 560px; } @media (min-width: 620px) { .vendor-registration-page { padding-top: 28px; } .service-grid { grid-template-columns: 1fr 1fr; } .form-actions { grid-template-columns: 1.45fr .75fr; } } /* ===== Simple one-step enquiry popup ===== */ #lead-popup .simple-lead-panel { width: min(94vw, 480px) !important; height: auto !important; min-height: 0 !important; max-height: calc(100dvh - 24px) !important; padding: 18px !important; overflow-y: auto !important; } #lead-popup .simple-lead-panel .popup-title { margin-top: 4px !important; padding-right: 54px !important; font-size: 1.55rem !important; } #lead-popup .simple-lead-panel .popup-title { margin: 4px 0 18px !important; padding-right: 54px !important; } #lead-popup .simple-lead-panel .calendar-card { margin-top: 4px; } #lead-popup .simple-lead-footer { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(217,184,106,.22); } #lead-popup .simple-lead-footer .btn { width: 100%; min-height: 52px; } #lead-popup .simple-lead-footer .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; } @media (max-width: 480px) { #lead-popup .simple-lead-panel { width: calc(100vw - 18px) !important; padding: 14px !important; } } #crmWebToEntityForm .consent-submit-row .zcwf_col_lab { display: none !important; } #crmWebToEntityForm .consent-submit-row .zcwf_col_fld { width: 100% !important; float: none !important; padding: 0 !important; margin: 0 !important; } #crmWebToEntityForm .consent-submit-row .form-actions { display: block !important; width: 100% !important; } #crmWebToEntityForm .consent-submit-row #formsubmit { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; } /* ========================================================= KotaShaadi.com Homepage Vendor-Discovery Sections Appended to existing common.css; existing rules above unchanged. ========================================================= */ .home-hero { padding: 42px 0 28px; } .home-hero-grid { display: grid; gap: 18px; align-items: center; } .home-hero h1 { max-width: 800px; font-size: clamp(2.45rem, 10vw, 4.8rem); } .home-hero-side { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; } .home-hero-stat { padding: 14px 10px; text-align: center; border: 1px solid var(--gold-line); border-radius: 18px; background: rgba(255,255,255,.78); box-shadow: var(--soft-shadow); } .home-hero-stat strong { display: block; color: var(--wine-deep); font-size: 1rem; line-height: 1.05; } .home-hero-stat span { display: block; margin-top: 4px; color: var(--muted); font-size: .62rem; line-height: 1.25; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; } .home-vendor-directory { padding-top: 52px; background: radial-gradient(circle at 8% 0%, rgba(217,184,106,.16), transparent 28%), radial-gradient(circle at 95% 4%, rgba(181,23,85,.09), transparent 28%), linear-gradient(180deg, #fffdf8, #fff6fb); border-top: 1px solid rgba(217,184,106,.20); border-bottom: 1px solid rgba(217,184,106,.20); } .home-vendor-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; } .home-vendor-head h2 { margin-top: 7px; color: var(--wine-deep); font-size: clamp(2rem, 8vw, 3.5rem); line-height: .98; letter-spacing: -.06em; } .home-vendor-head p { margin-top: 10px; color: var(--muted); line-height: 1.5; font-weight: 650; } .home-vendor-tools { display: grid; gap: 12px; } .home-vendor-search { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 15px; border-radius: 18px; border: 1px solid var(--gold-line); background: rgba(255,255,255,.90); box-shadow: var(--soft-shadow); } .home-vendor-search > span { flex: 0 0 auto; color: var(--wine); font-size: .76rem; font-weight: 950; } .home-vendor-search input { min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--wine-deep); font-size: .9rem; font-weight: 800; } .home-vendor-search input:focus { border: 0; box-shadow: none; } .home-vendor-search input::placeholder { color: var(--muted); opacity: .72; } .home-vendor-filter-row { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; padding: 1px 1px 8px; } .home-vendor-filter { white-space: nowrap; } .home-vendor-filter-row::-webkit-scrollbar { display: none; } .home-vendor-filter { flex: 0 0 auto; min-height: 40px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.88); color: var(--wine); font-size: .74rem; font-weight: 950; cursor: pointer; } .home-vendor-filter.active { color: #fff; background: var(--wine-deep); border-color: var(--wine-deep); box-shadow: 0 10px 22px rgba(71,6,31,.18); } .home-vendor-meta { margin: 8px 0 14px; color: var(--muted); font-size: .76rem; font-weight: 850; } .home-vendor-grid { display: grid; gap: 14px; } .home-vendor-card { overflow: hidden; display: grid; grid-template-columns: 112px minmax(0,1fr); min-height: 146px; border-radius: 22px; border: 1px solid var(--gold-line); background: rgba(255,255,255,.88); box-shadow: var(--soft-shadow); transition: transform .18s ease, box-shadow .18s ease; } .home-vendor-card:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(71,6,31,.13); } .home-vendor-media { position: relative; overflow: hidden; background: radial-gradient(circle at 75% 20%, rgba(247,232,187,.70), transparent 28%), linear-gradient(145deg, var(--wine-deep), var(--rani)); } .home-vendor-media::before { content: ""; position: absolute; width: 46%; aspect-ratio: 1; top: 12%; right: 8%; border-radius: 50%; border: 1px solid rgba(255,255,255,.24); box-shadow: 0 0 0 22px rgba(255,255,255,.05); } .home-vendor-media::after { content: attr(data-label); position: absolute; left: 11px; right: 11px; bottom: 12px; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: .78rem; font-weight: 900; line-height: 1.08; text-shadow: 0 2px 8px rgba(0,0,0,.24); } .home-vendor-body { min-width: 0; padding: 12px 13px; display: flex; flex-direction: column; } .home-vendor-pill { display: inline-flex; align-self: flex-start; padding: 5px 8px; border-radius: 999px; background: #fff1f7; color: var(--rani); border: 1px solid rgba(181,23,85,.12); font-size: .59rem; font-weight: 950; text-transform: uppercase; letter-spacing: .05em; } .home-vendor-body h3 { margin-top: 8px; color: var(--wine-deep); font-size: 1rem; line-height: 1.12; } .home-vendor-body p { margin-top: 5px; color: var(--muted); font-size: .73rem; line-height: 1.38; font-weight: 650; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .home-vendor-bottom { margin-top: auto; padding-top: 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .68rem; font-weight: 850; } .home-vendor-bottom strong { color: var(--wine); font-weight: 950; white-space: nowrap; } .home-vendor-empty { margin-top: 14px; padding: 16px; border-radius: 18px; border: 1px dashed var(--gold-line); background: rgba(255,255,255,.78); color: var(--muted); font-weight: 800; } .home-vendor-actions { display: flex; justify-content: center; margin-top: 18px; } .home-vendor-actions .btn { min-width: min(100%, 280px); } .home-requirement-section { padding: 52px 0; } .home-requirement-panel h2 { margin-top: 7px; } .home-requirement-panel p { display: block !important; } .home-featured-section { padding-top: 56px; } .home-popular-services { background: linear-gradient(180deg, rgba(217,184,106,.05), rgba(181,23,85,.04)); } .home-popular-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } .home-popular-grid a { min-height: 58px; display: flex; align-items: center; padding: 12px 14px; border-radius: 17px; border: 1px solid var(--gold-line); background: rgba(255,255,255,.84); color: var(--wine-deep); font-size: .82rem; font-weight: 900; box-shadow: var(--soft-shadow); } .home-how-section, .home-faq-section { padding-top: 56px; } @media (min-width: 720px) { .home-hero-grid { grid-template-columns: minmax(0,1fr) 310px; } .home-vendor-head { flex-direction: row; align-items: end; justify-content: space-between; } .home-vendor-head > div { max-width: 720px; } .home-vendor-tools { grid-template-columns: minmax(300px,420px) 1fr; align-items: start; } .home-vendor-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .home-vendor-card { grid-template-columns: 132px minmax(0,1fr); min-height: 158px; } .home-popular-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } } @media (min-width: 960px) { .home-hero { padding: 58px 0 34px; } .home-vendor-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .home-vendor-card { display: block; min-height: 0; } .home-vendor-media { min-height: 190px; } .home-vendor-body { min-height: 170px; padding: 15px 16px; } } @media (max-width: 420px) { .home-hero-side { grid-template-columns: 1fr 1fr 1fr; } .home-hero-stat { padding: 12px 7px; } .home-vendor-card { grid-template-columns: 102px minmax(0,1fr); } } .ksv-page { min-height:100vh; } .ksv-main { padding-bottom:48px; } .ksv-page-hero { padding:34px 0 22px; } .ksv-page-hero h1 { margin-top:14px; max-width:820px; font-size:clamp(2.35rem,9vw,4.9rem); } .ksv-page-hero p { margin-top:12px; max-width:720px; color:var(--muted); line-height:1.58; font-weight:650; } .ksv-filter-bar { display:grid; gap:12px; margin-top:20px; } .ksv-search { display:flex; align-items:center; gap:10px; width:100%; min-height:54px; padding:0 16px; background:rgba(255,255,255,.88); border:1px solid var(--gold-line); border-radius:18px; box-shadow:var(--soft-shadow); } .ksv-search-label { flex:0 0 auto; color:var(--wine); font-size:.78rem; font-weight:950; } .ksv-search input { min-width:0; border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; padding:0 !important; min-height:0 !important; font-size:.92rem; font-weight:800; color:var(--wine-deep); } .ksv-search input:focus { box-shadow:none !important; } .ksv-search input::placeholder { color:var(--muted); opacity:.72; } .ksv-chip-row { display:flex; gap:8px; overflow-x:auto; padding:2px 1px 8px; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .ksv-chip-row::-webkit-scrollbar { display:none; } .ksv-chip { flex: 0 0 auto; min-height: 40px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.88); color: var(--wine); padding: 9px 14px; font-size: .76rem; font-weight: 950; cursor: pointer; white-space: nowrap; } .ksv-chip.active { color:#fff; background:var(--wine-deep); border-color:var(--wine-deep); box-shadow:0 10px 22px rgba(71,6,31,.18); } .ksv-result-meta { margin-top:2px; color:var(--muted); font-size:.79rem; font-weight:850; } .ksv-vendor-grid { display:grid; gap:14px; } .ksv-vendor-card { overflow:hidden; display:grid; grid-template-columns:118px minmax(0,1fr); min-height:150px; background:rgba(255,255,255,.88); border:1px solid var(--gold-line); border-radius:22px; box-shadow:var(--soft-shadow); transition:transform .18s ease,box-shadow .18s ease; } .ksv-vendor-card:hover { transform:translateY(-2px); box-shadow:0 18px 42px rgba(71,6,31,.13); } .ksv-media,.ksv-hero-media,.ksv-gallery-item { position:relative; overflow:hidden; background:radial-gradient(circle at 74% 20%,rgba(247,232,187,.72),transparent 27%),linear-gradient(145deg,var(--wine-deep),var(--rani)); } .ksv-media::before,.ksv-hero-media::before,.ksv-gallery-item::before { content:""; position:absolute; width:46%; aspect-ratio:1; right:8%; top:12%; border-radius:50%; border:1px solid rgba(255,255,255,.24); box-shadow:0 0 0 24px rgba(255,255,255,.05); } .ksv-media::after,.ksv-hero-media::after,.ksv-gallery-item::after { content:attr(data-label); position:absolute; left:13px; right:13px; bottom:13px; color:#fff; font-family:Georgia,"Times New Roman",serif; font-weight:900; line-height:1.08; text-shadow:0 2px 8px rgba(0,0,0,.25); } .ksv-media::after { font-size:.84rem; } .ksv-card-body { min-width:0; padding:13px 14px 12px; display:flex; flex-direction:column; } .ksv-category-pill { display:inline-flex; align-self:flex-start; padding:5px 8px; border-radius:999px; background:#fff1f7; color:var(--rani); border:1px solid rgba(181,23,85,.12); font-size:.63rem; font-weight:950; text-transform:uppercase; letter-spacing:.06em; } .ksv-card-body h3 { margin-top:8px; color:var(--wine-deep); font-size:1.04rem; line-height:1.14; } .ksv-card-copy { margin-top:5px; color:var(--muted); font-size:.76rem; line-height:1.42; font-weight:650; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .ksv-card-bottom { margin-top:auto; padding-top:9px; display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); font-size:.7rem; font-weight:850; } .ksv-price { color:var(--wine); font-weight:950; } .ksv-empty { display:none; padding:18px; border-radius:20px; border:1px dashed var(--gold-line); background:rgba(255,255,255,.78); color:var(--muted); font-weight:800; } .ksv-detail-main { padding:28px 0 64px; } .ksv-back-link { display:inline-flex; margin-bottom:14px; color:var(--wine); font-size:.8rem; font-weight:900; } .ksv-detail-grid { display:grid; gap:18px; } .ksv-hero-media { min-height:330px; border-radius:28px; border:1px solid var(--gold-line); box-shadow:var(--shadow); } .ksv-hero-media::after { left:22px; bottom:22px; font-size:1.25rem; } .ksv-gallery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px; } .ksv-gallery-item { min-height:96px; border-radius:16px; border:1px solid var(--gold-line); } .ksv-gallery-item::after { font-size:.68rem; } .ksv-detail-card { background:rgba(255,255,255,.86); border:1px solid var(--gold-line); border-radius:26px; padding:20px; box-shadow:var(--soft-shadow); } .ksv-detail-card + .ksv-detail-card { margin-top:14px; } .ksv-detail-card h1,.ksv-detail-card h2,.ksv-detail-card h3,.ksv-detail-card h4 { color:var(--wine-deep); } .ksv-detail-card h1 { margin-top:8px; font-size:clamp(2rem,8vw,3.5rem); line-height:.98; letter-spacing:-.055em; } .ksv-detail-card h2 { font-size:1.7rem; line-height:1.05; } .ksv-detail-card h3 { font-size:1.08rem; } .ksv-detail-card p { margin-top:10px; color:var(--muted); line-height:1.58; font-weight:650; } .ksv-based-line { margin-top:8px; color:var(--muted); font-size:.88rem; font-weight:850; } .ksv-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:16px; } .ksv-summary-item { min-width:0; padding:11px 12px; border-radius:16px; border:1px solid var(--line); background:#fff; } .ksv-summary-item span { display:block; color:var(--muted); font-size:.62rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; } .ksv-summary-item strong { display:block; margin-top:4px; color:var(--wine-deep); font-size:.86rem; line-height:1.22; overflow-wrap:anywhere; } .ksv-action-grid { display:grid; gap:9px; margin-top:18px; } .ksv-service-list { display:grid; gap:9px; margin:12px 0 0; padding:0; list-style:none; } .ksv-service-list li { position:relative; padding-left:20px; color:var(--muted); line-height:1.45; font-weight:700; } .ksv-service-list li::before { content:"✓"; position:absolute; left:0; color:var(--rani); font-weight:950; } .ksv-package-grid { display:grid; gap:10px; margin-top:12px; } .ksv-package-card { padding:14px; border-radius:18px; border:1px solid var(--line); background:#fff; } .ksv-package-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .ksv-package-card h4 { margin:0; font-size:1rem; line-height:1.15; } .ksv-package-price { color:var(--rani); font-size:.95rem; font-weight:950; white-space:nowrap; } .ksv-package-card p { margin-top:6px; font-size:.82rem; line-height:1.5; } .ksv-package-card ul { margin:9px 0 0; padding-left:18px; color:var(--muted); font-size:.79rem; line-height:1.55; font-weight:700; } .ksv-faq-list { display:grid; gap:10px; margin-top:12px; } .ksv-faq-item { overflow:hidden; border-radius:16px; border:1px solid var(--line); background:#fff; } .ksv-faq-item summary { position:relative; padding:14px 42px 14px 16px; list-style:none; color:var(--wine-deep); font-size:.9rem; font-weight:900; cursor:pointer; } .ksv-faq-item summary::-webkit-details-marker { display:none; } .ksv-faq-item summary::after { content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--rani); font-size:1.1rem; font-weight:950; } .ksv-faq-item[open] summary::after { content:"−"; } .ksv-faq-answer { padding:0 16px 14px; color:var(--muted); font-size:.83rem; line-height:1.58; font-weight:700; } .ksv-tag-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .ksv-sticky-aside { align-self:start; } .ksv-mobile-actions { position:fixed; z-index:35; left:10px; right:10px; bottom:10px; display:grid; grid-template-columns:.9fr 1.1fr; gap:8px; padding:8px; border-radius:22px; background:rgba(255,248,237,.94); border:1px solid var(--gold-line); box-shadow:0 18px 44px rgba(71,6,31,.24); backdrop-filter:blur(14px); } .ksv-page-with-mobile-actions { padding-bottom:92px; } @media (min-width:700px) { .ksv-vendor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .ksv-vendor-card { grid-template-columns:138px minmax(0,1fr); min-height:160px; } .ksv-action-grid { grid-template-columns:1fr 1fr; } .ksv-gallery-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } } @media (min-width:960px) { .ksv-vendor-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .ksv-vendor-card { display:block; min-height:0; } .ksv-media { min-height:205px; } .ksv-card-body { min-height:182px; padding:15px 16px; } .ksv-detail-grid { grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr); align-items:start; } .ksv-gallery-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .ksv-gallery-item { min-height:104px; } .ksv-mobile-actions { display:none; } .ksv-page-with-mobile-actions { padding-bottom:0; } } @media (max-width:420px) { .ksv-vendor-card { grid-template-columns:104px minmax(0,1fr); } .ksv-card-body { padding:12px; } .ksv-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }.ksv-page { min-height:100vh; } .ksv-main { padding-bottom:48px; } .ksv-page-hero { padding:34px 0 22px; } .ksv-page-hero h1 { margin-top:14px; max-width:820px; font-size:clamp(2.35rem,9vw,4.9rem); } .ksv-page-hero p { margin-top:12px; max-width:720px; color:var(--muted); line-height:1.58; font-weight:650; } .ksv-filter-bar { display:grid; gap:12px; margin-top:20px; } .ksv-search { display:flex; align-items:center; gap:10px; width:100%; min-height:54px; padding:0 16px; background:rgba(255,255,255,.88); border:1px solid var(--gold-line); border-radius:18px; box-shadow:var(--soft-shadow); } .ksv-search-label { flex:0 0 auto; color:var(--wine); font-size:.78rem; font-weight:950; } .ksv-search input { min-width:0; border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; padding:0 !important; min-height:0 !important; font-size:.92rem; font-weight:800; color:var(--wine-deep); } .ksv-search input:focus { box-shadow:none !important; } .ksv-search input::placeholder { color:var(--muted); opacity:.72; } .ksv-chip-row { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; overflow: visible; padding: 2px 1px 8px; } .ksv-search { width: 100%; } .ksv-chip-row::-webkit-scrollbar { display:none; } .ksv-chip { flex:0 0 auto; min-height:40px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.88); color:var(--wine); padding:9px 14px; font-size:.76rem; font-weight:950; cursor:pointer; } .ksv-chip.active { color:#fff; background:var(--wine-deep); border-color:var(--wine-deep); box-shadow:0 10px 22px rgba(71,6,31,.18); } .ksv-result-meta { margin-top:2px; color:var(--muted); font-size:.79rem; font-weight:850; } .ksv-vendor-grid { display:grid; gap:14px; } .ksv-vendor-card { overflow:hidden; display:grid; grid-template-columns:118px minmax(0,1fr); min-height:150px; background:rgba(255,255,255,.88); border:1px solid var(--gold-line); border-radius:22px; box-shadow:var(--soft-shadow); transition:transform .18s ease,box-shadow .18s ease; } .ksv-vendor-card:hover { transform:translateY(-2px); box-shadow:0 18px 42px rgba(71,6,31,.13); } .ksv-media,.ksv-hero-media,.ksv-gallery-item { position:relative; overflow:hidden; background:radial-gradient(circle at 74% 20%,rgba(247,232,187,.72),transparent 27%),linear-gradient(145deg,var(--wine-deep),var(--rani)); } .ksv-media::before,.ksv-hero-media::before,.ksv-gallery-item::before { content:""; position:absolute; width:46%; aspect-ratio:1; right:8%; top:12%; border-radius:50%; border:1px solid rgba(255,255,255,.24); box-shadow:0 0 0 24px rgba(255,255,255,.05); } .ksv-media::after,.ksv-hero-media::after,.ksv-gallery-item::after { content:attr(data-label); position:absolute; left:13px; right:13px; bottom:13px; color:#fff; font-family:Georgia,"Times New Roman",serif; font-weight:900; line-height:1.08; text-shadow:0 2px 8px rgba(0,0,0,.25); } .ksv-media::after { font-size:.84rem; } .ksv-card-body { min-width:0; padding:13px 14px 12px; display:flex; flex-direction:column; } .ksv-category-pill { display:inline-flex; align-self:flex-start; padding:5px 8px; border-radius:999px; background:#fff1f7; color:var(--rani); border:1px solid rgba(181,23,85,.12); font-size:.63rem; font-weight:950; text-transform:uppercase; letter-spacing:.06em; } .ksv-card-body h3 { margin-top:8px; color:var(--wine-deep); font-size:1.04rem; line-height:1.14; } .ksv-card-copy { margin-top:5px; color:var(--muted); font-size:.76rem; line-height:1.42; font-weight:650; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .ksv-card-bottom { margin-top:auto; padding-top:9px; display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); font-size:.7rem; font-weight:850; } .ksv-price { color:var(--wine); font-weight:950; } .ksv-empty { display:none; padding:18px; border-radius:20px; border:1px dashed var(--gold-line); background:rgba(255,255,255,.78); color:var(--muted); font-weight:800; } .ksv-detail-main { padding:28px 0 64px; } .ksv-back-link { display:inline-flex; margin-bottom:14px; color:var(--wine); font-size:.8rem; font-weight:900; } .ksv-detail-grid { display:grid; gap:18px; } .ksv-hero-media { min-height:330px; border-radius:28px; border:1px solid var(--gold-line); box-shadow:var(--shadow); } .ksv-hero-media::after { left:22px; bottom:22px; font-size:1.25rem; } .ksv-gallery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px; } .ksv-gallery-item { min-height:96px; border-radius:16px; border:1px solid var(--gold-line); } .ksv-gallery-item::after { font-size:.68rem; } .ksv-detail-card { background:rgba(255,255,255,.86); border:1px solid var(--gold-line); border-radius:26px; padding:20px; box-shadow:var(--soft-shadow); } .ksv-detail-card + .ksv-detail-card { margin-top:14px; } .ksv-detail-card h1,.ksv-detail-card h2,.ksv-detail-card h3,.ksv-detail-card h4 { color:var(--wine-deep); } .ksv-detail-card h1 { margin-top:8px; font-size:clamp(2rem,8vw,3.5rem); line-height:.98; letter-spacing:-.055em; } .ksv-detail-card h2 { font-size:1.7rem; line-height:1.05; } .ksv-detail-card h3 { font-size:1.08rem; } .ksv-detail-card p { margin-top:10px; color:var(--muted); line-height:1.58; font-weight:650; } .ksv-based-line { margin-top:8px; color:var(--muted); font-size:.88rem; font-weight:850; } .ksv-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:16px; } .ksv-summary-item { min-width:0; padding:11px 12px; border-radius:16px; border:1px solid var(--line); background:#fff; } .ksv-summary-item span { display:block; color:var(--muted); font-size:.62rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; } .ksv-summary-item strong { display:block; margin-top:4px; color:var(--wine-deep); font-size:.86rem; line-height:1.22; overflow-wrap:anywhere; } .ksv-action-grid { display:grid; gap:9px; margin-top:18px; } .ksv-service-list { display:grid; gap:9px; margin:12px 0 0; padding:0; list-style:none; } .ksv-service-list li { position:relative; padding-left:20px; color:var(--muted); line-height:1.45; font-weight:700; } .ksv-service-list li::before { content:"✓"; position:absolute; left:0; color:var(--rani); font-weight:950; } .ksv-package-grid { display:grid; gap:10px; margin-top:12px; } .ksv-package-card { padding:14px; border-radius:18px; border:1px solid var(--line); background:#fff; } .ksv-package-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .ksv-package-card h4 { margin:0; font-size:1rem; line-height:1.15; } .ksv-package-price { color:var(--rani); font-size:.95rem; font-weight:950; white-space:nowrap; } .ksv-package-card p { margin-top:6px; font-size:.82rem; line-height:1.5; } .ksv-package-card ul { margin:9px 0 0; padding-left:18px; color:var(--muted); font-size:.79rem; line-height:1.55; font-weight:700; } .ksv-faq-list { display:grid; gap:10px; margin-top:12px; } .ksv-faq-item { overflow:hidden; border-radius:16px; border:1px solid var(--line); background:#fff; } .ksv-faq-item summary { position:relative; padding:14px 42px 14px 16px; list-style:none; color:var(--wine-deep); font-size:.9rem; font-weight:900; cursor:pointer; } .ksv-faq-item summary::-webkit-details-marker { display:none; } .ksv-faq-item summary::after { content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--rani); font-size:1.1rem; font-weight:950; } .ksv-faq-item[open] summary::after { content:"−"; } .ksv-faq-answer { padding:0 16px 14px; color:var(--muted); font-size:.83rem; line-height:1.58; font-weight:700; } .ksv-tag-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .ksv-sticky-aside { align-self:start; } .ksv-mobile-actions { position:fixed; z-index:60; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr; gap:8px; padding:8px; border-radius:22px; background:rgba(255,248,237,.94); border:1px solid var(--gold-line); box-shadow:0 18px 44px rgba(71,6,31,.24); backdrop-filter:blur(14px); } .ksv-mobile-actions .btn { width:100%; min-height:52px; } .ksv-page-with-mobile-actions { padding-bottom:100px; } @media (min-width:700px) { .ksv-vendor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .ksv-vendor-card { grid-template-columns:138px minmax(0,1fr); min-height:160px; } .ksv-action-grid { grid-template-columns:1fr 1fr; } .ksv-gallery-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } } @media (min-width:960px) { .ksv-vendor-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .ksv-vendor-card { display:block; min-height:0; } .ksv-media { min-height:205px; } .ksv-card-body { min-height:182px; padding:15px 16px; } .ksv-detail-grid { grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr); align-items:start; } .ksv-gallery-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .ksv-gallery-item { min-height:104px; } .ksv-mobile-actions { display:none; } .ksv-page-with-mobile-actions { padding-bottom:0; } } @media (max-width:420px) { .ksv-vendor-card { grid-template-columns:104px minmax(0,1fr); } .ksv-card-body { padding:12px; } .ksv-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* Vendor listing filter layout */ .ksv-filter-bar { display: grid; grid-template-columns: 1fr !important; gap: 12px; } .ksv-chip-row { order: 1; display: flex; flex-wrap: wrap; width: 100%; gap: 8px; overflow: visible; } .ksv-search { order: 2; width: 100%; } /* ========================================================= KotaShaadi.com - Vendor Self Edit Page V2 Replace the OLD vendor self-edit CSS block with this block. ========================================================= */ .ks-edit-page [hidden] { display: none !important; } .ks-edit-page { min-height: 100vh; background: radial-gradient(circle at 88% 10%, rgba(181,23,85,.08), transparent 28%), radial-gradient(circle at 10% 22%, rgba(217,184,106,.10), transparent 25%), linear-gradient(180deg,#fffaf2,#fff6ef 56%,#fffaf6); } .ks-edit-topbar { position: sticky; top: 0; z-index: 50; } .ks-edit-main { padding: 20px 0 64px; } .ks-edit-shell { max-width: 1050px; } .ks-edit-hero { display: grid; gap: 14px; align-items: center; } .ks-edit-hero-compact { margin-bottom: 14px; padding: 8px 0 4px; } .ks-edit-hero h1 { color: var(--wine-deep); font-size: clamp(1.8rem,5.8vw,3rem); line-height: 1; letter-spacing: -.035em; } .ks-edit-hero-copy > p { margin-top: 7px; color: var(--muted); font-size: .86rem; font-weight: 700; line-height: 1.45; } .ks-edit-vendor-card { display: grid; grid-template-columns: 50px minmax(0,1fr); gap: 11px; align-items: center; padding: 11px 12px; border: 1px solid var(--gold-line); border-radius: 19px; background: rgba(255,255,255,.88); box-shadow: var(--soft-shadow); } .ks-edit-vendor-avatar { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(145deg,var(--wine-deep),var(--rani)); font-weight: 950; } .ks-edit-vendor-copy { min-width: 0; } .ks-edit-vendor-copy span, .ks-edit-vendor-copy small { display: block; color: var(--muted); font-size: .66rem; font-weight: 800; } .ks-edit-vendor-copy strong { display: block; margin: 2px 0; overflow: hidden; color: var(--wine-deep); font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; } .ks-edit-alert, .ks-edit-loading { margin-top: 14px; padding: 20px; border: 1px solid var(--gold-line); border-radius: 22px; background: rgba(255,255,255,.92); box-shadow: var(--soft-shadow); } .ks-edit-alert-error { display: grid; gap: 5px; border-color: rgba(181,23,85,.22); background: #fff4f7; color: var(--muted); } .ks-edit-alert-error strong { color: var(--wine-deep); } .ks-edit-loading { min-height: 150px; display: grid; place-items: center; align-content: center; gap: 7px; text-align: center; color: var(--muted); } .ks-edit-loading strong { color: var(--wine-deep); } .ks-edit-spinner { width: 32px; height: 32px; border: 4px solid rgba(123,18,60,.14); border-top-color: var(--rani); border-radius: 50%; animation: ksEditSpin .8s linear infinite; } @keyframes ksEditSpin { to { transform: rotate(360deg); } } .ks-edit-form { display: grid; gap: 14px; } .ks-edit-savebar { position: sticky; top: 74px; z-index: 45; display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 2px; padding: 9px 10px 9px 13px; border: 1px solid var(--gold-line); border-radius: 17px; background: rgba(255,249,240,.96); box-shadow: 0 10px 26px rgba(71,6,31,.08); backdrop-filter: blur(12px); } .ks-edit-savebar span { color: var(--muted); font-size: .72rem; font-weight: 900; } .ks-edit-savebar .btn[disabled], .ks-edit-bottom-save .btn[disabled] { opacity: .42; cursor: not-allowed; box-shadow: none; } .ks-edit-jumpbar { display: flex; gap: 7px; overflow-x: auto; padding: 7px; border: 1px solid var(--gold-line); border-radius: 17px; background: rgba(255,255,255,.74); scrollbar-width: none; } .ks-edit-jumpbar::-webkit-scrollbar { display: none; } .ks-edit-jumpbar a { flex: 0 0 auto; padding: 8px 11px; border-radius: 11px; color: var(--wine); font-size: .7rem; font-weight: 950; } .ks-edit-section { scroll-margin-top: 148px; padding: 18px; border: 1px solid var(--gold-line); border-radius: 24px; background: rgba(255,255,255,.9); box-shadow: var(--soft-shadow); } .ks-edit-section-head { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; margin-bottom: 15px; } .ks-edit-section-head h2 { margin-top: 2px; color: var(--wine-deep); font-size: 1.28rem; } .ks-edit-section-head p { margin-top: 4px; color: var(--muted); line-height: 1.45; font-size: .79rem; font-weight: 650; } .ks-edit-step { display: inline-block; color: var(--rani); font-size: .64rem; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; } .ks-edit-grid { display: grid; gap: 11px; } .ks-edit-field { display: grid; gap: 6px; } .ks-edit-field > span { color: var(--wine-deep); font-size: .74rem; font-weight: 950; } .ks-edit-field small { color: var(--muted); font-size: .65rem; font-weight: 650; line-height: 1.35; } .ks-edit-website-hint { display: block; color: var(--wine); font-size: .66rem; font-weight: 800; line-height: 1.4; } .ks-edit-field input, .ks-edit-field textarea, .ks-edit-field select, .ks-edit-repeat-row input, .ks-edit-photo-card input { width: 100%; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--wine-deep); font: inherit; font-size: .82rem; font-weight: 700; outline: 0; transition: border-color .15s ease, box-shadow .15s ease; } .ks-edit-field input, .ks-edit-field select, .ks-edit-repeat-row input, .ks-edit-photo-card input { min-height: 46px; padding: 0 12px; } .ks-edit-field textarea { resize: vertical; padding: 11px 12px; line-height: 1.5; } .ks-edit-field input:focus, .ks-edit-field textarea:focus, .ks-edit-field select:focus, .ks-edit-repeat-row input:focus, .ks-edit-photo-card input:focus { border-color: rgba(181,23,85,.42); box-shadow: 0 0 0 4px rgba(181,23,85,.08); } .ks-edit-repeat-list, .ks-edit-preview-list { display: grid; gap: 12px; } .ks-edit-repeat-row { display: grid; grid-template-columns: 20px minmax(0,1fr) 38px; gap: 8px; align-items: center; } .ks-edit-drag { display: grid; place-items: center; color: var(--muted); font-size: 1.1rem; font-weight: 950; } .ks-edit-icon-btn, .ks-edit-photo-remove { border: 0; cursor: pointer; } .ks-edit-icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #fff1f5; color: var(--rani); font-size: 1.1rem; font-weight: 950; } .ks-edit-item { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: #fffdfa; } .ks-edit-item-preview { padding: 12px; } .ks-edit-item.is-editing { border-color: rgba(181,23,85,.28); box-shadow: 0 0 0 4px rgba(181,23,85,.05); } .ks-edit-item-editor { padding: 14px; border-top: 1px solid var(--line); background: #fff8fb; } .ks-edit-editor-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .ks-edit-editor-title strong { color: var(--wine-deep); font-size: .86rem; } .ks-edit-item-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; } .ks-edit-action-btn { min-height: 34px; padding: 7px 10px; border: 1px solid var(--gold-line); border-radius: 10px; background: #fff; color: var(--wine); font: inherit; font-size: .65rem; font-weight: 950; cursor: pointer; } .ks-edit-action-btn:disabled { opacity: .35; cursor: not-allowed; } .ks-edit-danger { margin-left: auto; border-color: rgba(181,23,85,.18); background: #fff1f5; color: var(--rani); } .ks-edit-remove-link { padding: 5px 0; border: 0; background: transparent; color: var(--rani); font: inherit; font-size: .7rem; font-weight: 950; cursor: pointer; } .ks-edit-item .ksv-package-card { margin: 0; } .ks-edit-item .ksv-package-card p:empty, .ks-edit-item .ksv-package-card ul:empty { display: none; } .ks-edit-item .ksv-package-card ul { margin-top: 8px; } .ks-edit-album-public-card { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 12px; min-height: 120px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #fff; } .ks-edit-album-cover { position: relative; min-height: 120px; display: flex; align-items: flex-end; padding: 9px; background: radial-gradient(circle at 70% 20%, rgba(247,232,187,.7), transparent 28%), linear-gradient(145deg,var(--wine-deep),var(--rani)); background-size: cover; background-position: center; } .ks-edit-album-cover span { position: relative; z-index: 1; padding: 5px 7px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--wine); font-size: .58rem; font-weight: 950; } .ks-edit-album-public-copy { min-width: 0; padding: 12px 12px 10px 0; } .ks-edit-album-public-copy h4 { color: var(--wine-deep); font-size: .95rem; } .ks-edit-album-public-copy p { margin-top: 5px; color: var(--muted); font-size: .7rem; line-height: 1.4; font-weight: 650; } .ks-edit-album-thumbs { display: flex; gap: 6px; margin-top: 10px; } .ks-edit-album-thumb { width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 9px; background: #f3ece7 center/cover no-repeat; } .ks-edit-item .ksv-faq-item { margin: 0; } .ks-edit-empty-card { display: grid; gap: 4px; padding: 14px; border: 1px dashed var(--gold-line); border-radius: 17px; background: rgba(255,249,239,.72); color: var(--muted); font-size: .74rem; } .ks-edit-empty-card strong { color: var(--wine-deep); } .ks-edit-upload-box { margin-top: 12px; display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px; border: 1px dashed rgba(181,23,85,.24); border-radius: 16px; background: #fff; } .ks-edit-upload-copy strong, .ks-edit-upload-copy span { display: block; } .ks-edit-upload-copy strong { color: var(--wine-deep); font-size: .8rem; } .ks-edit-upload-copy span { margin-top: 3px; color: var(--muted); font-size: .65rem; line-height: 1.35; } .ks-edit-file-btn { position: relative; overflow: hidden; flex: 0 0 auto; } .ks-edit-file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .ks-edit-photo-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 11px; } .ks-edit-photo-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; } .ks-edit-photo-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #f2ece7; } .ks-edit-photo-media img { width: 100%; height: 100%; display: block; object-fit: cover; } .ks-edit-photo-remove { position: absolute; top: 6px; right: 6px; width: 29px; height: 29px; border-radius: 50%; background: rgba(71,6,31,.86); color: #fff; font-size: 1rem; font-weight: 950; } .ks-edit-photo-badge { position: absolute; left: 6px; top: 6px; padding: 5px 7px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--rani); font-size: .55rem; font-weight: 950; } .ks-edit-photo-card input { border: 0; border-top: 1px solid var(--line); border-radius: 0; min-height: 40px; font-size: .68rem; } .ks-edit-bottom-save { display: grid; gap: 12px; align-items: center; padding: 17px; border-radius: 22px; background: radial-gradient(circle at 90% 15%, rgba(247,232,187,.16), transparent 35%), linear-gradient(145deg,var(--wine-deep),#7c143f); } .ks-edit-bottom-save strong, .ks-edit-bottom-save span { display: block; color: #fff; } .ks-edit-bottom-save strong { font-size: 1rem; } .ks-edit-bottom-save span { margin-top: 3px; opacity: .8; font-size: .7rem; } .ks-edit-submit { width: 100%; min-height: 50px; } .ks-edit-inline-success { padding: 12px 14px; border: 1px solid #bde5c8; border-radius: 15px; background: #ecfaef; color: #16723a; font-size: .78rem; font-weight: 900; text-align: center; } .ks-edit-footer .container { display: grid; gap: 3px; justify-items: center; text-align: center; } .ks-edit-footer .brand-copy > span { color: #e8d8bc; font-size: .53rem; font-weight: 750; letter-spacing: .05em; } @media (min-width: 700px) { .ks-edit-main { padding-top: 26px; } .ks-edit-hero { grid-template-columns: minmax(0,1fr) minmax(290px,350px); } .ks-edit-section { padding: 22px; } .ks-edit-grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); } .ks-edit-field-wide { grid-column: 1 / -1; } .ks-edit-photo-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .ks-edit-bottom-save { grid-template-columns: minmax(0,1fr) 250px; } } @media (min-width: 980px) { .ks-edit-photo-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } .ks-edit-jumpbar { justify-content: center; } } @media (max-width: 520px) { .ks-edit-main { padding-top: 15px; } .ks-edit-savebar { top: 68px; } .ks-edit-section-head { display: grid; } .ks-edit-section-head .btn { width: 100%; } .ks-edit-upload-box { align-items: stretch; flex-direction: column; } .ks-edit-file-btn { width: 100%; } .ks-edit-album-public-card { grid-template-columns: 94px minmax(0,1fr); } .ks-edit-album-cover { min-height: 108px; } .ks-edit-action-btn { flex: 1 1 auto; } .ks-edit-danger { margin-left: 0; } } /* ========================================================= Professional action controls + confirmation modal ========================================================= */ .ks-edit-btn-icon { width: 16px; height: 16px; flex: 0 0 auto; } .ks-edit-item-actions { align-items: center; gap: 8px; padding-top: 2px; } .ks-edit-action-btn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 11px; border: 1px solid #ead7c8; border-radius: 11px; background: #fff; color: #705665; font-size: .66rem; font-weight: 900; box-shadow: 0 2px 8px rgba(71,6,31,.03); transition: transform .12s ease, border-color .12s ease, background .12s ease, color .12s ease; } .ks-edit-action-btn:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(123,18,60,.25); background: #fffafc; } .ks-edit-edit-btn { border-color: rgba(123,18,60,.28); background: #fff8fb; color: var(--wine); } .ks-edit-edit-btn:hover { background: #fff0f6 !important; border-color: rgba(123,18,60,.38) !important; } .ks-edit-move-btn { color: #6f6169; } .ks-edit-remove-btn { margin-left: auto; border-color: #f0cdd6; background: #fff; color: #a92850; } .ks-edit-remove-btn:hover { border-color: #db9caf !important; background: #fff6f8 !important; color: #8d163d !important; } .ks-edit-done-btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; border: 1px solid var(--wine); border-radius: 12px; background: var(--wine); color: #fff; font: inherit; font-size: .7rem; font-weight: 950; cursor: pointer; box-shadow: 0 7px 18px rgba(123,18,60,.14); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; } .ks-edit-done-btn:hover { transform: translateY(-1px); background: var(--wine-deep); box-shadow: 0 9px 22px rgba(123,18,60,.18); } .ks-edit-editor-title { padding-bottom: 10px; border-bottom: 1px solid rgba(123,18,60,.08); } .ks-edit-editor-footer { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(123,18,60,.09); } .ks-edit-editor-footer > span { color: var(--muted); font-size: .66rem; font-weight: 700; } .ks-edit-modal-open { overflow: hidden; } .ks-edit-confirm-backdrop { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px; background: rgba(39,8,20,.48); backdrop-filter: blur(5px); } .ks-edit-confirm-dialog { width: min(100%, 410px); padding: 23px; border: 1px solid rgba(255,255,255,.65); border-radius: 24px; background: #fff; box-shadow: 0 28px 70px rgba(50,4,22,.28); text-align: center; } .ks-edit-confirm-icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 15px; background: #fff1f5; color: #a92850; } .ks-edit-confirm-icon .ks-edit-btn-icon { width: 21px; height: 21px; } .ks-edit-confirm-dialog h3 { color: var(--wine-deep); font-size: 1.08rem; } .ks-edit-confirm-dialog p { margin: 7px auto 0; max-width: 320px; color: var(--muted); font-size: .78rem; font-weight: 650; line-height: 1.5; } .ks-edit-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; } .ks-edit-confirm-actions .btn { width: 100%; min-height: 44px; } .ks-edit-confirm-remove { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #a92850; border-radius: 14px; background: #a92850; color: #fff; font: inherit; font-size: .76rem; font-weight: 950; cursor: pointer; } @media (max-width: 520px) { .ks-edit-item-actions { display: grid; grid-template-columns: 1fr 1fr; } .ks-edit-action-btn { width: 100%; } .ks-edit-remove-btn { margin-left: 0; } .ks-edit-editor-title { align-items: center; } .ks-edit-editor-footer { align-items: stretch; flex-direction: column; } .ks-edit-editor-footer .ks-edit-done-btn { width: 100%; } .ks-edit-confirm-actions { grid-template-columns: 1fr; } } .ks-edit-confirm-backdrop[hidden] { display: none !important; } .ks-edit-confirm-backdrop { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px; background: rgba(39,8,20,.48); backdrop-filter: blur(5px); } /* ========================================= Vendor Edit - Fixed Services ========================================= */ .ks-edit-service-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; } .ks-edit-service-option { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--wine-deep); font-size: .75rem; font-weight: 800; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .ks-edit-service-option input { position: absolute; opacity: 0; pointer-events: none; } .ks-edit-service-check { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; border: 1px solid #dccbd1; border-radius: 7px; background: #fff; color: transparent; font-size: .72rem; font-weight: 950; } .ks-edit-service-option.selected { border-color: rgba(181,23,85,.35); background: #fff4f8; } .ks-edit-service-option.selected .ks-edit-service-check { border-color: var(--rani); background: var(--rani); color: #fff; } /* ========================================= Vendor Edit - Profile Photos ========================================= */ .ks-edit-photo-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: var(--muted); font-size: .7rem; font-weight: 800; } .ks-edit-photo-status strong { color: var(--wine-deep); } .ks-edit-profile-photo-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .ks-edit-profile-photo-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; } .ks-edit-profile-photo-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #f3ece7; } .ks-edit-profile-photo-media img { width: 100%; height: 100%; display: block; object-fit: cover; } .ks-edit-main-photo-badge, .ks-edit-pending-photo-badge { position: absolute; top: 8px; padding: 5px 8px; border-radius: 999px; font-size: .56rem; font-weight: 950; } .ks-edit-main-photo-badge { left: 8px; background: var(--wine); color: #fff; } .ks-edit-pending-photo-badge { right: 8px; background: rgba(255,255,255,.94); color: var(--rani); } .ks-edit-photo-caption { width: 100%; min-height: 42px; padding: 0 11px; border: 0; border-bottom: 1px solid var(--line); color: var(--wine-deep); font: inherit; font-size: .68rem; font-weight: 700; outline: 0; } .ks-edit-profile-photo-card .ks-edit-item-actions { padding: 9px; margin: 0; } .ks-edit-file-btn.is-disabled { opacity: .45; pointer-events: none; } @media (min-width:700px) { .ks-edit-profile-photo-list { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media (max-width:520px) { .ks-edit-service-options { grid-template-columns: 1fr; } .ks-edit-profile-photo-list { grid-template-columns: repeat(2,minmax(0,1fr)); } } /* ========================================= Vendor Detail - Main Photo Carousel ========================================= */ .ksv-carousel { position: relative; overflow: hidden; width: 100%; border-radius: 28px; } .ksv-carousel .ksv-hero-media { width:100%; aspect-ratio:16 / 9; min-height:0; border-radius:28px; } /* Prev / Next overlay buttons */ .ksv-carousel-btn { position: absolute; top: 50%; z-index: 5; width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(255,255,255,.92); color: var(--wine-deep); font-size: 30px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 8px 24px rgba(40,0,15,.18); transform: translateY(-50%); transition: transform .15s ease, background .15s ease; } .ksv-carousel-btn:hover { background: #fff; transform: translateY(-50%) scale(1.06); } .ksv-carousel-prev { left: 16px; } .ksv-carousel-next { right: 16px; } /* 1 / 5 counter */ .ksv-carousel-count { position: absolute; right: 16px; bottom: 14px; z-index: 5; padding: 6px 10px; border-radius: 999px; background: rgba(50,8,24,.76); color: #fff; font-size: 12px; font-weight: 900; backdrop-filter: blur(6px); } /* Thumbnails below carousel */ .ksv-carousel-thumbs { display: flex; gap: 9px; width: 100%; margin-top: 10px; padding: 2px 2px 7px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; } .ksv-carousel-thumb { position:relative; width:82px; height:60px; flex:0 0 82px; padding:0; overflow:hidden; border:2px solid transparent; border-radius:12px; background:#f2ece7; cursor:pointer; opacity:.68; transition:opacity .15s ease,border-color .15s ease,transform .15s ease; } .ksv-carousel-thumb:hover { opacity: 1; } .ksv-carousel-thumb.active { opacity: 1; border-color: var(--rani); transform: translateY(-1px); } /* Mobile */ @media (max-width: 600px) { .ksv-carousel { border-radius: 20px; } .ksv-carousel .ksv-hero-media { aspect-ratio: 4 / 3; border-radius: 20px; } .ksv-carousel-btn { width: 40px; height: 40px; font-size: 26px; } .ksv-carousel-prev { left: 10px; } .ksv-carousel-next { right: 10px; } .ksv-carousel-count { right: 10px; bottom: 10px; } .ksv-carousel-thumb { width: 68px; height: 50px; flex-basis: 68px; border-radius: 10px; } } .ks-edit-save-toast { position: fixed; top: 20px; right: 20px; z-index: 99999; display: flex; align-items: flex-start; gap: 12px; width: min(360px, calc(100vw - 32px)); padding: 16px 18px; color: #4b001c; background: #fffaf7; border: 1px solid #e8bdca; border-radius: 16px; box-shadow: 0 14px 40px rgba(75, 0, 28, 0.2); opacity: 0; transform: translateY(-14px); pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; } .ks-edit-save-toast[hidden] { display: none; } .ks-edit-save-toast.is-visible { opacity: 1; transform: translateY(0); } .ks-edit-save-toast-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; color: #ffffff; background: #8b0a3c; border-radius: 50%; font-size: 20px; font-weight: 800; } .ks-edit-save-toast-content { display: grid; gap: 3px; } .ks-edit-save-toast-title { color: #4b001c; font-size: 16px; font-weight: 800; } .ks-edit-save-toast-message { color: #765967; font-size: 14px; line-height: 1.4; } @media (max-width: 600px) { .ks-edit-save-toast { top: 12px; right: 12px; left: 12px; width: auto; } } /* Single vendor contact CTA */ .ksv-action-grid-single { grid-template-columns: 1fr !important; } .ksv-action-grid-single .ksv-contact-full { width: 100%; } .ksv-mobile-actions .ksv-contact-full { width: 100%; flex: 1 1 100%; } .ksv-album-toolbar { display:grid; gap:12px; margin-bottom:12px; padding:16px; border:1px solid var(--gold-line); border-radius:18px; background:rgba(255,255,255,.72); } .ksv-album-meta { color:var(--wine-deep); font-size:.88rem; font-weight:950; } .ksv-album-tabs { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; padding:0; } .ksv-album-tabs .ksv-chip { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-height:76px; padding:12px 14px; border-radius:16px; white-space:normal; text-align:left; } .ksv-album-card-title { font-size:.82rem; font-weight:950; } .ksv-album-card-count { margin-top:5px; font-size:.70rem; font-weight:800; opacity:.75; } .ksv-hero-media { display:flex; align-items:center; justify-content:center; min-height:clamp(300px,42vw,540px); padding:18px; background:#fff7ef; } .ksv-hero-media::before,.ksv-hero-media::after { display:none; } .ksv-hero-image { display:block; width:100%; height:100%; object-fit:contain; object-position:center; border-radius:18px; } .ksv-carousel-caption { margin-top:8px; color:var(--muted); font-size:.82rem; font-weight:800; } .ksv-carousel-caption:empty { display:none; } .ksv-carousel-thumbs { display: flex; gap: 8px; min-height: 74px; margin-top: 10px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .ksv-carousel-thumbs::-webkit-scrollbar { display:none; } .ksv-carousel-thumb { flex:0 0 72px; width:72px; height:72px; padding:0; border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; cursor:pointer; } .ksv-carousel-thumb.active { border-color:var(--wine-deep); box-shadow:0 8px 18px rgba(71,6,31,.16); } .ksv-carousel-thumb img { width:100%; height:100%; object-fit:cover; display:block; } .ksv-summary-item strong { overflow-wrap:anywhere; } @media (min-width: 768px) { .ksv-carousel-thumbs { min-height: 86px; } .ksv-carousel-thumb { flex-basis: 84px; width: 84px; height: 84px; } } #albumsSection { display:flex; flex-direction:column; } #albumsSection #vendorCarousel { order:1; } #albumsSection #carouselCaption { order:2; } #albumsSection #carouselThumbs { order:3; } #albumsSection #albumToolbar { order:4; margin-top:18px; margin-bottom:0; } .ksv-action-grid-top { margin-top:12px; } .ksv-summary-item-wide { grid-column:1 / -1; display:flex; align-items:center; } .ksv-summary-item-wide > span { display:inline-block; } .ksv-summary-item-wide > strong { display:inline-block; margin:0 0 0 6px; } .ksv-summary-pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; } .ksv-summary-pills .tag { padding:5px 8px; font-size:.66rem; } /* Two-level vendor filters: Group -> Service */ #homeVendorFilters, #categoryChips { display:grid; gap:7px; width:100%; min-width:0; overflow:visible; } .ks-filter-tier { display:flex; flex-wrap:nowrap; gap:8px; width:100%; min-width:0; overflow-x:auto; overflow-y:hidden; padding:2px 1px 4px; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .ks-filter-tier::-webkit-scrollbar { display:none; } .ks-filter-service-tier { padding-top:7px; border-top:1px solid rgba(123,18,60,.08); } .ks-filter-service-tier[hidden] { display:none !important; } .ks-filter-tier .home-vendor-filter, .ks-filter-tier .ksv-chip { flex:0 0 auto; white-space:nowrap; } /* Vendor filter hierarchy */ .ks-filter-group-tier { gap:10px; padding:4px 2px 10px; } .ks-filter-group-tier .ksv-chip, .ks-filter-group-tier .home-vendor-filter { min-height:44px; padding:10px 17px; border:1px solid rgba(123,18,60,.18); background:#fffaf7; color:var(--wine-deep); font-size:.78rem; font-weight:950; } .ks-filter-group-tier .ksv-chip.active, .ks-filter-group-tier .home-vendor-filter.active { color:#fff; background:var(--wine-deep); border-color:var(--wine-deep); box-shadow:0 10px 22px rgba(71,6,31,.18); } .ks-filter-service-tier { gap:7px; padding:10px 2px 4px; border-top:1px solid rgba(123,18,60,.12); background:rgba(181,23,85,.025); } .ks-filter-service-tier .ksv-chip, .ks-filter-service-tier .home-vendor-filter { min-height:36px; padding:7px 12px; border:1px solid rgba(181,23,85,.14); background:#fff; color:var(--wine); font-size:.70rem; font-weight:850; } .ks-filter-service-tier .ksv-chip.active, .ks-filter-service-tier .home-vendor-filter.active { color:var(--wine-deep); background:#f9d9e7; border-color:rgba(181,23,85,.28); box-shadow:none; } .ksv-based-line { min-height:22px; } .ksv-summary-item-wide { min-height:52px; } .ksv-summary-pills { min-height:28px; max-height:62px; overflow:auto; align-content:flex-start; } .ksv-action-grid-top { min-height:52px; } /* Keep vendor above-the-fold layout stable while API data loads */ .ksv-based-line { min-height:22px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ksv-action-grid-top { min-height:52px; } .ksv-summary-item-wide { min-height:52px; } .ksv-summary-pills { display:flex; flex-wrap:wrap; gap:6px; min-height:28px; max-height:none; overflow:visible; align-content:flex-start; } .ksv-summary-pills .tag { flex:0 0 auto; white-space:nowrap; } .ksv-summary-pills::-webkit-scrollbar { display:none; } /* Vendor detail: hidden elements must really stay hidden */ .ksv-page [hidden] { display:none !important; } #vendorCarousel { width:100%; } #vendorCarousel .ksv-hero-media { width:100%; aspect-ratio:16 / 9; min-height:0; } #vendorCarousel .ksv-hero-image { display:block; width:100%; height:100%; object-fit:contain; } @media (max-width:600px) { #vendorCarousel .ksv-hero-media { aspect-ratio:4 / 3; } } #albumToolbar { min-height:88px; max-height:88px; overflow:hidden; } #albumTabs { display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; } #albumTabs::-webkit-scrollbar { display:none; } #carouselThumbs { min-height:94px; max-height:94px; } #carouselCaption { min-height:20px; max-height:20px; overflow:hidden; } .ks-edit-service-group-title { grid-column:1 / -1; margin-top:10px; padding:8px 4px 3px; color:var(--wine-deep); font-size:.78rem; font-weight:950; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid rgba(123,18,60,.10); } .ks-edit-service-group-title:first-child { margin-top:0; } .ks-edit-service-bestfor { margin-top:24px; padding-top:20px; border-top:1px solid rgba(123,18,60,.12); } .ks-edit-service-bestfor h3 { margin:0 0 5px; color:var(--wine-deep); } .ks-edit-service-bestfor > p { margin:0 0 14px; color:var(--muted); font-weight:650; } #bestForEmpty { display:block; color:var(--muted); font-weight:700; } /* Vendor edit top section tabs */ .ks-edit-jumpbar { position:sticky; top:0; z-index:20; } .ks-edit-jumpbar a { transition:background .15s ease,color .15s ease,border-color .15s ease; } .ks-edit-jumpbar a.active { background:var(--wine-deep); color:#fff; border-color:var(--wine-deep); box-shadow:0 8px 18px rgba(71,6,31,.15); } .ks-edit-section[hidden] { display:none !important; } .home-popular-group-title { grid-column: 1 / -1; margin: 20px 0 2px; color: var(--wine-deep); font-size: 1rem; font-weight: 900; } .home-popular-group-title:first-child { margin-top: 0; } /* Generated / actual vendor image par old decorative overlay hatao */ .ksv-media::before, .ksv-media::after, .home-vendor-media::before, .home-vendor-media::after { content: none !important; display: none !important; } /* Package preview and editing separation */ .ks-edit-start-guide { display: flex; align-items: center; gap: 10px; margin: -2px 0 15px; padding: 10px 12px; border: 1px solid rgba(181,23,85,.13); border-radius: 14px; background: #fff8fb; color: var(--muted); font-size: .72rem; font-weight: 700; line-height: 1.4; } .ks-edit-start-guide > strong { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: var(--wine); color: #fff; font-size: .62rem; font-weight: 950; letter-spacing: .04em; text-transform: uppercase; } .ks-edit-start-guide b { color: var(--wine-deep); } [data-package-card] { overflow: visible; border: 0; background: transparent; box-shadow: none; } [data-package-card].is-editing { border-color: transparent; box-shadow: none; } .ks-edit-item-preview[data-package-preview] { position: relative; margin: 12px; padding: 16px; border: 1px solid rgba(51,65,85,.18); border-left: 4px solid #64748b; border-radius: 16px; background: #f7f9fc; } .ks-edit-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; } .ks-edit-preview-bar > div { display: grid; gap: 2px; } .ks-edit-preview-bar strong { color: #334155; font-size: .68rem; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; } .ks-edit-preview-bar > div > span { color: #64748b; font-size: .65rem; font-weight: 700; } .ks-edit-preview-hint { flex: 0 0 auto; color: var(--wine); font-size: .67rem; font-weight: 950; } [data-edit-package-preview] { position: relative; isolation: isolate; cursor: pointer !important; user-select: none; outline: none; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } [data-edit-package-preview] * { pointer-events: none; cursor: pointer !important; } [data-edit-package-preview]::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: rgba(255,255,255,.06); cursor: pointer !important; } [data-edit-package-preview]:hover { transform: translateY(-1px); border-color: rgba(123,18,60,.3); box-shadow: 0 8px 20px rgba(71,6,31,.08); } [data-edit-package-preview]:focus-visible { outline: 3px solid rgba(181,23,85,.22); outline-offset: 3px; } .ks-edit-item-editor[data-package-editor] { margin: 12px; padding: 16px; border: 1px solid rgba(181,23,85,.2); border-left: 4px solid var(--rani); border-radius: 16px; background: #fff8fb; } .ks-edit-editor-copy { display: grid; gap: 3px; } .ks-edit-editor-copy > span { color: var(--rani); font-size: .62rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; } .ks-edit-editor-copy > small { color: var(--muted); font-size: .65rem; font-weight: 700; } [data-package-card] [data-edit-package] { display: none; } @media (hover: hover) and (pointer: fine) { [data-package-preview] .ks-edit-item-actions { max-height: 0; margin-top: 0; padding-top: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-5px); transition: max-height .18s ease, margin-top .18s ease, padding-top .18s ease, opacity .15s ease, transform .15s ease, visibility .15s ease; } [data-package-preview]:hover .ks-edit-item-actions, [data-package-preview]:focus-within .ks-edit-item-actions { max-height: 60px; margin-top: 10px; padding-top: 2px; opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } } @media (max-width: 520px) { .ks-edit-start-guide { align-items: flex-start; flex-direction: column; } .ks-edit-preview-bar { align-items: flex-start; } [data-package-card] .ks-edit-editor-title { align-items: stretch; flex-direction: column; } [data-package-card] .ks-edit-editor-title .ks-edit-done-btn { width: 100%; } } /* Album and FAQ preview/edit separation */ [data-album-card], [data-faq-card] { overflow: visible; border: 0; background: transparent; box-shadow: none; } [data-album-card].is-editing, [data-faq-card].is-editing { border-color: transparent; box-shadow: none; } .ks-edit-item-preview[data-album-preview], .ks-edit-item-preview[data-faq-preview] { position: relative; margin: 12px; padding: 16px; border: 1px solid rgba(51,65,85,.18); border-left: 4px solid #64748b; border-radius: 16px; background: #f7f9fc; } .ks-edit-item-editor[data-album-editor], .ks-edit-item-editor[data-faq-editor] { margin: 12px; padding: 16px; border: 1px solid rgba(181,23,85,.2); border-left: 4px solid var(--rani); border-radius: 16px; background: #fff8fb; } :is( [data-edit-album-preview], [data-edit-faq-preview] ) { position: relative; isolation: isolate; cursor: pointer !important; user-select: none; outline: none; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } :is( [data-edit-album-preview], [data-edit-faq-preview] ) * { pointer-events: none; cursor: pointer !important; } :is( [data-edit-album-preview], [data-edit-faq-preview] )::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: rgba(255,255,255,.06); cursor: pointer !important; } :is( [data-edit-album-preview], [data-edit-faq-preview] ):hover { transform: translateY(-1px); border-color: rgba(123,18,60,.3); box-shadow: 0 8px 20px rgba(71,6,31,.08); } :is( [data-edit-album-preview], [data-edit-faq-preview] ):focus-visible { outline: 3px solid rgba(181,23,85,.22); outline-offset: 3px; } [data-album-card] [data-edit-album], [data-faq-card] [data-edit-faq] { display: none; } @media (hover: hover) and (pointer: fine) { :is( [data-album-preview], [data-faq-preview] ) .ks-edit-item-actions { max-height: 0; margin-top: 0; padding-top: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-5px); transition: max-height .18s ease, margin-top .18s ease, padding-top .18s ease, opacity .15s ease, transform .15s ease, visibility .15s ease; } :is( [data-album-preview], [data-faq-preview] ):hover .ks-edit-item-actions, :is( [data-album-preview], [data-faq-preview] ):focus-within .ks-edit-item-actions { max-height: 60px; margin-top: 10px; padding-top: 2px; opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } } @media (max-width: 520px) { [data-album-card] .ks-edit-editor-title, [data-faq-card] .ks-edit-editor-title { align-items: stretch; flex-direction: column; } [data-package-card] .ks-edit-editor-title .ks-edit-done-btn { width: 100%; } } /* Album and FAQ preview/edit separation */ [data-album-card], [data-faq-card] { overflow: visible; border: 0; background: transparent; box-shadow: none; } [data-album-card].is-editing, [data-faq-card].is-editing { border-color: transparent; box-shadow: none; } .ks-edit-item-preview[data-album-preview], .ks-edit-item-preview[data-faq-preview] { position: relative; margin: 12px; padding: 16px; border: 1px solid rgba(51,65,85,.18); border-left: 4px solid #64748b; border-radius: 16px; background: #f7f9fc; } .ks-edit-item-editor[data-album-editor], .ks-edit-item-editor[data-faq-editor] { margin: 12px; padding: 16px; border: 1px solid rgba(181,23,85,.2); border-left: 4px solid var(--rani); border-radius: 16px; background: #fff8fb; } :is( [data-edit-album-preview], [data-edit-faq-preview] ) { position: relative; isolation: isolate; cursor: pointer !important; user-select: none; outline: none; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } :is( [data-edit-album-preview], [data-edit-faq-preview] ) * { pointer-events: none; cursor: pointer !important; } :is( [data-edit-album-preview], [data-edit-faq-preview] )::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; background: rgba(255,255,255,.06); cursor: pointer !important; } :is( [data-edit-album-preview], [data-edit-faq-preview] ):hover { transform: translateY(-1px); border-color: rgba(123,18,60,.3); box-shadow: 0 8px 20px rgba(71,6,31,.08); } :is( [data-edit-album-preview], [data-edit-faq-preview] ):focus-visible { outline: 3px solid rgba(181,23,85,.22); outline-offset: 3px; } [data-album-card] [data-edit-album], [data-faq-card] [data-edit-faq] { display: none; } @media (hover: hover) and (pointer: fine) { :is( [data-album-preview], [data-faq-preview] ) .ks-edit-item-actions { max-height: 0; margin-top: 0; padding-top: 0; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-5px); transition: max-height .18s ease, margin-top .18s ease, padding-top .18s ease, opacity .15s ease, transform .15s ease, visibility .15s ease; } :is( [data-album-preview], [data-faq-preview] ):hover .ks-edit-item-actions, :is( [data-album-preview], [data-faq-preview] ):focus-within .ks-edit-item-actions { max-height: 60px; margin-top: 10px; padding-top: 2px; opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } } @media (max-width: 520px) { [data-album-card] .ks-edit-editor-title, [data-faq-card] .ks-edit-editor-title { align-items: stretch; flex-direction: column; } [data-album-card] .ks-edit-editor-title .ks-edit-done-btn, [data-faq-card] .ks-edit-editor-title .ks-edit-done-btn { width: 100%; } } .ksv-hero-image { cursor: zoom-in; } .ksv-carousel-thumb { cursor: pointer; } .ksv-lightbox-open { overflow:hidden; } .ksv-image-lightbox { position:fixed; z-index:9999; inset:0; display:flex; align-items:center; justify-content:center; padding:60px 80px; background:rgba(20,5,12,.94); } .ksv-image-lightbox[hidden] { display:none; } .ksv-lightbox-image { display:block; max-width:92vw; max-height:88vh; object-fit:contain; border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,.45); } .ksv-lightbox-close, .ksv-lightbox-nav { position:absolute; border:0; color:#fff; background:rgba(255,255,255,.14); cursor:pointer; } .ksv-lightbox-close { top:18px; right:22px; width:46px; height:46px; border-radius:50%; font-size:2rem; line-height:1; } .ksv-lightbox-nav { top:50%; width:52px; height:52px; border-radius:50%; transform:translateY(-50%); font-size:2rem; } .ksv-lightbox-prev { left:18px; } .ksv-lightbox-next { right:18px; } .ksv-lightbox-count { position:absolute; bottom:18px; left:50%; padding:7px 12px; border-radius:999px; color:#fff; background:rgba(0,0,0,.55); font-size:.78rem; font-weight:900; transform:translateX(-50%); } @media (max-width:640px) { .ksv-image-lightbox { padding:58px 12px 76px; } .ksv-lightbox-nav { top:auto; bottom:16px; transform:none; } } .satkar-price-list { padding:0; display:grid; } .satkar-price-list span { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 14px; border-bottom:1px solid var(--gold-line); } .satkar-price-list span:last-child { border-bottom:0; } .satkar-price-list strong { color:var(--wine); white-space:nowrap; } #vendorName { max-width: 100%; overflow-wrap: anywhere; word-break: normal; text-wrap: balance; } html, body { max-width: 100%; overflow-x: clip; } .ksv-detail-grid > *, .ksv-sticky-aside, .ksv-detail-card { min-width: 0; } #vendorName { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } @media (max-width: 600px) { .topbar .nav { gap: 8px; } .topbar .brand { flex: 1 1 auto; min-width: 0; } .topbar .brand-copy { min-width: 0; } .topbar .brand-copy > span { display: none !important; } .topbar .brand-copy strong { min-width: 0 !important; font-size: .88rem !important; } .topbar .nav > .btn { flex: 0 1 155px; min-width: 0; padding-inline: 12px; } } /* Keep footer CTA centred without stretching */ .footer .cta-actions { display: flex; justify-content: center; } .footer .cta-actions .btn { width: auto; min-width: 230px; max-width: 100%; } @media (min-width: 720px) { .home-hero .hero-actions { display: flex; flex-wrap: wrap; align-items: center; } .home-hero .hero-actions .btn { width: auto; min-width: 190px; } } /* Vendor detail: prevent long content from widening mobile page */ .ksv-detail-grid, .ksv-detail-grid > div, .ksv-sticky-aside, .ksv-detail-card, .ksv-package-grid, .ksv-package-card, .ksv-faq-list, .ksv-faq-item { min-width: 0; max-width: 100%; } .ksv-package-card h4, .ksv-package-card p, .ksv-package-card li, .ksv-service-list li, .ksv-faq-item summary, .ksv-faq-answer { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .ksv-package-top { min-width: 0; } .ksv-package-card h4 { min-width: 0; } @media (max-width: 600px) { .ksv-package-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; } .ksv-package-price { max-width: 110px; white-space: normal; overflow-wrap: anywhere; text-align: right; } } .ks-edit-photo-card.is-listing-thumbnail { border-color: var(--rani); box-shadow: 0 0 0 2px rgba(181, 23, 85, .12); } .ks-edit-listing-thumbnail-badge { top: auto; bottom: 6px; left: 6px; background: rgba(123, 18, 60, .94); color: #fff; } .ks-edit-photo-card .ks-edit-thumbnail-btn { width: 100%; border-radius: 0; border-right: 0; border-bottom: 0; border-left: 0; } .ks-edit-photo-card .ks-edit-thumbnail-btn:disabled { opacity: 1; background: #f8e8ef; color: var(--rani); cursor: default; } .ks-edit-photo-card { display: flex; flex-direction: column; height: 100%; } .ks-edit-photo-card [data-set-main-photo] { width: auto; align-self: center; margin: 6px auto; flex: none; } .ks-edit-photo-card .ks-edit-thumbnail-btn { margin-top: auto; flex: none; }