/* Fabrico static site — helper styles only.
 * The full original design is preserved in the captured stylesheets under
 * assets/css/vendor/. This file only restores behaviour that the removed
 * framework runtime used to provide. It must NOT change the visual design. */

/* Drawer overlay (mobile navigation) */
.fab-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(33, 33, 33, 0.46);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 5;
}
.fab-drawer-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Navigation drawer transition (was driven by Vue) */
.v-navigation-drawer {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Keyboard focus visibility (accessibility; no visual change for mouse users) */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #006037;
  outline-offset: 2px;
}

/* Lock page scroll while the drawer is open */
html.overflow-y-hidden {
  overflow-y: hidden;
}

/* ---- Blog (dynamic): search suggestions + content scoping helpers ---- */
.fab-blog-search { position: relative; }
.fab-blog-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); overflow: hidden; }
.fab-blog-suggest a { display: block; padding: 10px 14px; font-size: 14px; color: #222; text-decoration: none; border-bottom: 1px solid #f0f0f0; }
.fab-blog-suggest a:hover { background: #d9f4ea; color: #006037; }
.fab-blog-suggest a:last-child { border-bottom: 0; }
.fab-blog-content img { max-width: 100%; height: auto; }
.fab-blog-filter a:hover { text-decoration: underline; }

/* ---- Franchise enquiry form: ready state + thank-you panel ---- */
.v-btn.fab-submit-ready { background-color: #006037 !important; color: #fff !important; box-shadow: 0 4px 14px rgba(0, 96, 55, .28) !important; }
.v-btn.fab-submit-ready:hover { background-color: #007a4e !important; }
.v-btn.fab-submit-ready .v-btn__content { color: #fff !important; }

.fab-thanks { text-align: center; padding: 36px 22px 30px; font-family: Poppins, sans-serif; }
.fab-thanks__icon {
  width: 78px; height: 78px; margin: 0 auto 16px; border-radius: 50%;
  background: #d9f4ea; color: #006037; display: flex; align-items: center; justify-content: center;
  font-size: 44px; animation: fabThanksPop .45s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes fabThanksPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.fab-thanks h3 { font-size: 24px; font-weight: 600; color: #1c1c1c; margin: 0 0 8px; }
.fab-thanks p { font-size: 15px; line-height: 1.7; color: #5b6660; margin: 0 auto 6px; max-width: 620px; }
.fab-thanks__ref { display: inline-block; margin-top: 10px; font-size: 13px; color: #006037; background: #d9f4ea; border-radius: 999px; padding: 6px 14px; font-weight: 500; }
.fab-thanks__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }
.fab-thanks__actions a {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-size: 14px; font-weight: 500; padding: 12px 22px; border-radius: 6px; transition: all .2s ease;
}
.fab-thanks__actions .fab-thanks__call { background: #006037; color: #fff; }
.fab-thanks__actions .fab-thanks__call:hover { background: #007a4e; transform: translateY(-2px); }
.fab-thanks__actions .fab-thanks__more { background: #fff; color: #006037; border: 1px solid #006037; }
.fab-thanks__actions .fab-thanks__more:hover { background: #006037; color: #fff; transform: translateY(-2px); }
.fab-thanks__again { margin-top: 16px; font-size: 13px; color: #5b6660; }
.fab-thanks__again button { background: none; border: 0; color: #006037; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
@media (max-width: 600px) { .fab-thanks { padding: 26px 14px 22px; } .fab-thanks h3 { font-size: 20px; } }

/* ---- Franchise OTP verification box (after submit, before the thank-you page) ---- */
.fab-otp { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(16, 44, 33, .45); }
.fab-otp__card { width: 400px; max-width: 100%; background: #fff; border-radius: 10px; padding: 28px 26px 24px; text-align: center; font-family: Poppins, sans-serif; box-shadow: 0 18px 48px rgba(0, 0, 0, .28); position: relative; }
.fab-otp__close { position: absolute; top: 10px; right: 10px; border: 0; background: none; font-size: 22px; color: #8a948f; cursor: pointer; line-height: 1; padding: 6px; }
.fab-otp__close:hover { color: #1c1c1c; }
.fab-otp__icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: #d9f4ea; color: #006037; display: flex; align-items: center; justify-content: center; font-size: 34px; }
.fab-otp__icon--warn { background: #fff3d6; color: #b47d00; }
.fab-otp__card h3 { font-size: 20px; font-weight: 600; color: #1c1c1c; margin: 0 0 6px; }
.fab-otp__card p { font-size: 13.5px; line-height: 1.65; color: #5b6660; margin: 0 0 16px; }
.fab-otp__input { width: 220px; max-width: 100%; margin: 0 auto; display: block; text-align: center; font: 600 26px/1 Poppins, sans-serif; letter-spacing: 10px; padding: 10px 0 10px 10px; border: 0; border-bottom: 2px solid #cfd8d4; outline: none; color: #1c1c1c; }
.fab-otp__input:focus { border-bottom-color: #006037; }
.fab-otp__err { min-height: 20px; font-size: 12.5px; color: #d84343; margin: 8px 0 4px; }
.fab-otp__verify { width: 100%; margin-top: 6px; border: 0; cursor: pointer; background: #006037; color: #fff; font: 700 14px/1 Poppins, sans-serif; text-transform: uppercase; letter-spacing: .6px; padding: 14px 0; border-radius: 6px; transition: background .2s; }
.fab-otp__verify:hover { background: #007a4e; }
.fab-otp__verify[disabled] { opacity: .55; cursor: default; }
.fab-otp__skip { margin-top: 12px; font-size: 12.5px; color: #5b6660; }
.fab-otp__skip button { background: none; border: 0; color: #006037; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.fab-otp__demo { margin-top: 12px; font-size: 12px; color: #7a6a00; background: #fff7d6; border-radius: 6px; padding: 8px 10px; }
.fab-otp__note:empty { display: none; }
.fab-otp__skip button[disabled] { color: #8a948f; text-decoration: none; cursor: default; }
@media (max-width: 480px) { .fab-otp__card { padding: 24px 16px 20px; } }

/* ---------------------------------------------------------------------------
   Store cards (Stores page + city pages) — rendered server-side from the
   admin-managed `stores` collection (libraries/Storecards.php).
   Styled with the site's own tokens, measured from the live pages:
     card    = v-sheet--outlined: white, 1px rgba(0,0,0,.12), square corners
     button  = the site's CTAs: uppercase 14px/700, radius 5px, 42px tall,
               #006037 with the mint glow, WhatsApp #25d366
     accent  = mint #33cc99 (store titles and rating stars, as on the
               captured store cards)
   --------------------------------------------------------------------------- */
.fab-store-row { margin-top: 4px; }
.fab-store-col { display: flex; padding: 12px; }

.fab-store-card {
  display: flex; flex-direction: column; width: 100%;
  font-family: Poppins, sans-serif;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 0;
  padding: 22px 22px 20px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.fab-store-card:hover { border-color: #33cc99; box-shadow: 0 4px 24px 0 rgba(51, 204, 153, .18); }

.fab-store-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fab-store-card__name {
  margin: 0; font-size: 17px; line-height: 1.45; font-weight: 500;
  color: #33cc99; letter-spacing: normal;
}
.fab-store-card__chip {
  flex: none; font-size: 12px; font-weight: 500; line-height: 20px;
  color: rgba(0, 0, 0, .87); background: #ffcdd2;
  border-radius: 4px; padding: 0 10px; white-space: nowrap;
}
.fab-store-card__addr { margin: 12px 0 0; font-size: 14px; line-height: 21px; font-weight: 500; color: #666; }
.fab-store-card__code { margin: 8px 0 0; font-size: 12px; line-height: 18px; font-weight: 500; color: #9e9e9e; }

.fab-store-card__rating { margin-top: 14px; }
.fab-store-card__glogo { vertical-align: -5px; margin-right: 8px; }
.fab-store-card__rlabel { font-size: 14px; font-weight: 500; color: rgba(0, 0, 0, .87); }
.fab-store-card__rline { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.fab-store-card__rvalue { font-size: 14px; font-weight: 500; color: #33cc99; }
.fab-store-card__stars { display: inline-flex; gap: 1px; color: #33cc99; font-size: 15px; line-height: 1; }
.fab-store-card__rcount { font-size: 13px; font-weight: 500; color: #666; }

.fab-store-card__actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: auto; padding-top: 18px;
}
.fab-store-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-align: center;
  min-height: 40px; padding: 9px 10px; border: 1px solid #33cc99; border-radius: 5px;
  background: #33cc99; color: #fff !important; text-decoration: none;
  font-family: Poppins, sans-serif; font-size: 12.5px; font-weight: 600;
  line-height: 1.2; text-transform: uppercase; letter-spacing: .3px;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.fab-store-btn .mdi { font-size: 16px; line-height: 1; }
.fab-store-btn:hover { background: #2bb98a; border-color: #2bb98a; box-shadow: 19px 4px 32px 0 rgba(51, 204, 153, .3); }
/* The filled buttons use the site's mint (the LOCATE NOW colour above the grid)
   and WhatsApp's own green — two light greens that sit together. The dark
   #006037 is kept for the quiet outlined actions' text and border only: as a
   solid fill it read far too heavy repeated down the whole page. */
.fab-store-btn--ghost { background: #fff; color: #006037 !important; border-color: #cfe3d9; }
.fab-store-btn--ghost:hover { background: #f2faf6; color: #00794a !important; border-color: #33cc99; box-shadow: none; }
.fab-store-btn--wa { background: #25d366; border-color: #25d366; }
.fab-store-btn--wa:hover { background: #1fb457; border-color: #1fb457; box-shadow: 19px 4px 32px 0 rgba(37, 211, 102, .28); }

/* store-search suggestions (Stores page + Pricing page) */
.fab-suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50; display: none;
  background: #fff; border-radius: 6px; overflow-y: auto; overscroll-behavior: contain;
  max-height: 290px;                     /* exactly 5 rows, so no half row is cut off */
  box-shadow: 0 6px 24px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .08);
  scrollbar-width: thin; scrollbar-color: #c7ded3 transparent;
}
.fab-suggest::-webkit-scrollbar { width: 6px; }
.fab-suggest::-webkit-scrollbar-track { background: transparent; }
.fab-suggest::-webkit-scrollbar-thumb { background: #c7ded3; border-radius: 999px; }
.fab-suggest::-webkit-scrollbar-thumb:hover { background: #33cc99; }
.fab-suggest .v-list-item {
  display: block; box-sizing: border-box; height: 58px; padding: 10px 16px;
  min-height: 0; cursor: pointer; border-bottom: 1px solid #f1f4f3;
  font-family: Poppins, sans-serif; transition: background .15s ease;
}
.fab-suggest .v-list-item:last-child { border-bottom: 0; }
.fab-suggest .v-list-item:hover,
.fab-suggest .v-list-item.is-active { background: #f2faf6; }
.fab-suggest__name {
  font-size: 14px; line-height: 20px; color: #333;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fab-suggest__meta {
  font-size: 12px; line-height: 18px; color: #999;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the last row of the list, not a floating bar — a sticky one covered a result */
.fab-suggest__all {
  padding: 11px 16px; cursor: pointer;
  font-family: Poppins, sans-serif; font-size: 13px; font-weight: 600; color: #006037;
  background: #f2faf6; border-top: 1px solid #d8efe5;
}
.fab-suggest__all:hover { background: #e3f5ed; }
.fab-suggest__empty { padding: 14px 16px; font-family: Poppins, sans-serif; font-size: 14px; color: #888; }

/* search / locate result bar on the Stores page */
.fab-store-results {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  width: 100%; margin: 4px 12px 2px; padding: 12px 16px;
  background: #f2faf6; border: 1px solid #d8efe5; border-radius: 5px;
  font-family: Poppins, sans-serif; font-size: 14px; color: #33691e; color: #2f4f43;
}
.fab-store-results b { color: #006037; }
.fab-store-results__clear {
  margin-left: auto; border: 1px solid #33cc99; background: #fff; color: #006037;
  font-family: Poppins, sans-serif; font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px;
  padding: 7px 14px; border-radius: 5px; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.fab-store-results__clear:hover { background: #33cc99; color: #fff; }
@media (max-width: 600px) {
  .fab-store-results { margin: 4px 4px 2px; font-size: 13px; padding: 10px 12px; }
  .fab-store-results__clear { margin-left: 0; }
}

/* pager + "view all in this city" link */
.fab-store-pager { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; margin: 22px 0 6px; }
.fab-store-pager__count { font-family: Poppins, sans-serif; font-size: 13.5px; color: #666; }
.fab-store-pager .v-pagination { flex-wrap: wrap; justify-content: center; }
/* the captured Vuetify sheet styles these at .theme--light.v-pagination .v-pagination__item
   and loads after this file, so every rule here has to out-specify it */
.fab-store-pager .v-pagination.theme--light .v-pagination__item,
.fab-store-pager .v-pagination.theme--light .v-pagination__navigation {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; margin: 3px; padding: 0 8px; border-radius: 4px;
  font-family: Poppins, sans-serif; font-size: 14px; text-decoration: none;
  color: #444; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  transition: background .2s ease, color .2s ease;
}
.fab-store-pager .v-pagination.theme--light a.v-pagination__item:hover,
.fab-store-pager .v-pagination.theme--light a.v-pagination__navigation:hover { background: #eafaf3; color: #006037; }
.fab-store-pager .v-pagination.theme--light .v-pagination__item--active {
  background: #33cc99; color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px rgba(51, 204, 153, .45);
}
.fab-store-pager .v-pagination.theme--light .v-pagination__navigation--disabled { opacity: .45; box-shadow: none; }
.fab-store-pager .v-pagination__more { display: inline-flex; align-items: center; height: 34px; padding: 0 6px; color: #999; }
.fab-store-more { width: 100%; display: flex; justify-content: center; padding: 8px 12px 4px; }
.fab-store-more .fab-store-btn { padding: 10px 22px; }

.fab-store-card--empty { text-align: center; align-items: center; }
.fab-store-card--empty .fab-store-card__name { color: rgba(0, 0, 0, .87); font-size: 20px; }
.fab-store-card--empty .fab-store-card__addr { max-width: 620px; }
.fab-store-card--empty .fab-store-card__actions {
  grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 820px;
}

@media (max-width: 960px) {
  .fab-store-btn { font-size: 13px; padding: 10px 8px; }
}
@media (max-width: 600px) {
  .fab-store-col { padding: 8px 4px; }
  .fab-store-card { padding: 18px 16px 16px; }
  .fab-store-card__name { font-size: 16px; }
  .fab-store-card__actions { gap: 8px; padding-top: 14px; }
  .fab-store-btn { font-size: 12.5px; min-height: 40px; padding: 9px 6px; }
  .fab-store-card--empty .fab-store-card__actions { grid-template-columns: 1fr 1fr; }
}