/* Extracted from bahrain-map.php so it is cached once instead of being re-sent
   inside the HTML on every page view. Enqueued by
   lumoria_enqueue_template_styles() in functions.php. */

    #lumBahrainMap, #lumBahrainMap * { box-sizing: border-box; }
    #lumBahrainMap {
      --map-mint: #44bda1;
      --map-mint-dark: #14836e;
      --map-ink: #04272f;
      --map-paper: #faf9f7;
      --map-line: rgba(116, 194, 179, .21);
      font-family: var(--font-primary);
      padding: clamp(58px, 7vw, 92px) 0;
      background: var(--map-paper);
      color: var(--map-ink);
  /* Geographic positioning below is deliberately physical: the pins, labels and
     leader lines are placed against a fixed map of Bahrain. Mirroring them under
     [dir="rtl"] would mirror the country, so they must NOT use logical properties. */
    }
    #lumBahrainMap .lum-map-shell {
      width: 100%; max-width: var(--container-w); margin: 0 auto;
      padding-inline: clamp(20px, 4vw, 48px);
    }
    #lumBahrainMap .lum-map-head { max-width: 870px; margin-bottom: 38px; }
    #lumBahrainMap .lum-map-eyebrow {
      display: inline-flex; align-items: center; min-height: 40px; padding: 9px 20px;
      border: 1px solid rgba(68, 189, 161, .45); border-radius: 999px;
      color: var(--map-mint-dark); background: rgba(88, 199, 166, .06);
      font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
      margin-bottom: 23px;
    }
    #lumBahrainMap .lum-map-title {
      margin: 0 0 12px; font-family: var(--font-primary); font-size: var(--text-h2);
      font-weight: var(--fw-heading); letter-spacing: var(--ls-h2); line-height: 1.15; color: var(--map-ink);
    }
    #lumBahrainMap .lum-map-intro { margin: 0; color: #607070; font-size: var(--text-base); line-height: var(--lh-prose); }
    #lumBahrainMap .lum-map-grid {
      display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(410px, 1fr);
      gap: 24px; align-items: stretch; height: 700px;
    }
    /* The stage is the map image itself. Its own sea colour fills the frame so
       the letterboxing either side of the portrait image is invisible. */
    #lumBahrainMap .lum-map-stage {
      position: relative; display: flex; justify-content: center;
      height: 100%; min-height: 0; overflow: hidden; isolation: isolate;
      border: 1px solid #bcdfec; border-radius: 34px;
      background: #91d6e9;
    }
    /* Shrink-wrapped to the rendered image, so a pin's percentage is a
       percentage of the map rather than of the frame around it. */
    #lumBahrainMap .lum-map-canvas { position: relative; flex: 0 0 auto; height: 100%; }
    #lumBahrainMap .lum-map-image {
      display: block; height: 100%; width: auto; max-width: 100%;
      object-fit: contain; user-select: none; -webkit-user-drag: none;
    }
    /* Every building on this map sits inside Manama, so the labels would pile
       on top of each other if each one were pinned to its own coordinate.
       The pin is therefore a zero-size anchor at the true position: the dot
       stays exactly on it, while the label is free to slide up or down
       (--label-dy, set by bahrain-map.js) until it clears its neighbours. A
       leader line, sized and angled by the same script, ties the moved label
       back to its dot. */
    #lumBahrainMap .lum-map-pin {
      position: absolute; z-index: 4; width: 0; height: 0; padding: 0; border: 0;
      background: none; color: #0a3030; font: inherit; cursor: pointer; text-decoration: none;
    }
    /* Whichever pin the visitor is on comes forward, labels and all. */
    #lumBahrainMap .lum-map-pin:hover,
    #lumBahrainMap .lum-map-pin:focus-visible,
    #lumBahrainMap .lum-map-pin.is-active { z-index: 6; }
    #lumBahrainMap .lum-map-pin:focus-visible { outline: 0; }

    #lumBahrainMap .lum-map-pin-dot {
      position: absolute; left: 0; top: 0; z-index: 2;
      display: grid; place-items: center; width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px;
      border: 2px solid #fff; border-radius: 50%; background: var(--map-ink);
      box-shadow: 0 2px 6px rgba(9, 40, 48, .4);
      transition: background .28s ease, transform .28s ease;
    }
    #lumBahrainMap .lum-map-pin-dot::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
    #lumBahrainMap .lum-map-pin:hover .lum-map-pin-dot,
    #lumBahrainMap .lum-map-pin:focus-visible .lum-map-pin-dot,
    #lumBahrainMap .lum-map-pin.is-active .lum-map-pin-dot {
      background: var(--map-mint-dark); transform: scale(1.18);
    }

    #lumBahrainMap .lum-map-pin-label {
      --label-gap: 22px;
      position: absolute; left: 0; top: 0; z-index: 1;
      padding: 7px 12px; border-radius: 999px;
      background: rgba(255, 255, 255, .96); color: inherit;
      box-shadow: 0 2px 4px rgba(9, 40, 48, .28), 0 8px 20px rgba(9, 40, 48, .18);
      font-size: 13px; font-weight: 700; line-height: 1.15; white-space: nowrap;
      transform: translate(var(--label-gap), calc(-50% + var(--label-dy, 0px)));
      transition: color .28s ease, background .28s ease, box-shadow .28s ease;
    }
    #lumBahrainMap .lum-map-pin.is-left .lum-map-pin-label {
      left: auto; right: 0;
      transform: translate(calc(var(--label-gap) * -1), calc(-50% + var(--label-dy, 0px)));
    }
    #lumBahrainMap .lum-map-pin:hover .lum-map-pin-label,
    #lumBahrainMap .lum-map-pin:focus-visible .lum-map-pin-label,
    #lumBahrainMap .lum-map-pin.is-active .lum-map-pin-label {
      color: #062c2b; background: var(--map-mint); box-shadow: 0 12px 30px rgba(4, 22, 21, .24);
    }
    #lumBahrainMap .lum-map-pin:focus-visible .lum-map-pin-label { outline: 3px solid #fff; outline-offset: 3px; }

    /* Leader line: it starts at the label edge nearest the dot and is rotated
       back onto it, so a label that has been pushed aside still reads as
       belonging to its own point. */
    #lumBahrainMap .lum-map-pin-label::before {
      content: ''; position: absolute; top: 50%; left: 0;
      width: var(--conn-len, var(--label-gap)); height: 2px; border-radius: 2px;
      background: rgba(4, 39, 47, .72);
      /* Hairline of white so the line stays legible over roads and place
         names on the map beneath it. */
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .8);
      transform-origin: 0 50%;
      transform: rotate(var(--conn-rot, 180deg));
    }
    #lumBahrainMap .lum-map-pin.is-left .lum-map-pin-label::before { left: auto; right: 0; transform-origin: 100% 50%; }
    #lumBahrainMap .lum-map-pin:hover .lum-map-pin-label::before,
    #lumBahrainMap .lum-map-pin:focus-visible .lum-map-pin-label::before,
    #lumBahrainMap .lum-map-pin.is-active .lum-map-pin-label::before { background: var(--map-mint-dark); }
    #lumBahrainMap .lum-map-caption {
      position: absolute; left: 22px; bottom: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 9px;
      padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .9);
      color: #17494a; font-size: 12px; line-height: 1.5;
      box-shadow: 0 2px 8px rgba(9, 40, 48, .14);
    }
    #lumBahrainMap .lum-map-caption::before { content: ''; width: 22px; height: 1px; background: var(--map-mint-dark); }
    #lumBahrainMap .lum-map-card {
      width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden;
      display: flex; flex-direction: column; border: 1px solid #d7e3e1;
      border-radius: 34px; background: #fff; box-shadow: 0 14px 34px rgba(12, 54, 51, .075);
    }
    #lumBahrainMap .lum-map-card-media { flex: 0 0 232px; height: 232px; overflow: hidden; background: #d8e4e1; }
    #lumBahrainMap .lum-map-card-media img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      transition: opacity .24s cubic-bezier(.4, 0, .2, 1), transform .65s cubic-bezier(.4, 0, .2, 1);
    }
    #lumBahrainMap .lum-map-card:hover .lum-map-card-media img { transform: scale(1.025); }
    #lumBahrainMap .lum-map-card-body {
      display: flex; flex: 1; min-height: 0; flex-direction: column; padding: 28px 30px 30px;
      opacity: 1; transform: translateY(0);
      transition: opacity .24s cubic-bezier(.4, 0, .2, 1), transform .24s cubic-bezier(.4, 0, .2, 1);
    }
    #lumBahrainMap .lum-map-card.is-changing .lum-map-card-body,
    #lumBahrainMap .lum-map-card.is-changing .lum-map-card-media img { opacity: 0; }
    #lumBahrainMap .lum-map-card.is-changing .lum-map-card-body { transform: translateY(5px); }
    #lumBahrainMap .lum-map-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; min-height: 29px; }
    #lumBahrainMap .lum-map-chip { padding: 6px 13px; border-radius: 999px; color: #073734; background: rgba(68, 189, 161, .88); font-size: 11px; font-weight: 600; }
    #lumBahrainMap .lum-map-card-title { min-height: 35px; margin: 0 0 5px; font-family: var(--font-primary); font-size: var(--text-xl); line-height: var(--lh-snug); color: #062d2c; font-weight: var(--fw-semibold);}
    #lumBahrainMap .lum-map-location { display: flex; align-items: center; gap: 8px; min-height: 21px; margin: 0 0 14px; color: #657272; font-size: 13px; }
    #lumBahrainMap .lum-map-location i { color: var(--map-mint-dark); }
    #lumBahrainMap .lum-map-description {
      display: -webkit-box; min-height: 64px; max-height: 64px; margin: 0 0 17px; overflow: hidden;
      color: #5e6b6b; font-size: 14px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    }
    #lumBahrainMap .lum-map-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0 0 18px; padding: 15px 18px; border-radius: 18px; background: #f7ece5; }
    #lumBahrainMap .lum-map-stat span { display: block; margin-bottom: 3px; color: #6b7473; font-size: 11px; }
    #lumBahrainMap .lum-map-stat strong { color: #092f2f; font-size: 16px; }
    #lumBahrainMap .lum-map-stat:last-child strong { color: var(--map-mint-dark); }
    #lumBahrainMap .lum-map-suitable { min-height: 48px; margin: 0 0 18px; color: #102f2f; font-size: 12px; line-height: 1.45; }
    #lumBahrainMap .lum-map-suitable span { display: block; margin-bottom: 4px; color: #697473; font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
    #lumBahrainMap .lum-map-suitable b { display: -webkit-box; overflow: hidden; font-weight: 600; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    #lumBahrainMap .lum-map-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; }
    #lumBahrainMap .lum-map-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 15px; border-radius: 999px; color: #082e2d; border: 1px solid #d5dfdd; background: #fff; text-decoration: none; font-size: var(--text-sm); font-weight: var(--fw-semibold); transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease; line-height: 1;}
    #lumBahrainMap .lum-map-action:hover { transform: translateY(-2px); border-color: var(--map-mint); }
    #lumBahrainMap .lum-map-action.primary { border-color: var(--map-mint); background: var(--map-mint); }
    #lumBahrainMap .lum-map-action.maps { margin-inline-start: auto; padding-inline: 6px; border-color: transparent; }
    /* Google Maps pin, in Google's brand red. Never mirrored in RTL — a brand
       mark reads the same way round in every language. */
    #lumBahrainMap .lum-map-gicon { width: 17px; height: 17px; flex-shrink: 0; display: block; }
    [dir="rtl"] #lumBahrainMap .lum-map-gicon { transform: none; }

    @media (max-width: 1100px) {
      #lumBahrainMap .lum-map-grid { grid-template-columns: 1fr; height: auto; }
      #lumBahrainMap .lum-map-stage { height: auto; min-height: 620px; }
      #lumBahrainMap .lum-map-card { display: grid; grid-template-columns: minmax(300px, .85fr) 1.15fr; }
      #lumBahrainMap .lum-map-card-media { height: 100%; min-height: 520px; }
      #lumBahrainMap .lum-map-card-body { min-height: 520px; }
    }
    @media (max-width: 720px) {
      #lumBahrainMap .lum-map-shell { padding-inline: 14px; }
      #lumBahrainMap .lum-map-head { margin-inline: 6px; }
      #lumBahrainMap .lum-map-grid { gap: 18px; }
      #lumBahrainMap .lum-map-stage { min-height: 560px; border-radius: 24px; }
      #lumBahrainMap .lum-map-pin-label { width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
      #lumBahrainMap .lum-map-pin-label::before { display: none; }
      #lumBahrainMap .lum-map-pin-dot { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
      #lumBahrainMap .lum-map-pin-dot::after { width: 6px; height: 6px; }
      #lumBahrainMap .lum-map-card { display: flex; border-radius: 24px; }
      #lumBahrainMap .lum-map-card-media { height: 230px; min-height: 230px; }
      #lumBahrainMap .lum-map-card-body { min-height: 490px; padding: 25px 22px; }
      #lumBahrainMap .lum-map-action.maps { width: 100%; margin-inline-start: 0; justify-content: flex-start; padding-inline-start: 0; }
    }
    #lumBahrainMap.is-stage-only {
      min-width: 0;
      height: 100%;
      padding: 0;
      background: transparent;
    }
    #lumBahrainMap.is-stage-only .lum-map-shell,
    #lumBahrainMap.is-stage-only .lum-map-grid {
      width: 100%;
      height: 100%;
      padding-inline: 0;
    }
    #lumBahrainMap.is-stage-only .lum-map-grid { display: block; }
    #lumBahrainMap.is-stage-only .lum-map-stage {
      height: 100%;
      min-height: 520px;
      border-radius: 18px;
    }
    @media (max-width: 1100px) {
      #lumBahrainMap.is-stage-only .lum-map-stage { min-height: 460px; }
    }
    @media (max-width: 720px) {
      #lumBahrainMap.is-stage-only .lum-map-stage { min-height: 420px; }
    }
    @media (prefers-reduced-motion: reduce) {
      #lumBahrainMap *, #lumBahrainMap *::before, #lumBahrainMap *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }