/* InstantQuoteS7 styling. * * Visual parity with the legacy `instant_quote` Vue app, ported onto the s7 * markup. Design language lifted from the old style.css: * - purple #5e4896 (brand) / #5f4798 (alt) - orange #ff9600 (prices, CTAs) * - Roboto, 16-24px - 10px radii, #ccc borders * - tab-style package selector (active fill #f4f2ff) * - image + purple title-bar cards, white box-shadow panels on checkout. * * SCOPING: every rule is confined to the `.iq-s7` root so nothing here can * affect the surrounding theme, the page, or any other plugin. Do not add bare * element or theme-class selectors to this file. */ .iq-s7 { max-width: 1420px; margin: 0 auto; background: #fff; border: 0; border-radius: 10px; color: #333; font-family: 'Roboto', Arial, sans-serif; font-size: 16px; } .iq-s7 *, .iq-s7 *::before, .iq-s7 *::after { box-sizing: border-box; } /* Make any hidden element inside the app truly hide, even when it otherwise carries display:grid/flex (the package/view toggles depend on this). Scoped to .iq-s7 so it cannot influence anything outside the plugin. */ .iq-s7 [hidden] { display: none !important; } .iq-s7-error { background: #fdecea; color: #b71c1c; padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; } .iq-s7-muted, .iq-s7-empty { color: #8a82a6; } /* ---- Buttons -------------------------------------------------------------- */ .iq-s7-btn { display: inline-block; background: #ff9600; color: #fff; border: 0; border-radius: 10px; padding: 14px 30px; font-weight: 500; font-size: 16px; text-transform: uppercase; letter-spacing: .02em; cursor: pointer; text-decoration: none; line-height: 1.2; } .iq-s7-btn:hover { filter: brightness(.96); } .iq-s7-btn[disabled] { opacity: .5; cursor: not-allowed; } .iq-s7-btn-secondary { background: #5e4896; } /* Keep the secondary (purple) buttons' text readable on hover — the theme's link-hover rule otherwise tints it toward the button colour. Orange instead. */ .iq-s7 .iq-s7-btn-secondary:hover, .iq-s7 .iq-s7-more-info:hover { color: #ff9600 !important; } /* ---- Search form ---------------------------------------------------------- */ .iq-s7-form { border: 0; padding: 30px 40px; } .iq-s7-form-row { display: flex; gap: 20px; flex-wrap: wrap; } .iq-s7-field { flex: 1 1 260px; display: flex; flex-direction: column; } /* All three controls (2 date inputs + golfers select) sized 1:1 with the old app: 66px tall = 24px content + 20px padding top/bottom + 1px borders. No labels — the placeholder text inside the control carries the field name. */ .iq-s7-field input, .iq-s7-field select { width: 100%; height: 66px; padding: 20px 21px; border: 1px solid #5e4896; border-radius: 10px; font-size: 18px; line-height: 24px; color: #5e4896; font-weight: 500; background: #fff; } .iq-s7-field input::placeholder { color: #5e4896; opacity: 1; } .iq-s7-field input:focus, .iq-s7-field select:focus { outline: none; border-color: #5e4896; } /* Golfers select: native arrow off, icon (fa-users) pinned right like the old design. The "GOLFERS" placeholder option renders at full strength (matching the old app); a chosen number shows in the same purple. */ .iq-s7-select-wrap { position: relative; } .iq-s7-field-golfers select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 50px; cursor: pointer; } .iq-s7-field-golfers select:invalid { color: #5e4896; opacity: 1; } .iq-s7-field-icon { position: absolute; top: 50%; right: 18px; transform: translateY(-50%); color: #5e4896; font-size: 20px; pointer-events: none; } /* jQuery UI datepicker is appended to (outside .iq-s7), so it can't be nested under the app root. These rules are doubly scoped instead: this file only loads on the instant-quote page, AND they're gated by the .iq-s7-datepicker class our JS adds — so no other plugin's picker is affected. The theme pads/borders all table cells, which overflowed the picker's fixed 17em width; reset that. */ /* !important is needed because the Avada theme's table-cell rules win on specificity (custom-quote does the same); safe here — gated by the class and this file only loads on the instant-quote page. */ #ui-datepicker-div.iq-s7-datepicker { width: auto !important; z-index: 100000 !important; } #ui-datepicker-div.iq-s7-datepicker table { width: auto !important; margin: 0 !important; } #ui-datepicker-div.iq-s7-datepicker th, #ui-datepicker-div.iq-s7-datepicker td { border: 0 !important; padding: 1px !important; } .iq-s7-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 24px 0; } .iq-s7-day { border: 1px solid #5f4798; border-radius: 10px; overflow: hidden; } /* Day-head mirrors the package-card title bar: light-purple tint, purple border, purple title text (the .iq-s7-package / .iq-s7-package-title tokens). */ .iq-s7-day-head { background: #f4f2ff; color: #5e4896; padding: 14px 12px; font-weight: 500; font-size: 16px; text-align: center; border-bottom: 4px solid #5f4798; } .iq-s7-day-opts { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .iq-s7-day-opts label { display: flex; align-items: center; gap: 10px; font-size: 16px; color: #5e4896; } #iq-continue { display: block; margin: 28px auto 0; min-width: 280px; text-align: center; } /* ---- Quote head ----------------------------------------------------------- */ .iq-s7-quote-head { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 20px; gap: 16px; } /* Quote-id label was removed, leaving New Quote alone — keep it on the right. */ .iq-s7-new-quote { margin-left: auto; } /* ---- Package selector (tab style) ----------------------------------------- */ .iq-s7-packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; border-bottom: 4px solid #5e4896; padding-bottom: 0; margin-bottom: 28px; } .iq-s7-package { border: 1px solid #5f4798; border-bottom: 0; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 24px 16px; text-align: center; text-decoration: none; color: #5e4896; background: #fff; cursor: pointer; } .iq-s7-package.is-active { background: #f4f2ff; } .iq-s7-package-title { display: block; font-weight: 500; font-size: 20px; color: #5e4896; } .iq-s7-package-price { display: block; color: #ff9600; margin-top: 12px; font-weight: 700; font-size: 20px; } /* ---- Sections ------------------------------------------------------------- */ .iq-s7-section { margin-bottom: 32px; } .iq-s7-section h3 { color: #5e4896; font-size: 22px; font-weight: 500; border-bottom: 2px solid #5e4896; padding-bottom: 10px; margin-bottom: 18px; } /* Section header with a right-aligned action (the "Customize" bridge button). The underline moves to the wrapper so it still spans the full width; the h3 keeps its colour/size but drops its own border/spacing inside the wrapper. */ .iq-s7-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; border-bottom: 2px solid #5e4896; padding-bottom: 10px; margin-bottom: 18px; } .iq-s7-section-head h3 { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .iq-s7-customize { padding: 10px 18px; margin-top: 20px; font-size: 14px; white-space: nowrap; flex-shrink: 0; } /* Cards: image, purple title bar, boxed-value info rows, footer button — matched to the legacy golf/lodging/car card look. */ .iq-s7-golf-list, .iq-s7-lodging-list, .iq-s7-car-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 340px)); gap: 20px; } .iq-s7-golf, .iq-s7-lodging, .iq-s7-car { display: flex; flex-direction: column; border: 1px solid #ccc; border-radius: 10px; overflow: hidden; background: #fff; } /* width !important + extra specificity beats the theme's global `img { width:auto }`, which otherwise sizes the photo by aspect ratio and leaves a white gap each side. */ .iq-s7 .iq-s7-golf-img, .iq-s7 .iq-s7-lodging-img, .iq-s7 .iq-s7-car-img { width: 100% !important; max-width: 100% !important; height: 239px; object-fit: cover; display: block; } /* Purple title bar — force Roboto/size/weight over the theme's heading typography (Avada injects fusion-responsive-typography onto h4). Scoped, so it's safe. */ .iq-s7 .iq-s7-golf h4, .iq-s7 .iq-s7-lodging h4, .iq-s7 .iq-s7-car h4 { margin: 0; background: #5e4896; padding: 4px 12px; text-align: center; /* Fixed height + tight line-height (old-app values): a long name like "Verrado Victory Course w/ voucher" wraps within the bar without making it — or the card — taller. height/line-height need !important to beat the theme's heading rules. */ height: 63px !important; display: flex !important; align-items: center; justify-content: center; overflow: hidden; overflow-wrap: break-word; font-family: 'Roboto', Arial, sans-serif !important; font-size: 25px !important; font-weight: 500 !important; line-height: 19px !important; color: #fff !important; } /* Body insets: the image, title bar and footer span the full card width; detail rows are padded. Explicit per-element padding (not a blanket child rule) so it never inflates buttons, and the lodging variant wrapper stays transparent. */ /* Lodging variant behaves like a golf/car card body: full-width image + title bar with padded rows inside. The condo-type selector becomes a footer bar (mirrors golf's footer), pinned to the card bottom. */ .iq-s7-condo-variant { display: flex; flex-direction: column; } /* Condo-type + bedroom selects live in the card body now (icon label + full-width select), matching the display rows above — no special footer treatment. */ /* gap matches the kv rows (15px, not the control-row default 10px) so the condo-type select lines up with — and is the same width as — the kv strong values. */ .iq-s7-lodging .iq-s7-condo-type-row { padding: 8px 20px; gap: 15px; } .iq-s7-lodging .iq-s7-control-row > span { flex: 0 0 26px; width: 26px; min-width: 26px; text-align: center; color: #5e4896; } .iq-s7-lodging .iq-s7-control-row > span i { font-size: 16px !important; } /* min-width:0 lets the select shrink to the same width as the value boxes/other selects — without it, a long selected option (e.g. the full condo-type name) keeps the select at its content width and overflows the row. The legacy app showed the selected label in a smaller-font span with a separate always-visible arrow; the native-select equivalent is appearance:none + a custom chevron pinned right with reserved padding (so the long text can never cover it) plus a smaller font so more of the label shows. */ .iq-s7-lodging .iq-s7-control-row select { flex: 1 1 auto; min-width: 0; max-width: none; height: 36px; border: 1px solid #ccc; border-radius: 5px; color: #5e4896; font-size: 14px; padding: 0 28px 0 8px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%226%22%3E%3Cpath%20fill%3D%22%235e4896%22%20d%3D%22M0%200l5%206%205-6z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: right 10px center; } /* Lodging amenities: a compact, continuous run of icon + label items (tight spacing, wraps to ~2-3 lines) — same fields/icons as the legacy plugin. */ .iq-s7-amenities { list-style: none; margin: 0; padding: 12px 20px 4px; display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: 13px; line-height: 1.3; color: #5e4896; } .iq-s7-amenities li { display: inline-flex; align-items: center; gap: 6px; } .iq-s7-amenities li i { width: 16px; text-align: center; color: #5e4896; font-size: 13px; } /* The theme styles individual FA icons (i.fas.fa-bed gets position:absolute, i.fas.fa-parking gets margins + 18px, etc.). Neutralise all of that for icons inside our cards so they sit in flow at a uniform size. */ .iq-s7-amenities i, .iq-s7-kv i, .iq-s7-control-row i { position: static !important; margin: 0 !important; } .iq-s7-amenities li i { font-size: 14px !important; } /* Dashed divider under the amenities (lodging + car), separating them from the rows below (matches the dashed rule used on the car form). */ .iq-s7-amenities { border-bottom: 1px dashed #e3e0ee; padding-bottom: 12px; margin-bottom: 6px; } .iq-s7-lodging .iq-s7-kv li > span i { font-size: 16px !important; } /* Lodging display-only rows (Arrive / Depart / Guests): icon label + dimmed to signal they're not editable (opacity, not a grey colour). */ .iq-s7-lodging .iq-s7-kv li { opacity: .7; } .iq-s7-lodging .iq-s7-kv li > span { flex: 0 0 26px; width: 26px; min-width: 26px; text-align: center; color: #5e4896; } .iq-s7-lodging .iq-s7-kv li > span i { font-size: 16px; } /* Same dimming on golf's display-only rows (Day of play / Players / Unlimited), but NOT the editable Tee Time row (which carries .iq-s7-control-row). */ .iq-s7-golf .iq-s7-kv li:not(.iq-s7-control-row) { opacity: .7; } /* Info rows: purple label (fixed width) + boxed value, like the old .instant-value. */ .iq-s7-kv { list-style: none; margin: 0; padding: 16px 20px 8px; } .iq-s7-kv li { display: flex; align-items: center; gap: 15px; padding: 8px 0; font-size: 16px; color: #5e4896; } .iq-s7-kv li > span { flex: 0 0 110px; color: #5e4896; } .iq-s7-kv li > strong { flex: 1 1 auto; font-weight: 500; color: #5e4896; border: 1px solid #ccc; border-radius: 5px; padding: 5px 12px; text-align: left; cursor: not-allowed; } /* Tee-time row inside a card: label + select box. The select carries no padding (its 36px height sets the size) so it lines up with the value boxes. */ .iq-s7-kv .iq-s7-control-row { padding: 8px 0; } .iq-s7-kv .iq-s7-control-row > span { flex: 0 0 110px; color: #5e4896; font-size: 16px; } .iq-s7-kv .iq-s7-control-row select { flex: 1 1 auto; height: 36px; border: 1px solid #ccc; border-radius: 5px; padding: 0; color: #5e4896; font-size: 16px; } /* Footer bar with the orange "More Info" button, pinned to the card bottom. */ .iq-s7-card-foot { margin-top: auto; min-height: 55px; display: flex; align-items: center; justify-content: flex-end; padding: 11px 20px; background: #f0e9ff; border-top: 1px solid #ccc; } /* Secondary action (purple, like New Quote) — primary CTAs stay orange. border:0 / cursor / font-family so it looks identical on a