/*
 * GBP Audit Tool page: the business search form (styled after SEOptimer's keyword-tracking-tool
 * form, css/keyword-ranking-widget.css) and the listing-results modal (original app styling from
 * css/app.css, scoped). Loaded only on this page (FrontendController::actionGoogleBusinessProfileAudit).
 * The markup keeps the ids/classes js/dist/routes/gmb-audit.js + listing-finder.js rely on.
 */

/* --- search form ------------------------------------------------------------------------- */
.lr-audit-form { margin-top: 10px; }
/* business name | country | Audit on one row where the form has room (>=1200px, and 768-991px
   where the hero stacks and the form is full width); otherwise the name takes its own row */
.lr-audit-form .lr-audit-form-row { display: flex; flex-wrap: wrap; gap: 10px; }
.lr-audit-form .lr-audit-name { position: relative; flex: 1 1 100%; min-width: 0; }
.lr-audit-form .lr-audit-country { flex: 1 1 0; min-width: 0; }
.lr-audit-form .lr-audit-submit { flex: 0 0 auto; }
@media (min-width: 768px) and (max-width: 991px), (min-width: 1200px) {
    .lr-audit-form .lr-audit-form-row { flex-wrap: nowrap; }
    .lr-audit-form .lr-audit-name { flex: 1 1 auto; }
    .lr-audit-form .lr-audit-country { flex: 0 0 190px; }
}

/* inputs: SEOptimer's 2px black outline, 7px radius, 20px text */
.lr-audit-form input.form-control,
.lr-audit-form select.form-control {
    background-color: #fff;
    height: 60px;
    border: 2px solid #000;
    border-radius: 7px;
    font-size: 20px;
    color: #000;
    padding: 0 15px;
}
/* the country names are long, so a little smaller text in the narrow country box */
.lr-audit-form select.form-control { font-size: 17px; }
.lr-audit-form input.form-control::placeholder { color: #ACAEB3; }
.lr-audit-form input.form-control:focus,
.lr-audit-form select.form-control:focus { box-shadow: none; border-color: #000; }
.lr-audit-form input.form-control:disabled,
.lr-audit-form select.form-control:disabled { background-color: #f5f5f5; }
/* native select with its own arrow, as the theme strips the default */
.lr-audit-form select.form-control {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23000' stroke-width='2' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    text-overflow: ellipsis;
}
.lr-audit-form .lr-audit-submit button {
    height: 60px; padding: 0 26px; border: none; border-radius: 7px;
    font-size: 20px; font-weight: 500; white-space: nowrap;
}
.lr-audit-form .lr-audit-note { font-size: 15px; color: #73737B; margin-top: 14px; visibility: hidden; } /* empty: reserves the message line */
.lr-audit-form .lr-audit-note,
.lr-audit-form .lr-audit-error,
.lr-audit-form .lr-audit-status { line-height: 1.6; }

/* the old widget's search / clear addons are toggled by the JS; this form has its own button */
#listing-wrapper .public-search-control { display: none !important; }
.hidden { display: none !important; }

/* the loader lives in the Audit button (as on SEOptimer), not in the name box: the script fills the
   box with the chosen business and hides its spinner while the page is still redirecting */
#listing-wrapper .loader-spinner { display: none !important; }
.lr-audit-form .search-listing { position: relative; }
.lr-audit-form .search-listing .lr-btn-spinner {
    display: none; position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
    border-radius: 50%; border: 3px solid rgba(255, 255, 255, .45); border-left-color: #fff;
    animation: lr-spin 1s infinite linear;
}
.lr-audit-form .search-listing.lr-busy .lr-btn-label { visibility: hidden; } /* keeps the button's width */
.lr-audit-form .search-listing.lr-busy .lr-btn-spinner { display: block; }
@keyframes lr-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* empty-name validation */
.lr-audit-form input.form-control.lr-invalid { border-color: #e5484d; }
.lr-audit-form .lr-audit-error { display: none; font-size: 15px; color: #e5484d; margin-top: 14px; }
/* The error and the status lines sit over the note's spot rather than adding a line: the hero text
   column is vertically centred against the image, so any change in its height made the whole form jump.
   The note keeps its space (invisible) while one of them shows. */
.lr-audit-form { position: relative; }
.lr-audit-form .lr-audit-error,
.lr-audit-form .lr-audit-status { position: absolute; left: 0; right: 0; bottom: 0; margin-top: 0; }
.lr-audit-form .lr-audit-error.lr-show ~ .lr-audit-status { display: none !important; }
.lr-audit-form .lr-audit-error.lr-show ~ .lr-audit-note,
.lr-audit-form .report-listing-redirect[style*="block"] ~ .lr-audit-note { display: block !important; visibility: hidden; }
.lr-audit-form .lr-audit-error.lr-show { display: block; }

/* status line under the form, over the reserved note line (see above): "Searching…" while the lookup
   runs, then "Loading your audit…" once the script shows .report-listing-redirect (jQuery .show() sets
   display:block inline) */
.lr-audit-form .lr-audit-status { display: none; margin-top: 14px; font-size: 15px; color: #000; }
.lr-audit-form.lr-searching .lr-audit-searching { display: block; }
.lr-audit-form .report-listing-redirect[style*="block"] ~ .lr-audit-searching { display: none; }

/* --- listing results modal: the original app look (css/app.css) at the app's natural size ---------
   The app renders it with Bootstrap 3 on a 14px base; this theme's Bootstrap 4 sizes modals in rem on
   a 16px base, which made everything ~14% bigger. So the sizes are pinned in px to the Bootstrap 3 values. */
#listingSearchModal .modal-content { font-size: 14px; line-height: 1.85714286em; border-radius: 6px; font-family: 'Open Sans', Helvetica, Arial, sans-serif; } /* the app's font (this theme's Gordita runs wider) */
@media (min-width: 576px) {
    #listingSearchModal .modal-dialog { margin-top: 60px; }
    #listingSearchModal .modal-sm { max-width: 450px; }
}
#listingSearchModal .modal-header { padding: 15px; align-items: center; }
#listingSearchModal .modal-header .close { order: 2; padding: 15px; margin: -15px -15px -15px auto; font-size: 21px; line-height: 1; }
#listingSearchModal .modal-title { font-size: 14px; font-weight: 700; line-height: 1.42857143; }
#listingSearchModal .modal-body { max-height: 400px; overflow-y: auto; padding: 5px 15px; }
#listingSearchModal .modal-footer { padding: 15px; }
#listingSearchModal .modal-footer .btn { font-size: 14px; line-height: 1.42857143; padding: 6px 16px; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
#listingSearchModal .modal-location-listing { padding: 5px 0; border-bottom: 1px solid #f0f0f0; }
#listingSearchModal .modal-location-listing:last-child { border-bottom: none; }
#listingSearchModal .business-name,
#listingSearchModal .business-address,
#listingSearchModal .business-star-rating,
#listingSearchModal .business-reviews { line-height: 20px; font-size: 14px; }
#listingSearchModal .business-name a { color: #4A9EFF; text-decoration: underline; cursor: pointer; } /* the app's --theme-color (css/custom/both/style.css) */
#listingSearchModal .business-name a:hover { text-decoration: none; }
#listingSearchModal .business-address,
#listingSearchModal .business-reviews { color: #73737B; }
#listingSearchModal .business-star-rating .fa-star { color: #ccc; }
#listingSearchModal .business-star-rating .checked { color: orange; }
#listingSearchModal .business-star-rating .score { margin-left: 5px; }

/* --- undo the theme's hero form rules (style.css .hero-banner-eleven form …), which are for
       SEOptimer's single input with the button pinned inside it: 80px fixed-height form,
       absolutely positioned 170px button, grey borderless input --------------------------- */
.hero-banner-eleven form.lr-audit-form { height: auto; max-width: none; }
.hero-banner-eleven form.lr-audit-form input.form-control { width: 100%; height: 60px; padding: 0 15px; }
.hero-banner-eleven form.lr-audit-form .lr-audit-submit button {
    position: relative; top: auto; right: auto; bottom: auto; width: auto; /* relative: the loader spinner is positioned inside it */
    height: 60px; padding: 0 26px; font-size: 20px;
}

/* --- hero preview: the embossed edge the old landing page gave it (google-business-profile-audit/style.css img.main) */
.lr-hero-audit .lr-hero-img { box-shadow: 2px 0 5px grey; border-radius: 5px; }

/* gmb-audit.js adds Bootstrap's .input-group to the country wrapper once you type (it was for the old
   widget's search / clear addons), which squares the select's right corners — keep it a plain block */
#listing-keyword-group.input-group { display: block; }
#listing-keyword-group.input-group > .form-control { border-radius: 7px !important; width: 100%; }

/* while a search is running the script disables the inputs and this button; make that visible */
.lr-audit-form .search-listing:disabled,
.lr-audit-form .search-listing.lr-busy { cursor: default; pointer-events: none; }
.lr-audit-form .search-listing:disabled:not(.lr-busy) { opacity: .55; } /* disabled but not running our search */
.lr-audit-form .search-listing.lr-busy { opacity: .7; } /* working: dimmed, with the spinner */

/* error from a failed audit run (flash set by GoogleBusinessProfileAuditController), above the form */
.lr-audit-flash {
    margin: 4px 0 16px; padding: 12px 16px; border-radius: 7px;
    background: #FFECEC; border: 1px solid #e5484d; color: #b3261e; font-size: 15px; line-height: 1.5;
}
.lr-audit-flash .lr-audit-flash-detail { color: #73737B; font-size: 13px; }