/*
 * Fishing Guide Booking — Front-end Form Styles
 *
 * Mobile-first. Uses CSS custom properties that fall back gracefully when
 * Breakdance's design system variables are not present.
 *
 * Variable mapping:
 *   --fgb-primary      Site accent / brand colour  (falls back to #1a3a5c)
 *   --fgb-primary-dark Darker shade for hover/active states
 *   --fgb-success      Confirmation green
 *   --fgb-error        Error red
 *   --fgb-border       Input border colour
 *   --fgb-radius       Global border-radius
 *   --fgb-font         Body font stack
 */

/* ── Custom Properties ───────────────────────────────────────────────────── */
.fgb-booking-wrap {
    --fgb-primary:       var(--e-global-color-primary, #1a3a5c);
    --fgb-primary-dark:  #122b45;
    --fgb-primary-light: #e8f0f8;
    --fgb-accent:        var(--e-global-color-accent, #2d8c4e);
    --fgb-success:       #2d8c4e;
    --fgb-error:         #c0392b;
    --fgb-warn-bg:       #fff9e6;
    --fgb-warn-border:   #f0d88a;
    --fgb-text:          #1a1a1a;
    --fgb-text-muted:    #666666;
    --fgb-border:        #d0d8e4;
    --fgb-border-focus:  var(--fgb-primary);
    --fgb-bg:            #ffffff;
    --fgb-bg-alt:        #f6f8fb;
    --fgb-radius:        8px;
    --fgb-radius-sm:     4px;
    --fgb-shadow:        0 2px 12px rgba(0, 0, 0, 0.08);
    --fgb-font:          var(--e-global-typography-primary-font-family,
                             -apple-system, BlinkMacSystemFont, "Segoe UI",
                             Roboto, sans-serif);
    --fgb-transition:    0.18s ease;

    font-family:     var(--fgb-font);
    color:           var(--fgb-text);
    max-width:       640px;
    margin:          0 auto;
    padding:         0 16px 40px;
    box-sizing:      border-box;
}

.fgb-booking-wrap *,
.fgb-booking-wrap *::before,
.fgb-booking-wrap *::after {
    box-sizing: inherit;
}

/* ── Guide Header ────────────────────────────────────────────────────────── */
.fgb-guide-header {
    display:         flex;
    align-items:     center;
    gap:             16px;
    padding:         24px 0 20px;
    border-bottom:   2px solid var(--fgb-primary);
    margin-bottom:   24px;
}

.fgb-guide-photo {
    flex-shrink: 0;
}

.fgb-guide-photo img {
    width:         72px;
    height:        72px;
    border-radius: 50%;
    object-fit:    cover;
    border:        3px solid var(--fgb-primary);
}

.fgb-guide-name {
    margin:      0 0 4px;
    font-size:   1.4rem;
    font-weight: 700;
    color:       var(--fgb-primary);
    line-height: 1.2;
}

.fgb-guide-subtext {
    margin:    0;
    font-size: 0.9rem;
    color:     var(--fgb-text-muted);
}

/* ── Progress Bar ────────────────────────────────────────────────────────── */
.fgb-progress {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   28px;
    padding:         0 4px;
}

.fgb-progress-step {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            4px;
    position:       relative;
    flex:           0 0 auto;
}

.fgb-progress-step span {
    font-size:   0.7rem;
    color:       var(--fgb-text-muted);
    white-space: nowrap;
}

.fgb-progress-dot {
    width:           28px;
    height:          28px;
    border-radius:   50%;
    background:      var(--fgb-border);
    color:           var(--fgb-text-muted);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.8rem;
    font-weight:     600;
    transition:      background var(--fgb-transition), color var(--fgb-transition);
}

.fgb-progress-step.active .fgb-progress-dot {
    background: var(--fgb-primary);
    color:      #fff;
}

.fgb-progress-step.completed .fgb-progress-dot {
    background: var(--fgb-success);
    color:      #fff;
}

.fgb-progress-step.active span,
.fgb-progress-step.completed span {
    color:       var(--fgb-primary);
    font-weight: 600;
}

.fgb-progress-line {
    flex:        1;
    height:      2px;
    background:  var(--fgb-border);
    margin:      0 4px;
    margin-top:  -14px; /* align to dots */
    transition:  background var(--fgb-transition);
}

.fgb-progress-line.completed {
    background: var(--fgb-success);
}

/* ── Step Containers ─────────────────────────────────────────────────────── */
.fgb-step {
    display: none;
}

.fgb-step--active {
    display: block;
}

.fgb-step-title {
    font-size:     1.15rem;
    font-weight:   700;
    color:         var(--fgb-primary);
    margin:        0 0 16px;
}

.fgb-step-subtitle {
    margin:    -8px 0 16px;
    font-size: 0.95rem;
    color:     var(--fgb-text-muted);
}

/* ── Calendar ────────────────────────────────────────────────────────────── */
.fgb-calendar {
    background:    var(--fgb-bg);
    border:        1px solid var(--fgb-border);
    border-radius: var(--fgb-radius);
    overflow:      hidden;
    margin-bottom: 12px;
    position:      relative;
}

.fgb-calendar-nav {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         12px 16px;
    background:      var(--fgb-primary);
    color:           #fff;
}

.fgb-cal-month-label {
    font-weight: 600;
    font-size:   1rem;
}

.fgb-cal-prev,
.fgb-cal-next {
    background:    none;
    border:        none;
    color:         #fff;
    font-size:     1.5rem;
    cursor:        pointer;
    padding:       4px 10px;
    border-radius: var(--fgb-radius-sm);
    line-height:   1;
    transition:    background var(--fgb-transition);
}

.fgb-cal-prev:hover,
.fgb-cal-next:hover {
    background: rgba(255, 255, 255, 0.15);
}

.fgb-cal-prev:disabled,
.fgb-cal-next:disabled {
    opacity: 0.35;
    cursor:  not-allowed;
}

.fgb-calendar-dow {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    background:            var(--fgb-bg-alt);
    border-bottom:         1px solid var(--fgb-border);
}

.fgb-calendar-dow span {
    text-align:  center;
    padding:     8px 0;
    font-size:   0.72rem;
    font-weight: 600;
    color:       var(--fgb-text-muted);
    text-transform: uppercase;
}

.fgb-calendar-grid {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    padding:               6px;
    gap:                   3px;
    min-height:            200px;
}

.fgb-cal-day {
    aspect-ratio:    1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   var(--fgb-radius-sm);
    font-size:       0.9rem;
    cursor:          default;
    position:        relative;
    transition:      background var(--fgb-transition), color var(--fgb-transition);
    border:          2px solid transparent;
}

.fgb-cal-day--empty {
    /* placeholder cell for days before month starts */
}

.fgb-cal-day--past,
.fgb-cal-day--unavailable {
    color:   #c0c8d4;
    cursor:  not-allowed;
}

.fgb-cal-day--unavailable {
    background:    #f0f2f5;
    color:         #b0b8c4;
    position:      relative;
    overflow:      hidden;
}

.fgb-cal-day--available {
    background:    var(--fgb-primary-light);
    color:         var(--fgb-primary);
    cursor:        pointer;
    font-weight:   600;
}

.fgb-cal-day--available:hover {
    background: var(--fgb-primary);
    color:      #fff;
}

.fgb-cal-day--selected {
    background: var(--fgb-primary) !important;
    color:      #fff !important;
    border:     2px solid var(--fgb-primary-dark);
}

.fgb-cal-day--today {
    font-weight: 700;
}

.fgb-cal-day--today::after {
    content:     '';
    position:    absolute;
    bottom:      3px;
    left:        50%;
    transform:   translateX(-50%);
    width:       4px;
    height:      4px;
    border-radius: 50%;
    background:  currentColor;
}

.fgb-calendar-loading {
    position:   absolute;
    inset:      0;
    background: rgba(255, 255, 255, 0.85);
    display:    none;
    align-items: center;
    justify-content: center;
    font-size:  0.9rem;
    color:      var(--fgb-text-muted);
}

.fgb-calendar-loading.visible {
    display: flex;
}

.fgb-calendar-legend {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-bottom: 20px;
    font-size:   0.8rem;
    color:       var(--fgb-text-muted);
}

.fgb-legend-dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    flex-shrink:   0;
}

.fgb-legend-available  { background: var(--fgb-primary-light); border: 1px solid var(--fgb-primary); }
.fgb-legend-booked     { background: #f0f2f5; }

/* ── Duration Option Cards ───────────────────────────────────────────────── */
.fgb-duration-options {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    margin-bottom:  20px;
}

.fgb-duration-card {
    display:       flex;
    align-items:   center;
    gap:           14px;
    padding:       14px 16px;
    border:        2px solid var(--fgb-border);
    border-radius: var(--fgb-radius);
    cursor:        pointer;
    transition:    border-color var(--fgb-transition), background var(--fgb-transition);
    background:    var(--fgb-bg);
}

.fgb-duration-card:hover {
    border-color: var(--fgb-primary);
    background:   var(--fgb-primary-light);
}

.fgb-duration-card.selected {
    border-color: var(--fgb-primary);
    background:   var(--fgb-primary-light);
}

.fgb-duration-card input[type="radio"] {
    width:       18px;
    height:      18px;
    margin:      0;
    flex-shrink: 0;
    accent-color: var(--fgb-primary);
}

.fgb-duration-body {
    flex:        1;
    min-width:   0;
}

.fgb-duration-label {
    font-weight: 600;
    font-size:   0.95rem;
    display:     block;
    margin-bottom: 2px;
}

.fgb-duration-slot {
    font-size:  0.78rem;
    color:      var(--fgb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fgb-duration-price {
    text-align:  right;
    flex-shrink: 0;
}

.fgb-duration-price strong {
    display:     block;
    font-size:   1.05rem;
    color:       var(--fgb-primary);
}

.fgb-duration-price small {
    font-size:  0.75rem;
    color:      var(--fgb-text-muted);
    display:    block;
}

/* ── Form Fields ─────────────────────────────────────────────────────────── */
.fgb-field {
    margin-bottom: 18px;
}

.fgb-label {
    display:     block;
    font-weight: 600;
    font-size:   0.88rem;
    color:       var(--fgb-text);
    margin-bottom: 6px;
}

.fgb-label-hint,
.fgb-label-optional {
    font-weight: 400;
    color:       var(--fgb-text-muted);
    margin-left: 4px;
}

.fgb-input,
.fgb-select,
.fgb-textarea {
    display:       block;
    width:         100%;
    padding:       10px 12px;
    border:        1.5px solid var(--fgb-border);
    border-radius: var(--fgb-radius-sm);
    font-family:   var(--fgb-font);
    font-size:     0.95rem;
    color:         var(--fgb-text);
    background:    var(--fgb-bg);
    transition:    border-color var(--fgb-transition), box-shadow var(--fgb-transition);
    appearance:    none;
    -webkit-appearance: none;
}

.fgb-input:focus,
.fgb-select:focus,
.fgb-textarea:focus {
    outline:      none;
    border-color: var(--fgb-border-focus);
    box-shadow:   0 0 0 3px rgba(26, 58, 92, 0.12);
}

.fgb-select {
    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='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 12px center;
    padding-right:       36px;
}

.fgb-textarea {
    resize:      vertical;
    min-height:  90px;
}

.fgb-field--required .fgb-label::after {
    content: ' *';
    color:   var(--fgb-error);
}

.fgb-field-error {
    display:     block;
    font-size:   0.8rem;
    color:       var(--fgb-error);
    margin-top:  4px;
    min-height:  1.2em;
}

.fgb-input.has-error,
.fgb-select.has-error,
.fgb-textarea.has-error {
    border-color: var(--fgb-error);
}

/* ── Step Navigation ─────────────────────────────────────────────────────── */
.fgb-step-nav {
    display:         flex;
    gap:             12px;
    justify-content: space-between;
    margin-top:      24px;
    padding-top:     16px;
    border-top:      1px solid var(--fgb-border);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.fgb-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         12px 22px;
    border:          none;
    border-radius:   var(--fgb-radius);
    font-family:     var(--fgb-font);
    font-size:       0.95rem;
    font-weight:     600;
    cursor:          pointer;
    transition:      background var(--fgb-transition), opacity var(--fgb-transition),
                     transform 0.1s ease;
    text-decoration: none;
    white-space:     nowrap;
}

.fgb-btn:active {
    transform: translateY(1px);
}

.fgb-btn--primary {
    background: var(--fgb-primary);
    color:      #fff;
    flex:       1;
}

.fgb-btn--primary:hover:not(:disabled) {
    background: var(--fgb-primary-dark);
}

.fgb-btn--secondary {
    background: var(--fgb-bg-alt);
    color:      var(--fgb-text);
    border:     1.5px solid var(--fgb-border);
}

.fgb-btn--secondary:hover {
    background: var(--fgb-border);
}

.fgb-btn--pay {
    background: var(--fgb-success);
    color:      #fff;
    flex:       1;
    font-size:  1rem;
    padding:    14px 22px;
}

.fgb-btn--pay:hover:not(:disabled) {
    background: #236b3b;
}

.fgb-btn:disabled {
    opacity: 0.45;
    cursor:  not-allowed;
}

.fgb-btn-spinner {
    width:         18px;
    height:        18px;
    border:        2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation:     fgb-spin 0.7s linear infinite;
    flex-shrink:   0;
}

@keyframes fgb-spin {
    to { transform: rotate(360deg); }
}

/* ── Notices ─────────────────────────────────────────────────────────────── */
.fgb-notice {
    padding:       12px 16px;
    border-radius: var(--fgb-radius-sm);
    font-size:     0.88rem;
    line-height:   1.5;
    margin-bottom: 16px;
}

.fgb-notice--warn {
    background:  var(--fgb-warn-bg);
    border:      1px solid var(--fgb-warn-border);
    color:       #7a5a00;
}

.fgb-notice--error {
    background: #fdf2f2;
    border:     1px solid #f5c6c0;
    color:      var(--fgb-error);
}

.fgb-error-notice {
    padding:       20px;
    background:    #fdf2f2;
    border:        1px solid #f5c6c0;
    border-radius: var(--fgb-radius);
    color:         var(--fgb-error);
    text-align:    center;
}

.fgb-inline-loading {
    padding:   12px 0;
    color:     var(--fgb-text-muted);
    font-size: 0.88rem;
}

/* ── Review Card ─────────────────────────────────────────────────────────── */
.fgb-review-card {
    background:    var(--fgb-bg-alt);
    border:        1px solid var(--fgb-border);
    border-radius: var(--fgb-radius);
    padding:       20px;
    margin-bottom: 20px;
}

.fgb-review-section-title {
    font-size:      0.78rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--fgb-primary);
    margin:         0 0 10px;
    padding-bottom: 6px;
    border-bottom:  1px solid var(--fgb-border);
}

.fgb-review-section-title--your {
    margin-top: 16px;
}

.fgb-review-list {
    margin:  0;
    padding: 0;
}

.fgb-review-row {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    padding:         5px 0;
    font-size:       0.88rem;
    gap:             12px;
}

.fgb-review-row dt {
    color:       var(--fgb-text-muted);
    flex-shrink: 0;
    font-weight: 400;
}

.fgb-review-row dd {
    text-align:  right;
    color:       var(--fgb-text);
    font-weight: 500;
    word-break:  break-word;
}

/* ── Pricing Summary ─────────────────────────────────────────────────────── */
.fgb-pricing-summary {
    margin-top: 16px;
    border-top: 1px solid var(--fgb-border);
    padding-top: 12px;
}

.fgb-pricing-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         5px 0;
    font-size:       0.88rem;
    color:           var(--fgb-text-muted);
}

.fgb-pricing-row--deposit {
    font-size:  1rem;
    color:      var(--fgb-text);
    font-weight: 600;
    padding:    8px 0;
    border-top: 1px dashed var(--fgb-border);
}

.fgb-pricing-row--deposit strong {
    font-size:  1.1rem;
    color:      var(--fgb-success);
}

.fgb-pricing-row--balance {
    font-size: 0.82rem;
}

/* ── Stripe Mount ────────────────────────────────────────────────────────── */
.fgb-stripe-container {
    border:        1px solid var(--fgb-border);
    border-radius: var(--fgb-radius);
    padding:       16px;
    margin-bottom: 16px;
    background:    var(--fgb-bg);
}

.fgb-stripe-errors {
    color:     var(--fgb-error);
    font-size: 0.85rem;
    margin-top: 8px;
}

.fgb-secure-note {
    text-align:  center;
    font-size:   0.78rem;
    color:       var(--fgb-text-muted);
    margin-top:  12px;
}

/* ── Confirmation ────────────────────────────────────────────────────────── */
.fgb-confirmation {
    text-align: center;
    padding:    32px 20px;
}

.fgb-confirmation-icon {
    width:           64px;
    height:          64px;
    border-radius:   50%;
    background:      var(--fgb-success);
    color:           #fff;
    font-size:       2rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto 16px;
}

.fgb-confirmation h2 {
    color:       var(--fgb-primary);
    font-size:   1.5rem;
    margin:      0 0 8px;
}

.fgb-confirmation-ref {
    font-size:   1rem;
    color:       var(--fgb-text-muted);
    margin:      0 0 16px;
}

.fgb-confirmation-ref strong {
    color:       var(--fgb-primary);
    font-size:   1.1rem;
}

.fgb-guide-contact {
    margin-top: 20px;
    display:    inline-flex;
    flex-direction: column;
    gap:        6px;
    text-align: left;
}

.fgb-guide-contact p {
    margin: 0;
    font-size: 0.95rem;
}

.fgb-guide-contact a {
    color:           var(--fgb-primary);
    text-decoration: none;
}

.fgb-guide-contact a:hover {
    text-decoration: underline;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .fgb-booking-wrap {
        padding: 0 12px 32px;
    }

    .fgb-guide-photo img {
        width:  56px;
        height: 56px;
    }

    .fgb-guide-name {
        font-size: 1.2rem;
    }

    .fgb-progress-step span {
        display: none; /* hide step labels on very small screens */
    }

    .fgb-cal-day {
        font-size: 0.82rem;
    }

    .fgb-btn {
        padding: 11px 16px;
        font-size: 0.9rem;
    }

    .fgb-step-nav {
        flex-direction: column-reverse;
    }

    .fgb-btn--secondary {
        width: 100%;
        justify-content: center;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   [fgb_book_now] — Discovery Booking Flow  (v1.4.0)
   Design: Refined Wilderness — dark navy, amber accents, premium outdoor feel
   ═══════════════════════════════════════════════════════════════════════════ */

/* Missing button variants referenced in templates */
.fgb-btn--ghost {
    background:  transparent;
    color:       var(--fgb-primary);
    border:      1.5px solid var(--fgb-border);
}
.fgb-btn--ghost:hover {
    background:  var(--fgb-bg-alt);
    border-color:var(--fgb-primary);
}
.fgb-btn--lg {
    padding:     14px 32px;
    font-size:   1rem;
    letter-spacing: 0.03em;
}

/* ── Wrap ────────────────────────────────────────────────────────────────── */
.fgb-bn-wrap {
    max-width:   960px;
    font-family: var(--fgb-font);
}

/* ── Step Progress Bar ───────────────────────────────────────────────────── */
.fgb-steps {
    display:         flex;
    align-items:     flex-start;
    justify-content: center;
    gap:             0;
    margin:          0 0 40px;
    padding:         0;
}
.fgb-steps .fgb-step {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            8px;
    flex:           1;
    position:       relative;
    padding:        0 6px;
}
/* connector line */
.fgb-steps .fgb-step + .fgb-step::before {
    content:    '';
    position:   absolute;
    top:        18px;
    left:       calc(-50% + 20px);
    right:      calc(50% + 20px);
    height:     2px;
    background: #d8e0ea;
    z-index:    0;
    transition: background 0.3s;
}
.fgb-steps .fgb-step--completed + .fgb-step::before { background: #c8a96e; }
.fgb-steps .fgb-step--active    + .fgb-step::before { background: linear-gradient(90deg, #c8a96e 0%, #d8e0ea 100%); }

.fgb-step-num {
    width:          38px;
    height:         38px;
    border-radius:  50%;
    background:     #e8edf3;
    color:          #8a9bb0;
    font-size:      14px;
    font-weight:    700;
    display:        flex;
    align-items:    center;
    justify-content:center;
    position:       relative;
    z-index:        1;
    transition:     background 0.25s, color 0.25s, box-shadow 0.25s;
    border:         2px solid transparent;
    flex-shrink:    0;
}
.fgb-step--active    .fgb-step-num {
    background:  #1a3a5c;
    color:       #fff;
    border-color:#c8a96e;
    box-shadow:  0 0 0 4px rgba(200,169,110,0.2);
}
.fgb-step--completed .fgb-step-num {
    background:  #c8a96e;
    color:       #fff;
    border-color:#c8a96e;
}

.fgb-step-label {
    font-size:   10px;
    color:       #9aabb8;
    font-weight: 600;
    text-align:  center;
    white-space: nowrap;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.fgb-step--active    .fgb-step-label { color: #1a3a5c; }
.fgb-step--completed .fgb-step-label { color: #c8a96e; }

/* ── Step Panels ─────────────────────────────────────────────────────────── */
.fgb-booking-step             { display: none; }
.fgb-booking-step--active     { display: block; animation: fgbFadeUp 0.3s ease; }
.fgb-booking-step[hidden]     { display: none !important; }

@keyframes fgbFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Step Typography ─────────────────────────────────────────────────────── */
.fgb-step-title {
    font-size:      1.5rem;
    font-weight:    800;
    color:          #1a3a5c;
    margin:         0 0 6px;
    letter-spacing: -0.01em;
    line-height:    1.2;
}
.fgb-step-desc {
    font-size:   14px;
    color:       #6b7f94;
    margin:      0 0 24px;
    line-height: 1.6;
}
.fgb-step-actions {
    display:    flex;
    gap:        10px;
    align-items:center;
    flex-wrap:  wrap;
    margin-top: 28px;
}

/* ── Error Banner ────────────────────────────────────────────────────────── */
.fgb-error-banner {
    background:    #fff3f3;
    border-left:   4px solid #e74c3c;
    border-radius: 0 6px 6px 0;
    padding:       12px 16px;
    color:         #922b21;
    font-size:     14px;
    margin-bottom: 20px;
}

/* ── Location Cards ──────────────────────────────────────────────────────── */
.fgb-bn-location-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap:                   16px;
    margin:                4px 0 8px;
}
.fgb-bn-location-card {
    position:      relative;
    display:       flex;
    flex-direction:column;
    align-items:   center;
    gap:           10px;
    padding:       28px 16px 22px;
    border:        2px solid #dde4ed;
    border-radius: 14px;
    background:    linear-gradient(160deg, #ffffff 0%, #f4f7fb 100%);
    cursor:        pointer;
    text-align:    center;
    font-family:   inherit;
    transition:    border-color 0.18s, box-shadow 0.18s, transform 0.18s, background 0.18s;
    overflow:      hidden;
}
.fgb-bn-location-card::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(160deg, rgba(26,58,92,0) 0%, rgba(26,58,92,0.04) 100%);
    opacity:    0;
    transition: opacity 0.18s;
}
.fgb-bn-location-card:hover {
    border-color: #1a3a5c;
    box-shadow:   0 6px 24px rgba(26,58,92,0.14);
    transform:    translateY(-2px);
}
.fgb-bn-location-card:hover::before { opacity: 1; }
.fgb-bn-location-card.fgb-card--selected {
    border-color: #c8a96e;
    background:   linear-gradient(160deg, #fdf8ef 0%, #f9f0dc 100%);
    box-shadow:   0 0 0 4px rgba(200,169,110,0.2), 0 6px 24px rgba(200,169,110,0.15);
    transform:    translateY(-2px);
}
.fgb-bn-location-icon {
    font-size:   32px;
    line-height: 1;
    filter:      drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.fgb-bn-location-name {
    font-weight: 700;
    color:       #1a3a5c;
    font-size:   13px;
    line-height: 1.3;
}
.fgb-bn-location-desc {
    font-size:              11px;
    color:                  #8a9bb0;
    display:                -webkit-box;
    -webkit-line-clamp:     2;
    -webkit-box-orient:     vertical;
    overflow:               hidden;
    line-height:            1.5;
}
.fgb-card--selected .fgb-bn-location-name { color: #8a6820; }

/* ── Calendar (book-now version) ─────────────────────────────────────────── */
.fgb-calendar-wrap {
    background:    #fff;
    border:        1px solid #dde4ed;
    border-radius: 14px;
    padding:       24px;
    max-width:     420px;
}
.fgb-cal-nav-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   20px;
}
.fgb-cal-nav-btn,
.fgb-cal-prev,
.fgb-cal-next {
    width:          36px;
    height:         36px;
    border-radius:  50%;
    background:     #f0f4f8;
    border:         none;
    cursor:         pointer;
    font-size:      18px;
    color:          #1a3a5c;
    display:        flex;
    align-items:    center;
    justify-content:center;
    transition:     background 0.15s, color 0.15s;
    font-family:    inherit;
}
.fgb-cal-nav-btn:hover,
.fgb-cal-prev:hover,
.fgb-cal-next:hover {
    background: #1a3a5c;
    color:      #fff;
}
.fgb-cal-month-label {
    font-weight:    700;
    font-size:      15px;
    color:          #1a3a5c;
    letter-spacing: 0.02em;
}
.fgb-cal-dow-row {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    gap:                   2px;
    margin-bottom:         6px;
}
.fgb-cal-dow-row span {
    text-align:  center;
    font-size:   11px;
    font-weight: 700;
    color:       #9aabb8;
    padding:     4px 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
/* Calendar grid shared between booking.css and bn */
.fgb-cal-grid,
.fgb-bn-cal-grid {
    display:               grid;
    grid-template-columns: repeat(7, 1fr);
    gap:                   3px;
}
.fgb-cal-day {
    aspect-ratio:   1;
    border:         none;
    border-radius:  8px;
    font-size:      13px;
    font-family:    inherit;
    cursor:         pointer;
    transition:     background 0.12s, color 0.12s, transform 0.1s;
    background:     transparent;
    color:          #2c3e50;
    display:        flex;
    align-items:    center;
    justify-content:center;
    font-weight:    500;
}
.fgb-cal-day--blank       { background: transparent; cursor: default; }
.fgb-cal-day--past        { color: #c8d4de; cursor: default; }
.fgb-cal-day--unavailable { color: #c8d4de; cursor: default; background: transparent; }
.fgb-cal-day--available {
    background: #e8f4ec;
    color:      #1e6b3a;
    font-weight:700;
}
.fgb-cal-day--available:hover {
    background: #1a3a5c;
    color:      #fff;
    transform:  scale(1.05);
}
.fgb-cal-day--selected {
    background: #1a3a5c;
    color:      #fff;
    font-weight:800;
    box-shadow: 0 2px 8px rgba(26,58,92,0.3);
}
.fgb-cal-loading {
    padding:    20px;
    color:      #9aabb8;
    font-size:  13px;
    text-align: center;
    font-style: italic;
}

/* ── Species Cards ───────────────────────────────────────────────────────── */
.fgb-species-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap:                   14px;
    margin:                4px 0 8px;
}
.fgb-species-card {
    position:      relative;
    display:       flex;
    flex-direction:column;
    align-items:   center;
    gap:           10px;
    padding:       26px 14px 20px;
    border:        2px solid #dde4ed;
    border-radius: 14px;
    background:    linear-gradient(160deg, #ffffff 0%, #f4f7fb 100%);
    cursor:        pointer;
    text-align:    center;
    font-family:   inherit;
    transition:    border-color 0.18s, box-shadow 0.18s, transform 0.18s, background 0.18s;
}
.fgb-species-card:hover {
    border-color: #1a3a5c;
    box-shadow:   0 6px 20px rgba(26,58,92,0.13);
    transform:    translateY(-2px);
}
.fgb-species-card--selected {
    border-color: #c8a96e;
    background:   linear-gradient(160deg, #fdf8ef 0%, #f9f0dc 100%);
    box-shadow:   0 0 0 4px rgba(200,169,110,0.2), 0 6px 20px rgba(200,169,110,0.15);
    transform:    translateY(-2px);
}
.fgb-species-icon {
    font-size:   34px;
    line-height: 1;
    filter:      drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.fgb-species-name {
    font-size:   13px;
    font-weight: 700;
    color:       #1a3a5c;
    line-height: 1.3;
}
.fgb-species-card--selected .fgb-species-name { color: #8a6820; }
.fgb-species-badge {
    display:        inline-block;
    margin-left:    8px;
    background:     #1a3a5c;
    color:          #fff;
    font-size:      11px;
    font-weight:    700;
    padding:        3px 10px;
    border-radius:  20px;
    vertical-align: middle;
    letter-spacing: 0.03em;
}

/* ── Guide Cards ─────────────────────────────────────────────────────────── */
.fgb-bn-guide-list {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}
.fgb-bn-guide-card {
    border:        2px solid #dde4ed;
    border-radius: 14px;
    padding:       22px;
    background:    #fff;
    transition:    border-color 0.18s, box-shadow 0.18s, transform 0.18s;
    cursor:        default;
}
.fgb-bn-guide-card--selected {
    border-color: #c8a96e;
    background:   linear-gradient(160deg, #fdf8ef 0%, #fff 100%);
    box-shadow:   0 0 0 4px rgba(200,169,110,0.15), 0 8px 28px rgba(0,0,0,0.06);
}
.fgb-bn-guide-header {
    display:     flex;
    align-items: center;
    gap:         16px;
    margin-bottom:12px;
}
.fgb-bn-guide-photo {
    width:         70px;
    height:        70px;
    border-radius: 50%;
    object-fit:    cover;
    flex-shrink:   0;
    border:        3px solid #dde4ed;
    box-shadow:    0 2px 8px rgba(0,0,0,0.08);
}
.fgb-bn-guide-photo--placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      #f0f4f8;
    font-size:       28px;
}
.fgb-bn-guide-card--selected .fgb-bn-guide-photo { border-color: #c8a96e; }
.fgb-bn-guide-name    { display: block; font-size: 16px; font-weight: 800; color: #1a3a5c; }
.fgb-bn-guide-subtext { display: block; font-size: 12px; color: #8a9bb0; margin-top: 3px; font-style: italic; }
.fgb-bn-guide-bio {
    font-size:   13px;
    color:       #5c6f83;
    margin:      0 0 16px;
    line-height: 1.65;
}
.fgb-bn-guide-select-row {
    background:    #f6f9fc;
    border:        1px solid #dde4ed;
    border-radius: 10px;
    padding:       14px 16px;
}
.fgb-bn-guide-select-row label.fgb-label {
    font-size:   12px;
    font-weight: 700;
    color:       #6b7f94;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    display:     block;
}
.fgb-bn-guide-select-row select {
    width:         100%;
    padding:       10px 12px;
    border:        1.5px solid #dde4ed;
    border-radius: 8px;
    font-size:     14px;
    font-family:   inherit;
    color:         #1a3a5c;
    background:    #fff;
    cursor:        pointer;
    transition:    border-color 0.15s;
    appearance:    auto;
}
.fgb-bn-guide-select-row select:focus {
    outline:      none;
    border-color: #1a3a5c;
    box-shadow:   0 0 0 3px rgba(26,58,92,0.1);
}
.fgb-bn-price-preview {
    margin-top:    12px;
    background:    linear-gradient(135deg, #1a3a5c 0%, #2a5080 100%);
    border-radius: 10px;
    padding:       14px 16px;
    color:         #fff;
    font-size:     13px;
    display:       flex;
    flex-wrap:     wrap;
    gap:           6px 16px;
    align-items:   center;
}
.fgb-bn-price-preview strong { color: #c8a96e; font-size: 15px; }
.fgb-bn-price-preview span   { opacity: 0.75; font-size: 12px; }

/* ── Group Size + Pricing Display ────────────────────────────────────────── */
.fgb-group-size-wrap {
    margin:        24px 0 8px;
    background:    linear-gradient(135deg, #1a3a5c 0%, #243f5e 100%);
    border-radius: 14px;
    padding:       22px 24px;
    color:         #fff;
}
.fgb-group-size-wrap .fgb-label {
    color:          rgba(255,255,255,0.7);
    font-size:      11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight:    700;
    margin-bottom:  10px;
    display:        block;
}
.fgb-group-size-row {
    display:     flex;
    align-items: center;
    gap:         20px;
    flex-wrap:   wrap;
    margin-top:  8px;
}
.fgb-select--group {
    width:         110px;
    flex-shrink:   0;
    padding:       10px 12px;
    border:        1.5px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    font-size:     15px;
    font-family:   inherit;
    font-weight:   700;
    color:         #fff;
    background:    rgba(255,255,255,0.1);
    cursor:        pointer;
    transition:    border-color 0.15s;
    appearance:    auto;
}
.fgb-select--group option { color: #1a3a5c; background: #fff; }
.fgb-select--group:focus  { outline: none; border-color: #c8a96e; }
.fgb-pricing-display {
    display:     flex;
    flex-wrap:   wrap;
    gap:         4px 20px;
    align-items: baseline;
    flex:        1;
}
.fgb-pricing-display span   { font-size: 12px; opacity: 0.65; }
.fgb-price-total   { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.9); }
.fgb-price-deposit { font-size: 22px; font-weight: 800; color: #c8a96e; }
.fgb-price-balance { font-size: 13px; color: rgba(255,255,255,0.7); }
.fgb-pricing-sep   { color: rgba(255,255,255,0.2); }
.fgb-extra-note {
    margin:    10px 0 0;
    font-size: 12px;
    color:     rgba(255,255,255,0.6);
    font-style:italic;
}

/* ── Details Form (book-now step 4) ──────────────────────────────────────── */
.fgb-booking-form-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   18px;
}
.fgb-form-field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}
.fgb-form-field--full { grid-column: 1 / -1; }
.fgb-required { color: #c8a96e; }
.fgb-form-field .fgb-label {
    font-size:      12px;
    font-weight:    700;
    color:          #4a5f73;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.fgb-form-field .fgb-input {
    padding:       11px 14px;
    border:        1.5px solid #dde4ed;
    border-radius: 9px;
    font-size:     14px;
    font-family:   inherit;
    color:         #1a3a5c;
    background:    #fff;
    transition:    border-color 0.15s, box-shadow 0.15s;
    width:         100%;
    box-sizing:    border-box;
}
.fgb-form-field .fgb-input:focus {
    outline:      none;
    border-color: #1a3a5c;
    box-shadow:   0 0 0 3px rgba(26,58,92,0.1);
}

/* ── Review Table ────────────────────────────────────────────────────────── */
.fgb-review-box {
    background:    #fff;
    border:        1px solid #dde4ed;
    border-radius: 14px;
    overflow:      hidden;
    margin-bottom: 20px;
}
.fgb-review-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       14px;
}
.fgb-review-table tr:not(:last-child) td {
    border-bottom: 1px solid #f0f4f8;
}
.fgb-review-table td {
    padding: 12px 18px;
}
.fgb-review-table td:first-child {
    color:      #8a9bb0;
    width:      140px;
    font-size:  12px;
    font-weight:700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.fgb-review-table td:last-child { color: #1a3a5c; font-weight: 600; }

/* ── Stripe & Errors ─────────────────────────────────────────────────────── */
.fgb-stripe-error {
    background:    #fff3f3;
    border-left:   4px solid #e74c3c;
    border-radius: 0 8px 8px 0;
    padding:       12px 16px;
    color:         #922b21;
    font-size:     13px;
    margin-top:    12px;
}
.fgb-deposit-note {
    font-size:  12px;
    color:      #9aabb8;
    margin-top: 16px;
    padding-top:16px;
    border-top: 1px dashed #dde4ed;
    text-align: center;
    line-height:1.6;
}

/* ── Confirmation ────────────────────────────────────────────────────────── */
.fgb-confirmation {
    text-align: center;
    padding:    60px 20px;
}
.fgb-confirmation-icon {
    width:          72px;
    height:         72px;
    border-radius:  50%;
    background:     linear-gradient(135deg, #1e6b3a, #2d8c4e);
    color:          #fff;
    font-size:      34px;
    display:        flex;
    align-items:    center;
    justify-content:center;
    margin:         0 auto 24px;
    box-shadow:     0 8px 24px rgba(45,140,78,0.3);
}
.fgb-confirmation h2 {
    color:          #1a3a5c;
    font-size:      1.8rem;
    font-weight:    800;
    margin-bottom:  12px;
}
.fgb-confirmation p {
    color:      #6b7f94;
    font-size:  15px;
    line-height:1.7;
    max-width:  480px;
    margin:     0 auto 10px;
}
.fgb-notice {
    padding:       16px 18px;
    background:    #f6f9fc;
    border-radius: 10px;
    color:         #4a5f73;
    font-size:     14px;
    border-left:   4px solid #dde4ed;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .fgb-bn-location-grid  { grid-template-columns: 1fr 1fr; }
    .fgb-species-grid      { grid-template-columns: 1fr 1fr; }
    .fgb-booking-form-grid { grid-template-columns: 1fr; }
    .fgb-bn-guide-header   { flex-wrap: wrap; }
    .fgb-step-label        { display: none; }
    .fgb-step-num          { width: 30px; height: 30px; font-size: 12px; }
    .fgb-calendar-wrap     { padding: 16px 12px; }
    .fgb-pricing-display   { flex-direction: column; gap: 4px; }
    .fgb-price-deposit     { font-size: 18px; }
    .fgb-btn--lg           { width: 100%; justify-content: center; }
}

/* ── SMS Consent Block ────────────────────────────────────────────────────── */

.fgb-sms-consent-wrap {
    background:    #f6f9fc;
    border:        1.5px solid #dde4ed;
    border-radius: 10px;
    padding:       18px 20px;
    margin:        20px 0 16px;
}

.fgb-sms-consent-label {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
    cursor:      pointer;
    line-height: 1.5;
}

.fgb-sms-consent-label input[type="checkbox"] {
    width:       18px;
    height:      18px;
    flex-shrink: 0;
    margin-top:  2px;
    accent-color:#1a3a5c;
    cursor:      pointer;
}

.fgb-sms-consent-text {
    font-size:   14px;
    color:       #1a3a5c;
    font-weight: 500;
    line-height: 1.55;
}

.fgb-sms-disclaimer {
    margin:    10px 0 0 30px;
    font-size: 11px;
    color:     #8a9bb0;
    line-height:1.6;
}

@media ( max-width: 480px ) {
    .fgb-sms-disclaimer { margin-left: 0; margin-top: 10px; }
}