/*
================================================================================
  FROOTS REVAMPED MODAL
  froots-revamped-modal.css

  Version history:
  v1.0  2026  Initial version
              - Bootstrap-free FR Modal component
              - BEM naming: fr-modal, fr-modal__dialog, fr-modal__content, etc.
              - is-open class toggle (no Bootstrap dependency)
              - body.fr-modal-lock prevents background scroll
              - Requires: froots-revamped-modal.js
              - Link this file only on pages that use modals
================================================================================
*/

/* ── Backdrop / outer shell ──────────────────────────────────────────────────── */
.fr-modal {
  display:          none;
  position:         fixed;
  top:              0;
  right:            0;
  bottom:           0;
  left:             0;
  z-index:          5000;
  background:       rgba(0, 0, 0, .65);
  padding:          24px 14px;   /* outer gutter from screen edge */
  overflow:         auto;
}

.fr-modal.is-open {
  display: block;
}

/* ── Dialog container ────────────────────────────────────────────────────────── */
.fr-modal__dialog {
  width:   min(880px, calc(100% - 28px));  /* capped width + gutters */
  margin:  40px auto;                      /* center + top/bottom breathing room */
}

/* ── Content card ────────────────────────────────────────────────────────────── */
.fr-modal__content {
  background:    #fff;
  border-radius: 14px;
  overflow:      hidden;
  box-shadow:    0 18px 60px rgba(0, 0, 0, .35);
}

/* ── Header / Body / Footer shared padding ───────────────────────────────────── */
.fr-modal__header,
.fr-modal__body,
.fr-modal__footer {
  padding: 18px 22px;   /* mobile inner padding */
}

@media (min-width: 768px) {
  .fr-modal__header,
  .fr-modal__body,
  .fr-modal__footer {
    padding: 22px 40px;   /* wider gutters on desktop */
  }
}

/* ── Header ──────────────────────────────────────────────────────────────────── */
.fr-modal__header {
  border-bottom:   1px solid rgba(0, 0, 0, .08);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
}

.fr-modal__title {
  margin:      0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size:   18px;
  color:       var(--charcoal, #2B2B2B);
}

/* ── Footer ──────────────────────────────────────────────────────────────────── */
.fr-modal__footer {
  border-top:      1px solid rgba(0, 0, 0, .08);
  display:         flex;
  justify-content: flex-end;
  gap:             10px;
}

/* ── Close button ────────────────────────────────────────────────────────────── */
.fr-modal__close {
  border:        1px solid rgba(0, 0, 0, .15);
  background:    #fff;
  color:         #222;
  padding:       8px 12px;
  border-radius: 10px;
  cursor:        pointer;
}

/* ── Body helpers ────────────────────────────────────────────────────────────── */
.fr-modal__body img {
  width:         100%;
  height:        auto;
  border-radius: 10px;
}

.fr-modal__body hr {
  border:     0;
  border-top: 1px solid rgba(0, 0, 0, .10);
  margin:     14px 0;
}

/* ── Scroll lock (applied to body while modal is open) ───────────────────────── */
body.fr-modal-lock {
  overflow: hidden;
}


/*
================================================================================
  USAGE
================================================================================

  1. LINK THIS FILE (on pages that need modals only)
  ─────────────────────────────────────────────────
  <link rel="stylesheet" href="froots-revamped-modal.css">
  <script src="froots-revamped-modal.js" defer></script>


  2. HTML STRUCTURE
  ─────────────────────────────────────────────────
  <div class="fr-modal" id="my-modal">
    <div class="fr-modal__dialog">
      <div class="fr-modal__content">

        <div class="fr-modal__header">
          <h2 class="fr-modal__title">Modal Title</h2>
          <button class="fr-modal__close" data-dismiss="modal">&times;</button>
        </div>

        <div class="fr-modal__body">
          <p>Your content goes here.</p>
        </div>

        <div class="fr-modal__footer">
          <button class="fr-modal__close" data-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
  </div>


  3. TRIGGER (open a modal)
  ─────────────────────────────────────────────────
  Any element with data-toggle="modal" and data-target pointing to the modal ID:

  <button data-toggle="modal" data-target="#my-modal">Open Modal</button>
  <a href="#" data-toggle="modal" data-target="#my-modal">Open Modal</a>


  4. CLOSE (three ways — all handled automatically by the JS)
  ─────────────────────────────────────────────────
  a) Close button:   any element with data-dismiss="modal" inside the modal
  b) Backdrop click: clicking outside the fr-modal__dialog
  c) ESC key:        press Escape while modal is open


  5. MULTIPLE MODALS
  ─────────────────────────────────────────────────
  Each modal needs a unique id. Triggers point to that id via data-target:

  <div class="fr-modal" id="modal-one"> ... </div>
  <div class="fr-modal" id="modal-two"> ... </div>

  <button data-toggle="modal" data-target="#modal-one">Open One</button>
  <button data-toggle="modal" data-target="#modal-two">Open Two</button>

================================================================================
*/