/*
=================================================
11-rate-estimator.css
Rate Estimator widget + [fbl_rate] figures +
currency converter
Site: fishbucklake.com
=================================================
Ported verbatim from the <style> block that used to live
inside the Divi Code module (et_pb_code_5) on /rez-calendar/.
Only additions are the currency-picker / .fbl-price-fx /
.fbl-fx-row rules at the bottom - everything above this
line is unchanged from the original.
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Raleway:wght@300;400;500;600&display=swap');

.fbl-calc-wrap {
  --fbl-bg:        rgba(13, 26, 20, 0.15);
  --fbl-surface:   #142010;
  --fbl-surface2:  #1a2a1d;
  --fbl-border:    #2a4030;
  --fbl-gold:      #c8a55a;
  --fbl-gold-dim:  #8a6d35;
  --fbl-green:     #4a7c59;
  --fbl-text:      #d4cfc4;
  --fbl-text-dim:  #8a9088;
  --fbl-white:     #f0ece4;
  --fbl-radius:    6px;

  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  color: var(--fbl-text);
  background: var(--fbl-bg);
  border: 1px solid var(--fbl-border);
  border-radius: 10px;
  padding: 2.5rem 2rem;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

.fbl-calc-wrap * { box-sizing: border-box; }

/* Header */
.fbl-calc-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--fbl-border);
}
.fbl-calc-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--fbl-gold);
  margin: 0 0 0.35rem 0;
  letter-spacing: 0.02em;
}
.fbl-calc-header p {
  font-size: 0.85rem;
  color: var(--fbl-text-dim);
  margin: 0;
  font-weight: 300;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Rate plan toggle */
.fbl-plan-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--fbl-border);
  border-radius: var(--fbl-radius);
  overflow: hidden;
  margin-bottom: 1.75rem;
}
.fbl-plan-toggle button {
  flex: 1;
  padding: 0.7rem 1rem;
  background: rgba(240, 236, 228, 0.15);
  border: none;
  color: var(--fbl-text-dim);
  font-family: 'Raleway', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.fbl-plan-toggle button.active {
  background: var(--fbl-green);
  color: var(--fbl-white);
}
.fbl-plan-toggle button:first-child {
  border-right: 1px solid var(--fbl-border);
}

/* Guest inputs grid */
.fbl-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
@media (max-width: 500px) {
  .fbl-inputs { grid-template-columns: 1fr; }
}

.fbl-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.fbl-field label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fbl-text-dim);
}
.fbl-field label span.fbl-rate-hint {
  float: right;
  color: var(--fbl-gold-dim);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.72rem;
}
.fbl-field select {
  background: #f0ece4;
  border: 1px solid #c8bfa8;
  border-radius: var(--fbl-radius);
  color: #1a2a1d;
  font-family: 'Raleway', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a7c59' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fbl-field select:focus {
  outline: none;
  border-color: var(--fbl-green);
  box-shadow: 0 0 0 2px rgba(74,124,89,0.25);
}
.fbl-field.fbl-hidden {
  opacity: 0.3;
  pointer-events: none;
}

/* Premium Boat toggle */
.fbl-premium-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(74,124,89,0.12);
  border: 1px solid var(--fbl-border);
  border-radius: var(--fbl-radius);
  padding: 0.65rem 1rem;
}
.fbl-premium-row .fbl-premium-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fbl-text);
}
.fbl-premium-row .fbl-premium-label span {
  display: block;
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--fbl-text-dim);
  margin-top: 0.1rem;
}
.fbl-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.fbl-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.fbl-toggle-track {
  position: absolute;
  inset: 0;
  background: #2a4030;
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.2s;
}
.fbl-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #8a9088;
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.fbl-toggle input:checked + .fbl-toggle-track {
  background: var(--fbl-green);
}
.fbl-toggle input:checked + .fbl-toggle-track::after {
  transform: translateX(20px);
  background: #fff;
}

/* Divider */
.fbl-divider {
  border: none;
  border-top: 1px solid var(--fbl-border);
  margin: 0 0 1.5rem 0;
}

/* Breakdown */
.fbl-breakdown {
  background: #f0ece4;
  border: 1px solid #c8bfa8;
  border-radius: var(--fbl-radius);
  overflow: hidden;
  margin-bottom: 1rem;
}
.fbl-breakdown-title {
  background: #e0d9ce;
  padding: 0.6rem 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4a5a48;
  border-bottom: 1px solid #c8bfa8;
}
.fbl-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 1rem;
  font-size: 0.88rem;
  border-bottom: 1px solid rgba(42,64,48,0.4);
}
.fbl-line:last-child { border-bottom: none; }
.fbl-line { border-bottom: 1px solid #d8d0c4; }
.fbl-line .fbl-line-label { color: #5a6a58; }
.fbl-line .fbl-line-amount { color: #1a2a1d; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Totals */
.fbl-totals {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--fbl-border);
  border: 1px solid var(--fbl-border);
  border-radius: var(--fbl-radius);
  overflow: hidden;
}
@media (max-width: 420px) {
  .fbl-totals { grid-template-columns: 1fr; }
}
.fbl-total-cell {
  background: #f0ece4;
  padding: 1rem;
  text-align: center;
}
.fbl-total-cell .fbl-total-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a6a58;
  margin-bottom: 0.3rem;
}
.fbl-total-cell .fbl-total-amount {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  color: #1a2a1d;
  font-variant-numeric: tabular-nums;
}
.fbl-total-cell.fbl-grand {
  background: var(--fbl-green);
}
.fbl-total-cell.fbl-grand .fbl-total-label { color: rgba(240,236,228,0.7); }
.fbl-total-cell.fbl-grand .fbl-total-amount { color: var(--fbl-white); font-size: 1.5rem; }

/* Deposit / balance breakdown, below the totals row */
.fbl-deposit-row {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--fbl-border);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.fbl-deposit-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
}
.fbl-deposit-line .fbl-deposit-label {
  color: var(--fbl-text-dim);
  letter-spacing: 0.02em;
}
.fbl-deposit-line .fbl-price {
  color: var(--fbl-gold);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Note */
.fbl-note {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  color: var(--fbl-text-dim);
  text-align: center;
  line-height: 1.6;
  font-weight: 300;
}
.fbl-note a {
  color: var(--fbl-gold);
  text-decoration: none;
}
.fbl-note a:hover { text-decoration: underline; }

/* =========================================================
   CURRENCY CONVERTER (new)
   ========================================================= */

/* Secondary converted total, under the estimator's grand total */
.fbl-fx-row {
  margin-top: 1rem;
  text-align: center;
}
.fbl-fx-row .fbl-fx-amount {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  color: var(--fbl-gold-dim);
}
.fbl-fx-row .fbl-fx-note {
  margin-top: 0.25rem;
  font-size: 0.7rem;
  color: var(--fbl-text-dim);
  line-height: 1.5;
}

/* Secondary converted figure next to a [fbl_rate] price on
   the rates page (or anywhere else the shortcode is used) */
.fbl-price-fx {
  display: inline-block;
  margin-left: 0.4em;
  font-size: 0.85em;
  color: #8a9088;
  font-weight: 400;
}

/* Shared currency picker. Default shape/colors here match the rate
   estimator widget's own established look (same hardcoded palette as
   .fbl-field select etc. elsewhere in this file), because the
   --embedded variant below lives inside .fbl-calc-wrap, which already
   has its own local, skin-independent color scheme (the --fbl-*
   custom properties at the very top of this file) - deliberately not
   the site's 00-tokens.css skin system, to match the rest of that
   widget's controls.
   The standalone context (.rates, on /rates/ - no .fbl-calc-wrap to
   sit inside) has no such local scheme to inherit, so the override
   block further down switches it to the active skin's own
   00-tokens.css variables instead. That's not just cosmetic: .rates *
   (css/06-components.css) already forces every descendant's `color`
   to var(--fbl-text-main) !important, and because that stylesheet
   happens to be enqueued after this one, it was winning the resulting
   !important/!important tie against this block's own hardcoded colors
   - silently swapping them out for whatever the active skin's
   var(--fbl-text-main) happens to be, which doesn't reliably contrast
   against a background that's still hardcoded. Matching the skin's
   own token pairs instead of fighting that rule fixes both problems
   at once - correct color pairing per skin, and no more dependence on
   stylesheet load order. */
.fbl-currency-picker {
  position: static;
  display: block;
  width: fit-content;
  margin: 0 auto 2rem auto;
  background: #1a2a1d;
  color: #d4cfc4;
  border: 1px solid #2a4030;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-family: 'Raleway', sans-serif;
  font-size: 0.78rem;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.fbl-currency-picker label {
  color: #d4cfc4;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fbl-currency-picker select {
  margin-left: 0.5em;
  background: #f0ece4;
  color: #1a2a1d;
  border: 1px solid #c8bfa8;
  border-radius: var(--fbl-radius);
  padding: 0.3rem 1.75rem 0.3rem 0.6rem;
  font-family: 'Raleway', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a7c59' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fbl-currency-picker select:focus {
  outline: none;
  /* --fbl-green is scoped to .fbl-calc-wrap (top of this file) - only
     in scope for the embedded variant, so the standalone (/rates/)
     picker needs its own fallback rather than resolving to nothing. */
  border-color: var(--fbl-green, #4a7c59);
  box-shadow: 0 0 0 2px rgba(74,124,89,0.25);
}
.fbl-currency-rate {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: #8a9088;
}

@media (max-width: 500px) {
  .fbl-currency-picker {
    width: auto;
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

/* Standalone context (/rates/): switch to the active skin's own
   00-tokens.css pairs. Tried --fbl-mid (a "surface, one step off the
   page background" token, matching how --fbl-dark/--fbl-text-main
   pairs for the page section itself) for the box first - wrong,
   because this site also runs a live per-skin color customizer
   (inc/color-tweaker.php, inline <style> in <head>) that overrides
   individual tokens on top of this file. On the active medium skin
   it currently sets --fbl-text-main to a dark navy, without touching
   --fbl-mid (still its 00-tokens.css navy) - dark-on-navy, unreadable,
   and not something visible by reading this file alone.
   --fbl-content-bg/--fbl-text-main is safer: it's the exact pair
   #fbl-middle-intro (css/01-global.css) already uses for this page's
   own body text, so whatever the customizer currently has them set
   to, they're already a working pair for this page - copying it can't
   silently mismatch the way a second, independent token could.
   --fbl-light/--fbl-input-text for the select, below, for the same
   reason .fbl-mid was wrong for the box: --fbl-input-bg (this skin's
   actual form-input background, used by every other input on the
   site) is a mid-grey paired with --fbl-input-text's dark value,
   ~2.3:1 contrast on this skin - too dark to read.
   .rates .fbl-currency-picker (0,2,0) already outranks .rates *
   (0,1,0) on specificity alone, but .rates * is !important, and
   importance is decided before specificity - so the color rules below
   need !important too, to win outright rather than by load-order
   luck. background/border-color aren't contested by .rates * (it only
   touches `color`), so those don't need it. */
.rates .fbl-currency-picker {
  background: var(--fbl-content-bg);
  border-color: var(--fbl-border-color);
}
.rates .fbl-currency-picker,
.rates .fbl-currency-picker label,
.rates .fbl-currency-rate {
  color: var(--fbl-text-main) !important;
}
.rates .fbl-currency-picker select {
  background: var(--fbl-light) !important;
  color: var(--fbl-input-text) !important;
  border-color: var(--fbl-border-color);
}

/* Embedded variant: the [fbl_rate_estimator] widget (js/currency-
   converter.js's buildSelector()) renders the picker as part of its
   own flow here instead of the in-content badge above - below the
   deposit/balance lines, above the converted-total row it controls.
   Lives inside .fbl-calc-wrap, not .rates, so it never has to fight
   .rates * at all. Same specificity as the base .fbl-currency-picker
   color rules above (neither is !important since neither has to fight
   .rates * anymore), so this wins on source order alone - kept
   !important anyway, defensively, in case that ever changes.
   background was transparent (just a border-top divider) - fine as
   long as .fbl-calc-wrap's own near-transparent --fbl-bg
   (rgba(13,26,20,0.15), meant to let a dark section bleed through)
   actually sits on something dark. It doesn't right now: the same
   live color-tweaker override behind the /rates/ fix above also set
   --fbl-content-bg to white, and #fbl-middle-intro (css/01-global.css)
   paints every page's center column with it - .fbl-calc-wrap's 15%
   wash over white blends to ~#dbdddc, near-white, under text-dim's
   grey (#8a9088) - too faint to read, and it'll happen again any time
   that setting changes, on any page. Needs its own guaranteed-opaque
   surface rather than relying on whatever's behind it.
   First attempt used --fbl-surface2 (dark green) full-width with
   --fbl-text-dim - too heavy/wide, and dim grey-green text on dark
   green read as one flat mass instead of two things. Using a light
   cream card instead - same #f0ece4/#4a5a48/#c8bfa8 treatment as
   .fbl-breakdown/.fbl-total-cell above, the widget's own established
   "light card floating on the dark wrap" pattern - matches the rest
   of this component instead of inventing a new dark-on-dark look, and
   width: fit-content keeps it a small aside instead of a full-width
   block. */
.fbl-currency-picker--embedded {
  position: static;
  display: block;
  width: fit-content;
  right: auto;
  bottom: auto;
  z-index: auto;
  margin: 1rem auto 0 auto;
  padding: 0.6rem 1rem;
  background: #f0ece4;
  border: 1px solid #c8bfa8;
  border-radius: var(--fbl-radius);
  box-shadow: none;
  text-align: center;
  color: #4a5a48 !important;
}
.fbl-currency-picker--embedded label {
  color: #4a5a48 !important;
}
.fbl-currency-picker--embedded .fbl-currency-rate {
  color: #5a6a58 !important;
}