/* BidSpot — The Bidding House for Website Traffic */ /* Modals, Split Checkout & Auction Dialog Styling */ /* Relies on css/variables.css being linked before this file in . */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(20, 18, 16, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--transition-normal); padding: 20px; } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal-card { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--radius-lg); width: 100%; max-width: 540px; box-shadow: none; transform: translateY(12px); transition: transform var(--transition-normal); overflow: hidden; display: flex; flex-direction: column; } .modal-overlay.active .modal-card { transform: translateY(0); } .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; background: var(--bg-card); } .modal-title { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 10px; letter-spacing: -0.01em; } .close-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-secondary); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: all var(--transition-fast); } .close-btn:hover { background: var(--accent-light); color: var(--accent-primary); } .modal-body { padding: 24px; max-height: 80vh; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-label { font-size: 0.84rem; font-weight: 600; color: var(--text-primary); } .form-input, .form-select, .form-textarea, .phone-prefix { width: 100%; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); font-size: 0.9rem; outline: none; font-family: var(--font-sans); transition: border-color var(--transition-fast), background-color var(--transition-fast); } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent-primary); background: var(--bg-card); } .form-input.input-error { border-color: var(--accent-primary); box-shadow: 0 0 0 1px var(--accent-primary); } .bid-presets { display: flex; flex-wrap: wrap; /* four "+₹50,000"-width chips don't fit one row on a phone */ gap: 8px; margin-top: 6px; } .preset-chip { flex: 1 1 auto; min-width: 0; padding: 8px 12px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-family: var(--font-serif); font-size: 0.84rem; font-weight: 700; color: var(--accent-primary); text-align: center; transition: all var(--transition-fast); } .preset-chip:hover { background: var(--accent-light); border-color: var(--accent-primary); } /* Phone row: a country-code picker (flag + dial code) on the left, the local number on the right. A single visual field split by a hairline so it reads as one control rather than two neighbours — same idea as the URL/category bar in the hero. .phone-input-wrapper had no rules at all before, and .phone-prefix used to pick up width:100% from the shared .form-input rule, which is what made the earlier "+91" render as a full-width stacked box. */ .phone-input-wrapper { display: flex; align-items: stretch; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); transition: border-color var(--transition-fast), background-color var(--transition-fast); } .phone-input-wrapper:focus-within { border-color: var(--accent-primary); background: var(--bg-card); } .phone-cc-select { flex-shrink: 0; border: none; border-right: 1px solid var(--border-color); background: transparent; padding: 10px 8px 10px 12px; border-radius: 0; /* Explicit emoji-first font stack: without it, Windows falls back to the base sans and renders 🇮🇳 as the ISO letters "IN". The emoji fonts here cover every platform (Segoe UI Emoji on Windows, Apple Color Emoji on macOS/iOS, Noto Color Emoji on most Android/Linux). Body sans stays as the final fallback for the dial code digits, which don't need emoji rendering. */ font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", var(--font-sans); font-size: 0.9rem; font-weight: 600; color: var(--text-primary); outline: none; cursor: pointer; /* Enough width for "+971" without collapsing the number field, but not so wide that the native chevron pushes off the flag on Windows. */ width: 92px; } .phone-field { flex: 1; min-width: 0; border: none; background: transparent; padding: 10px 14px; font-family: var(--font-sans); font-size: 0.9rem; color: var(--text-primary); outline: none; } /* The shared .form-input rule paints borders and backgrounds; we've moved that look to the wrapper, so undo the doubled framing on the inner input. */ .form-input.phone-field { border: none; background: transparent; } .form-input.phone-field:focus { background: transparent; } .payment-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 6px; } .analytics-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (max-width: 640px) { .payment-methods, .analytics-card-grid { grid-template-columns: 1fr; } .checkout-item-card { padding: 12px 14px; gap: 10px; } /* Narrower gutters so the form fields get the width back; the card itself stays a normal centred sheet (going full-bleed fought the overlay's own padding). */ .modal-overlay { padding: 14px; } .checkout-left-panel, .checkout-right-panel { padding: 20px 16px; } .modal-body { padding: 20px 16px; } .modal-header { padding: 16px 18px; } .modal-title { font-size: 1.05rem; } } /* Single-route Razorpay payment: an informational card telling the bidder what to expect. The old .payment-card picker, .upi-qr-box and .qr-code-img rules were removed when the flow simplified — see the note in js/ui.js:constructor(). */ .payment-info-card { display: flex; align-items: flex-start; gap: 12px; background: var(--accent-light); border: 1px solid var(--accent-border); border-radius: var(--radius-md); padding: 14px 16px; margin-top: 6px; } .payment-info-card svg { flex-shrink: 0; margin-top: 2px; } .payment-info-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .payment-info-text strong { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); } .payment-info-text span { font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary); } .confirm-rank-card { max-width: 500px; } .rank-price-confirm-box { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; margin-top: 6px; } .confirm-left-col, .confirm-right-col { display: flex; flex-direction: column; gap: 2px; } .confirm-right-col { text-align: right; } .confirm-box-label { font-family: var(--font-serif); font-size: 0.72rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; } .confirm-box-rank { font-family: var(--font-serif); font-size: 2.2rem; font-weight: 800; color: var(--text-primary); line-height: 1.1; margin: 0; } .confirm-box-price { font-family: var(--font-serif); font-size: 2.2rem; font-weight: 800; color: var(--accent-primary); line-height: 1.1; } .confirm-box-sub { font-size: 0.82rem; color: var(--text-secondary); } .terms-card-confirm { background: var(--accent-light); border: 1px solid var(--accent-border); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 8px; } .terms-checkbox-row { display: flex; align-items: flex-start; gap: 10px; } .terms-checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent-primary); cursor: pointer; margin-top: 2px; flex-shrink: 0; } .terms-label-text { font-size: 0.86rem; color: var(--text-primary); cursor: pointer; line-height: 1.4; } .confirm-actions-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; } .btn-cancel-confirm { flex: 1; padding: 12px 18px; border-radius: var(--radius-full); background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary); font-weight: 600; font-size: 0.9rem; cursor: pointer; } .btn-confirm-submit { flex: 1.5; padding: 12px 20px; border-radius: var(--radius-full); background: var(--accent-primary); color: #ffffff; font-weight: 700; font-size: 0.94rem; cursor: pointer; border: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .btn-confirm-submit:hover { background: var(--accent-primary-hover); } .bid-equivalent-badge { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 0.78rem; font-weight: 600; color: var(--accent-primary); background: var(--accent-light); padding: 4px 8px; border-radius: 4px; } .price-breakup-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 10px; } .breakup-header { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-serif); font-weight: 700; font-size: 0.92rem; color: var(--text-primary); } .breakup-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.84rem; color: var(--text-secondary); } .breakup-row.total { font-size: 1rem; font-weight: 700; color: var(--text-primary); padding-top: 6px; } .total-price-tag { font-family: var(--font-serif); color: var(--accent-primary); font-weight: 800; font-size: 1.15rem; } /* .vpa-copy-row and .btn-copy-vpa lived here for the removed UPI-QR block. */ .modal-card.split-checkout-card { max-width: 560px; width: 95%; max-height: 92vh; border-radius: var(--radius-lg); } .split-modal-body { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; max-height: calc(92vh - 74px); overflow-y: auto; } /* Both panels are grid items, which default to min-width:auto — so the panel sized itself to its widest unshrinkable child (the four preset chips in a nowrap row) rather than to its 1fr track. On a 375px phone that made a 317px modal lay out a 382px panel, pushing every field, label and button off the right edge. */ .checkout-left-panel { background: var(--bg-secondary); padding: 24px 20px; display: flex; flex-direction: column; gap: 18px; min-width: 0; } .checkout-right-panel { background: var(--bg-card); padding: 24px 28px; display: flex; flex-direction: column; gap: 18px; min-width: 0; } .panel-section-title { font-family: var(--font-serif); font-size: 0.95rem; font-weight: 700; color: var(--text-primary); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; } /* The "target rank + what you're buying" summary at the top of checkout step 1. None of these had any rules, so the card was an unstyled block stack and the rank badge — a plain
— stretched into a full-width maroon banner. */ .checkout-item-card { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 14px 16px; } .item-badge { background: var(--accent-primary); color: #ffffff; font-family: var(--font-serif); font-weight: 700; font-size: 0.88rem; padding: 5px 12px; border-radius: var(--radius-sm); flex-shrink: 0; align-self: flex-start; } .item-details { min-width: 0; } .item-title { font-family: var(--font-serif); font-size: 0.95rem; font-weight: 700; color: var(--text-primary); line-height: 1.35; overflow-wrap: anywhere; /* a pasted listing title can be one very long word */ } .item-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; } .btn-checkout-submit { width: 100%; margin-top: 12px; font-size: 1rem; padding: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; } /* Step 2's submit sits next to the Back button instead of alone, so it needs to share the row (flex:1.5, like .btn-confirm-submit) instead of width:100%. */ .btn-checkout-submit.in-row { width: auto; flex: 1.5; margin-top: 0; } /* Dedicated Analytics Dashboard Modal Styling */ .analytics-card { background: var(--bg-secondary); padding: 18px; border-radius: var(--radius-md); border: 1px solid var(--border-color); text-align: center; display: flex; flex-direction: column; gap: 4px; } .analytics-val { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 800; color: var(--accent-primary); } .analytics-lbl { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } /* Category Explorer Grid */ .modal-categories-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .modal-cat-box { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 14px; display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer; transition: all var(--transition-fast); } .modal-cat-box:hover { background: var(--bg-card-hover); border-color: var(--accent-primary); } .modal-cat-box strong { font-family: var(--font-serif); font-size: 0.95rem; } .modal-cat-box span { font-size: 0.78rem; color: var(--text-muted); } /* "This site is already on the board" notice in checkout step 1 — shown when the typed URL matches a live listing, so the bid tops that listing up instead of creating a duplicate (House Rules: one listing per website). */ /* A class rule with `display` outranks the UA stylesheet's [hidden]{display:none}, so this needs to opt back in explicitly — without it the notice rendered as an empty pink box on every single checkout. */ .topup-notice[hidden] { display: none; } .topup-notice { display: flex; align-items: flex-start; gap: 10px; background: var(--accent-light); border: 1px solid var(--accent-border); border-radius: var(--radius-md); padding: 12px 14px; color: var(--accent-primary); } .topup-notice svg { flex-shrink: 0; margin-top: 2px; } .topup-notice-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .topup-notice-text strong { font-size: 0.86rem; font-weight: 700; color: var(--accent-primary); } .topup-notice-text span { font-size: 0.8rem; line-height: 1.45; color: var(--text-secondary); } /* A field held by the listing being topped up — readable, but clearly not editable here, since changing it would rewrite someone's live listing as a side effect. */ .form-input[readonly], .form-select:disabled { background: var(--bg-secondary); color: var(--text-secondary); cursor: not-allowed; opacity: 1; /* override the browser's default washed-out disabled rendering */ } /* Mobile overrides for rules defined later in this file than the main 640px block above — same specificity, so they only win from here. */ @media (max-width: 640px) { /* Overlaid inside the amount field this covered most of the input on a phone — you couldn't read the number you were typing. Sits under the field instead. */ .bid-equivalent-badge { position: static; transform: none; display: inline-block; margin-top: 6px; } }