/* overlay backdrop */
#my-review-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
    z-index: 9999;
  }
  #my-review-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  
  /* popup window */
  #my-review-popup {
    background: #d5d3de;
    width: 90%;
    max-width: 800px;
    overflow: hidden;
  }
  
  /* inner flex container */
  .popup-inner {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
  }
  
  /* left side (featured landscape image) */
  .popup-left {
    flex: 0 0 55%;
    aspect-ratio: 766 / 527;
    background-size: cover;
    background-position: center center;
  }
  
  /* arrow graphic */
  .popup-arrow {
    flex: 0 0 auto;
    width: 10%;
    text-align: center;
  }
  .popup-arrow img {
    max-width: 100%;
    height: auto;
  }
  
  /* right side (text + button) */
  .popup-right {
    flex: 0 0 35%;
    padding: 2rem;
    position: relative;
  }
  
  /* close button */
  .popup-right .close-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
    color: #333;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
  }
  .popup-right .close-btn:hover {
    background: #fff;
    color: #000;
  }
  
  /* heading image */
  .heading-img {
    margin-bottom: 1rem;
  }
  .heading-img img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* message text */
  .popup-right .message {
    margin: 0 0 1.5rem;
    font-size: 1rem;
    line-height: 1.4;
  }
  
  /* button */
  .apply-btn {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.75rem 1.5rem;
    background: #604a79;
    color: #fff;
    text-decoration: none;
  }
  
  /* footer tiny text */
  .popup-right .small {
    margin: 0;
    font-size: 0.85rem;
    color: #333;
  }
  
  /* 1) Center the heading image in the right‐hand panel */
.heading-img {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
  }
  
  /* 2) Make the arrow column a bit wider & the arrow itself bigger */
  .popup-arrow {
    flex: 0 0 15%;        /* was 10% */
    text-align: center;
  }
  .popup-arrow img {
    width: 100%;          /* fill that space */
    height: auto;
  }
  
  /* 3) Lift the “×” up so it sits over the corner */
  .popup-right .close-btn {
    top: -0.5rem;         /* move up into the border-radius */
    right: -0.5rem;       /* move right into the border-radius */
    /* you can tweak these negative offsets to taste */
  }
/* ensure the inner flex is centered vertically */
.popup-inner {
    display: flex;
    align-items: center;
    position: relative;
  }
  
  /* reserve a fixed slot for the arrow */
  .popup-arrow {
    flex: 0 0 160px;        /* width of your arrow container */
    margin: 0 -48px;        /* negative to overlap both sides */
    z-index: 1;             /* float above the seam */
    text-align: center;
  }
  
  .popup-arrow img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* keep left & right panes equal */
  .popup-left,
  .popup-right {
    flex: 1;
  }
  
  /* center the heading image */
  .heading-img {
    text-align: center;
    margin-bottom: 1rem;
  }
  
  .heading-img img {
    max-width: 80%;
    height: auto;
    display: inline-block;
  }
  
  /* nudge the “×” up and in */
  .popup-right .close-btn {
    top: -0.5rem;
    right: -0.5rem;
  }
/* 1) lift the arrow up so it sits above the text */
.popup-arrow {
    /* move up by about 40px – tweak as needed */
    margin-top: -40px;
    /* make sure it stays on top of everything */
    z-index: 2;
  }
  
  /* 2) move the “×” over to the left side */
  .popup-right .close-btn {
    right: auto;
    left: 0.75rem;
  }
    
  /* center the Apply/Enter button */
.popup-right .apply-btn {
    display: block;
    margin: 1.5rem auto; /* vertical space, then auto‐center */
  }
  
  /* center the “Applications/Entries close soon!” line */
  .popup-right .small {
    text-align: center;
    margin-top: 0.5rem; /* optional: tweak your spacing */
  }
  /* ———————————————————————————————————————————
   1) Lift the arrow up and split it between image & text
———————————————————————————————————————————— */
.popup-inner {
    position: relative; /* make container for absolutely-positioned arrow */
  }
  
  .popup-arrow {
    position: absolute;
    top: 40%;                     /* halfway down the popup */
    left: 40%;                    /* just to the right of the image column */
    transform: translate(-50%, -50%); /* center horizontally, pull up slightly */
    z-index: 2;                   /* sit on top of both columns */
  }
  
  .popup-arrow img {
    max-width: 180px;             /* tweak as needed for visual weight */
    width: 100%;
    height: auto;
  }
  
  
  /* ———————————————————————————————————————————
     2) Push “×” to the outer right edge again
  ———————————————————————————————————————————— */
  #my-review-popup .close-btn {
    left: auto;                   /* override any centering */
    right: 1rem;                  /* 1rem in from the right edge */
    top: 1rem;                    /* 1rem down from the top edge */
  }
  
  /* ———————————————————————————————————————————
     3) Make the button narrower
  ———————————————————————————————————————————— */
  .popup-right .apply-btn {
    display: block;
    margin: 1.5rem auto;
    max-width: 240px;             /* cap the width so it isn’t full-width */
    width: 100%;                  /* but will shrink down to max-width */
    padding: 0.75rem 1.5rem;      /* you can tweak these to taste */
  }
  
  /* 1) Centre the text inside the CTA button */
.popup-right .apply-btn {
    text-align: center;            /* ensure the label is dead-centre */
    line-height: normal;           /* if you had changed this, reset it */
  }
  
  @media (min-width: 768px) {
    #my-review-popup .close-btn {
      top: 4px !important;
      right: 12px;
    }
  }
  
  /* mobile: keep your existing mobile spacing */
  @media (max-width: 767px) {
    #my-review-popup .close-btn {
      top: 0.75rem !important;
      right: 0.75rem !important;
    }
  }
  
  /* make the arrow about 1.3× its original size */
  #my-review-popup .popup-arrow img {
    display: block;
    width: 130px;    /* pick a width that looks right */
    height: auto;
  }

  /* ———————————————— 
   Make that message easier to read & center it 
   ———————————————— */
#my-review-popup .popup-right .message {
    font-size: 2.00rem;    /* bump up for desktop */
    line-height: 1.6;      /* a little breathing room */
    text-align: center;    /* center-align the copy */
    margin: 1rem 0;        /* space above/below */
  }
  
  /* desktop vs mobile */
  @media (max-width: 768px) {
    #my-review-popup .popup-right .message {
      font-size: 1.5rem;   /* even larger on small screens */
    }
  }
  
  @media (min-width: 768px) {
    /* make sure arrow can overflow both columns */
    .popup-inner {
      overflow: visible;
    }
  
    /* nudge the arrow higher on desktop */
    .popup-arrow {
      top: 40%;                         /* pull it up from the middle */
      left: 55%;                        /* position it right of the image */
      transform: translate(-50%, -50%); /* center back on itself */
    }
  }
  

  @media (min-width: 768px) {
    /* finally push the arrow a bit further into the image pane */
    .popup-inner { overflow: visible; } /* make sure it can overflow */
  
    .popup-arrow {
      position: absolute;
      top:   40%;              /* pulls it up above the mid-line */
      left:  50% !important;   /* ← move this left from 55% down to 50% */
      transform: translate(-60%, -50%); /* nudge it left 10% of its own width */
      max-width: 200px;        /* make it a touch bigger */
      z-index: 2;
    }
  }
  
  @media (max-width: 767px) {
    /* pull the arrow higher on phones/tablets */
    .popup-arrow {
      top: 35% !important;    /* instead of the 40% you used for desktop */
      transform: translate(-50%, -50%) !important;
    }
  }
  
  @media (max-width: 767px) {
    /* stack image above text on phones */
    .popup-inner {
      flex-direction: column !important;
      align-items: stretch;
    }
  
    /* make the “left” (image) full-width */
    .popup-left {
      flex: none !important;
      width: 100%;
      aspect-ratio: auto;      /* let height auto-adjust */
    }
  
    /* hide or reposition the arrow if you like */
    .popup-arrow {
      display: none;           /* hide on mobile; remove if you want to keep it */
    }
  
    /* then your text block becomes full-width underneath */
    .popup-right {
      flex: none !important;
      width: 100%;
      padding: 1.5rem 1rem;
    }
  }
  
  @media (max-width: 767px) {
    /* 1) make it a vertical stack */
    .popup-inner {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch;
    }
  
    /* 2) image goes full-width and sits first */
    .popup-left {
      order: 1;
      flex: none !important;
      width: 100%;
      aspect-ratio: auto;   /* let height be automatic */
      margin-bottom: 1rem;
    }
  
    /* 3) arrow can go (or you could re-position it) */
    .popup-arrow {
      display: none;
    }
  
    /* 4) heading image next */
    .heading-img {
      order: 2;
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 1rem;
    }
    .heading-img img {
      max-width: 80%;
      height: auto;
    }
  
    /* 5) then the right pane */
    .popup-right {
      order: 3;
      flex: none !important;
      width: 100%;
      padding: 1.5rem 1rem;
    }
  }
  @media (max-width: 767px) {
    .popup-left {
      /* remove any `aspect-ratio` override */
      aspect-ratio: auto !important;
      /* give it a 16:9 padding hack so it has height */
      padding-top: calc(100% * 527 / 766) !important; /* 527/766 = your original ratio */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      margin-bottom: 1rem;
    }
  }