/* Google Places autocomplete: mobile dropdown must be tappable. - touch-action: auto overrides jQuery UI .ui-sortable-handle (etc.) so tap/scroll work. - z-index ensures dropdown appears above fixed headers/overlays. - .pac-item min-height improves tap target on mobile. */ #autocomplete, #autocomplete_billing, #autocomplete_businessprincipleHome, #locationField input, .pac-container { touch-action: auto !important; } .pac-container { z-index: 99999 !important; } .pac-item { touch-action: auto !important; min-height: 44px; padding: 8px 12px; cursor: pointer; } .pac-item span { touch-action: auto !important; } .upload-sections { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 40px; margin: 0 auto; max-width: 900px; text-align: center; padding-top: 20px; } .middle-or { display: flex; justify-content: center; align-items: center; } .upload-btn { width: 100%; max-width: 325px; } /* Minimum touch target for mobile (44px per accessibility guidelines) */ .upload-trigger-btn { min-height: 44px; padding-top: 10px; padding-bottom: 10px; } /* File input as button: the input is the only control (no overlay/label). Wrap provides button look. */ .upload-trigger-wrap { position: relative; display: inline-block; width: 100%; max-width: 325px; min-height: 44px; margin-top: 10px; margin-bottom: 10px; touch-action: manipulation; /* Button look - match .btn .btn-primary */ padding: 10px 16px; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; color: #fff; background-color: #337ab7; border-color: #2e6da4; } .upload-trigger-wrap:hover { color: #fff; background-color: #286090; border-color: #204d74; } /* Opacity 0.001 (not 0) so mobile still delivers touch to the input; visually invisible */ .upload-input-as-btn { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; cursor: pointer; opacity: 0.001; font-size: 0; border: 0; z-index: 1; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .upload-input-as-btn-label { position: relative; z-index: 0; pointer-events: none; display: block; min-height: 44px; padding-top: 10px; padding-bottom: 10px; line-height: 1.42857143; font-size: 14px; } /* Make both uploads the same width */ .upload { /*flex: 1 1 350px; max-width: 500px;*/ box-sizing: border-box; } /* Base phone upload block */ .upload-phone { display: flex; justify-content: center; align-items: center; } /* Default: both uploads visible */ .upload-sections.both-uploads { flex-direction: row; } .upload-sections.both-uploads .upload-phone { width: 100%; flex-direction: column; } .upload-sections.both-uploads .or-text { margin-bottom: 10px; } /* When only one upload visible */ .upload-sections.single-upload { justify-content: center; } .upload-sections.single-upload .upload-phone { flex-direction: column; justify-content: center; margin: 0; } .upload-sections.single-upload .or-text { margin-bottom: 10px; } .upload-file-row { background-color: #dff0d8; } /* ========================================================================== Promo code (Subscription Engine create-account page) Deliberately theme-agnostic. themes/{brand}/theme.css is appended to at runtime, so it wins over this file on equal specificity - anything that has to beat a theme rule (.btn-primary padding, .form-control margin) is scoped through .promo-block to raise specificity. Colours are fixed neutrals rather than brand values: the brands range from green to blue to lime, and the applied-offer stub has to stay legible on all of them. ========================================================================== */ .promo-block { padding-top: 18px; text-align: left; } /* Field + Apply on one line; the field takes all the room that is left. */ .promo-entry { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 12px; } .promo-block .promo-input { flex: 1 1 auto; min-width: 0; margin-bottom: 0; font-family: Consolas, Menlo, Monaco, "Courier New", monospace; letter-spacing: 1px; } /* A code is read character by character, so the value is monospaced - but the placeholder is a sentence and stays in the body face. */ .promo-block .promo-input::-webkit-input-placeholder { font-family: 'Nunito', sans-serif; letter-spacing: normal; } .promo-block .promo-input::-moz-placeholder { font-family: 'Nunito', sans-serif; letter-spacing: normal; } .promo-block .promo-input:-ms-input-placeholder { font-family: 'Nunito', sans-serif; letter-spacing: normal; } .promo-block .promo-input::placeholder { font-family: 'Nunito', sans-serif; letter-spacing: normal; } .promo-block .btn.promo-apply { flex: 0 0 auto; margin: 0; padding: 14px 32px; line-height: 1.15; white-space: nowrap; } /* Reserve the line so applying a code does not shift the page. */ .promo-status { min-height: 21px; margin-top: 8px; font-size: 14px; line-height: 21px; } .promo-status-working { color: #6b7377; } .promo-status-ok { color: #2f7d32; font-weight: 600; } .promo-status-bad { color: #a94442; } /* Applied offer: a torn-off voucher stub. The dashed edge belongs to this state alone, so it never reads as a warning. */ .promo-offer { margin-top: 14px; padding: 18px 22px; background-color: #fbfcfb; border: 1px solid #dcdfdd; border-left: 3px dashed #b9c2bd; color: #2f3437; animation: promo-offer-in 180ms ease-out both; } @keyframes promo-offer-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .promo-offer { animation: none; } } .promo-offer-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; } .promo-offer-mark { margin-right: 9px; color: #2f7d32; font-size: 15px; } .promo-offer-headline { flex: 1 1 auto; min-width: 0; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: .2px; } .promo-offer-code { flex: 0 0 auto; max-width: 100%; padding: 3px 9px; border: 1px solid #d3e2d3; border-radius: 2px; background-color: #eef4ee; color: #2f7d32; font-family: Consolas, Menlo, Monaco, "Courier New", monospace; font-size: 12px; letter-spacing: 1.5px; word-break: break-all; } .promo-offer-body { margin: 10px 0 0; font-size: 15px; line-height: 1.5; } .promo-offer-fine { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #e6e9e7; color: #6b7377; font-size: 12px; line-height: 1.45; } /* Could not apply the code at save: same shell, solid edge, alert ink. */ .promo-notice { margin-top: 16px; padding: 18px 22px; background-color: #fdf9f9; border: 1px solid #e6d6d6; border-left: 3px solid #a94442; color: #2f3437; } .promo-notice-text { margin: 0 0 14px; font-size: 15px; line-height: 1.5; } .promo-notice-actions { display: flex; flex-wrap: wrap; gap: 10px; } .promo-block .promo-notice-actions .btn { margin: 0; } @media (max-width: 600px) { .promo-entry { display: block; } .promo-block .promo-input { margin-bottom: 10px; } .promo-block .btn.promo-apply { display: block; width: 100%; } .promo-block .promo-notice-actions .btn { width: 100%; } }