/*

========================================

GREEN DESTINATIONS

Production CSS

WCAG-aware

Responsive

Mobile-first

========================================

*/

:root{

  --green:#0b5138;

  --green-dark:#08382a;

  --green-soft:#eaf7ef;

  --lime:#a7d129;

  --ink:#10231d;

  --muted:#52635d;

  --bg:#f5f8f4;

  --panel:#ffffff;

  --line:#dbe6df;

  --focus:#ffbf47;

  --radius:22px;

  --shadow:0 18px 45px rgba(16,35,29,.12);

  --max:1180px;

  --text-scale:1;

}

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

RESET

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

*{

  box-sizing:border-box;

}

html{

  scroll-behavior:smooth;

}

body{

  margin:0;

  background:var(--bg);

  color:var(--ink);

  font-family:Arial,Helvetica,sans-serif;

  font-size:calc(17px * var(--text-scale));

  line-height:1.65;

}

img{

  max-width:100%;

  height:auto;

  display:block;

}

a{

  color:#0b6048;

  text-decoration-thickness:.12em;

  text-underline-offset:.18em;

}

a:hover{

  text-decoration-thickness:.18em;

}

button,

input,

textarea,

select{

  font:inherit;

}

.container{

  width:min(var(--max),calc(100% - 32px));

  margin-inline:auto;

}

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

ACCESSIBILITY

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

.skip-link{

  position:absolute;

  left:-999px;

  top:0;

  background:var(--focus);

  color:#111;

  padding:.85rem 1rem;

  z-index:999;

}

.skip-link:focus{

  left:1rem;

  top:1rem;

}

button,

a,

input,

textarea,

select,

summary{

  outline-offset:4px;

}

button:focus-visible,

a:focus-visible,

input:focus-visible,

textarea:focus-visible,

select:focus-visible,

summary:focus-visible{

  outline:4px solid var(--focus);

}

.high-contrast{

  --green:#000000;

  --green-dark:#000000;

  --lime:#fff200;

  --ink:#000000;

  --bg:#ffffff;

  --panel:#ffffff;

  --line:#222222;

}

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

ACCESS BAR

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

.access-bar{

  background:#06261d;

  color:#ffffff;

  font-size:.92rem;

}

.access-inner{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:1rem;

  padding:.5rem 0;

}

.access-actions{

  display:flex;

  align-items:center;

  gap:.5rem;

  flex-wrap:wrap;

}

.access-actions button,

.access-actions a{

  background:rgba(255,255,255,.12);

  border:1px solid rgba(255,255,255,.22);

  color:#ffffff;

  text-decoration:none;

  border-radius:999px;

  padding:.4rem .7rem;

  cursor:pointer;

}

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

HEADER

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

.site-header{

  position:sticky;

  top:0;

  z-index:200;

  box-shadow:0 8px 24px rgba(0,0,0,.08);

}

.main-nav{

  background:linear-gradient(

    135deg,

    var(--green-dark),

    var(--green)

  );

}

.stacked-header{

  padding:1rem 0;

}

.brand-row{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:1rem;

}

.brand-logo img{

  height:72px;

  width:auto;

  object-fit:contain;

}

.header-cta{

  display:flex;

  align-items:center;

  gap:1rem;

}

.desktop-quick-nav{

  display:flex;

  align-items:center;

  gap:.35rem;

  list-style:none;

  margin:0;

  padding:0;

}

.desktop-quick-nav a{

  display:flex;

  align-items:center;

  justify-content:center;

  min-height:44px;

  padding:.65rem .9rem;

  border-radius:999px;

  text-decoration:none;

  color:#ffffff;

  font-weight:800;

}

.desktop-quick-nav a:hover{

  background:rgba(255,255,255,.16);

}

.mini-button{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:46px;

  background:var(--lime);

  color:#10231d;

  text-decoration:none;

  font-weight:900;

  border-radius:999px;

  padding:.75rem 1rem;

}

.menu-toggle{

  display:none;

  align-items:center;

  justify-content:center;

  min-height:48px;

  background:#ffffff;

  color:var(--green);

  border:0;

  border-radius:999px;

  padding:.75rem 1rem;

  font-weight:900;

  cursor:pointer;

}

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

GROUPED MENU

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

.grouped-menu{

  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:.4rem;

  margin:1rem 0 0;

  padding:0;

  list-style:none;

}

.grouped-menu > li{

  position:relative;

}

.grouped-menu a,

.submenu-toggle{

  display:flex;

  align-items:center;

  justify-content:center;

  min-height:46px;

  color:#ffffff;

  background:transparent;

  border:0;

  text-decoration:none;

  font-weight:900;

  border-radius:999px;

  padding:.75rem 1rem;

  cursor:pointer;

}

.grouped-menu a:hover,

.submenu-toggle:hover,

.grouped-menu a[aria-current="page"]{

  background:rgba(255,255,255,.16);

}

.submenu-toggle::after{

  content:"▾";

  margin-left:.45rem;

  font-size:.8rem;

}

.submenu{

  display:none;

  position:absolute;

  top:100%;

  left:0;

  min-width:240px;

  margin:.45rem 0 0;

  padding:.55rem;

  background:#ffffff;

  border-radius:18px;

  list-style:none;

  box-shadow:0 18px 45px rgba(0,0,0,.16);

  z-index:100;

}

.has-submenu.open > .submenu{

  display:block;

}

.submenu a{

  color:var(--ink);

  justify-content:flex-start;

  border-radius:14px;

  padding:.75rem .9rem;

}

.submenu a:hover{

  background:var(--green-soft);

  color:var(--green);

}

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

HERO

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

.hero{

  position:relative;

  overflow:hidden;

  color:#ffffff;

  background:

    linear-gradient(

      rgba(0,0,0,.50),

      rgba(0,0,0,.50)

    ),

    var(--hero-image);

  background-size:cover;

  background-position:center;

}

.hero .container{

  padding:clamp(4rem,8vw,7rem) 0;

}

.hero-content{

  max-width:760px;

}

.eyebrow{

  margin:0 0 .8rem;

  text-transform:uppercase;

  letter-spacing:.12em;

  font-size:.78rem;

  font-weight:900;

  color:#d7ff7a;

}

h1,

h2,

h3{

  line-height:1.1;

  margin:0 0 1rem;

}

h1{

  font-size:clamp(2.4rem,5vw,4.8rem);

  letter-spacing:-.04em;

}

h2{

  font-size:clamp(1.8rem,3vw,3rem);

  letter-spacing:-.03em;

}

h3{

  font-size:1.3rem;

}

.lead{

  font-size:clamp(1.08rem,2vw,1.3rem);

  max-width:68ch;

}

.button-row{

  display:flex;

  gap:.8rem;

  flex-wrap:wrap;

  margin-top:1.5rem;

}

.button{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:50px;

  background:var(--lime);

  color:#10231d;

  text-decoration:none;

  font-weight:900;

  border-radius:999px;

  padding:.85rem 1.2rem;

}

.button.secondary{

  background:#ffffff;

  color:var(--green);

}

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

LAYOUT

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

.section{

  padding:clamp(3rem,6vw,5rem) 0;

}

.section.soft{

  background:#ffffff;

}

.section-title{

  max-width:780px;

  margin-bottom:2rem;

}

.grid{

  display:grid;

  gap:1.25rem;

}

.grid.two{

  grid-template-columns:repeat(2,minmax(0,1fr));

}

.grid.three{

  grid-template-columns:repeat(3,minmax(0,1fr));

}

.grid.four{

  grid-template-columns:repeat(4,minmax(0,1fr));

}

.card{

  background:var(--panel);

  border:1px solid var(--line);

  border-radius:var(--radius);

  padding:1.4rem;

  box-shadow:0 10px 28px rgba(16,35,29,.06);

}

.media-band{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:1.5rem;

  align-items:center;

}

.media-band img{

  border-radius:var(--radius);

  box-shadow:var(--shadow);

  object-fit:cover;

}

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

CONTENT

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

.checklist{

  padding-left:1.2rem;

}

.checklist li{

  margin:.45rem 0;

}

.quote{

  border-left:6px solid var(--lime);

  padding:1rem 1.2rem;

  background:#f7fbf3;

  border-radius:0 var(--radius) var(--radius) 0;

}

.notice{

  background:#fff8db;

  border:1px solid #f0d36a;

  border-radius:var(--radius);

  padding:1rem;

}

.pill-list{

  display:flex;

  flex-wrap:wrap;

  gap:.5rem;

}

.pill{

  background:#e9f3df;

  border:1px solid #cfe3bf;

  border-radius:999px;

  padding:.35rem .7rem;

  font-weight:700;

}

.form-grid{

  display:grid;

  gap:1rem;

}

.form-grid input,

.form-grid textarea,

.form-grid select{

  width:100%;

  padding:.9rem;

  border:1px solid #b8c8bf;

  border-radius:14px;

  background:#ffffff;

}

.hidden-field{

  position:absolute;

  left:-9999px;

}

.small{

  font-size:.92rem;

  color:var(--muted);

}

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

FOOTER

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

.site-footer{

  background:#082b22;

  color:#ffffff;

  padding:3rem 0 1.5rem;

}

.site-footer a{

  color:#ffffff;

}

.footer-grid{

  display:grid;

  grid-template-columns:1.5fr 1fr 1fr 1fr;

  gap:2rem;

}

.footer-grid ul{

  list-style:none;

  padding:0;

  margin:0;

}

.footer-grid li{

  margin:.5rem 0;

}

.footer-bottom{

  border-top:1px solid rgba(255,255,255,.18);

  margin-top:2rem;

  padding-top:1rem;

  display:flex;

  justify-content:space-between;

  gap:1rem;

  flex-wrap:wrap;

}

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

RESPONSIVE

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

@media(max-width:920px){

  .access-inner{

    flex-direction:column;

    align-items:flex-start;

  }

  .brand-row{

    flex-wrap:wrap;

  }

  .brand-logo img{

    height:58px;

  }

  .desktop-quick-nav,

  .green-contact-button,

  .header-cta{

    display:none;

  }

  .menu-toggle{

    display:inline-flex;

    margin-left:auto;

  }

  .grouped-menu{

    display:none;

    width:100%;

    margin:1rem 0 0;

    padding:1rem 0 0;

    border-top:1px solid rgba(255,255,255,.18);

  }

  .grouped-menu.open{

    display:grid;

    gap:.5rem;

  }

  .grouped-menu > li{

    width:100%;

  }

  .grouped-menu a,

  .submenu-toggle{

    width:100%;

    justify-content:space-between;

    border-radius:16px;

    background:rgba(255,255,255,.08);

  }

  .submenu{

    position:static;

    min-width:0;

    width:100%;

    margin:.35rem 0 .65rem;

    border-radius:16px;

    box-shadow:none;

  }

  .has-submenu.open > .submenu{

    display:grid;

    gap:.25rem;

  }

  .grid.two,

  .grid.three,

  .grid.four,

  .media-band,

  .footer-grid{

    grid-template-columns:1fr;

  }

  .footer-bottom{

    display:block;

  }

}

@media(prefers-reduced-motion:reduce){

  *{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

  }

}

/* =========================
PROFESSIONAL FOOTER REDESIGN
========================= */

.site-footer{
  background:#061f18;
  color:#ffffff;
  margin-top:0;
}

.site-footer a{
  color:#ffffff;
}

.footer-cta{
  background:
    linear-gradient(135deg, rgba(11,81,56,.96), rgba(8,56,42,.96));
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}

.footer-cta-inner{
  display:grid;
  grid-template-columns:1.4fr auto;
  gap:2rem;
  align-items:center;
  padding:2.3rem 0;
}

.footer-cta .eyebrow{
  color:#d7ff7a;
}

.footer-cta h2{
  color:#ffffff;
  margin-bottom:.6rem;
}

.footer-cta p{
  max-width:68ch;
  margin-bottom:0;
}

.footer-cta-actions{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.footer-cta-actions .button.secondary{
  background:#ffffff;
  color:#0b5138;
}

.footer-main{
  padding:3rem 0;
}

.footer-main-grid{
  display:grid;
  grid-template-columns:1.45fr .85fr .85fr 1fr;
  gap:2rem;
  align-items:start;
}

.footer-brand-panel{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  padding:1.4rem;
}

.footer-logo-link{
  display:inline-block;
  margin-bottom:1rem;
}

.footer-logo{
  width:min(290px,100%);
  height:auto;
  object-fit:contain;
}

.footer-brand-panel p{
  color:rgba(255,255,255,.88);
  margin:0 0 1.2rem;
}

.footer-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}

.footer-badges span{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:.32rem .62rem;
  border-radius:999px;
  background:rgba(167,209,41,.16);
  border:1px solid rgba(167,209,41,.38);
  color:#ecffd1;
  font-weight:800;
  font-size:.9rem;
}

.footer-nav h2,
.footer-contact h2{
  color:#ffffff;
  font-size:1.05rem;
  margin-bottom:1rem;
}

.footer-nav ul{
  list-style:none;
  margin:0;
  padding:0;
}

.footer-nav li{
  margin:.55rem 0;
}

.footer-nav a{
  color:rgba(255,255,255,.86);
  text-decoration:none;
}

.footer-nav a:hover{
  color:#ffffff;
  text-decoration:underline;
}

.footer-contact p{
  color:rgba(255,255,255,.86);
  margin:0 0 1rem;
}

.footer-contact strong{
  color:#ffffff;
}

.footer-legal{
  background:#041711;
  border-top:1px solid rgba(255,255,255,.12);
  padding:1.2rem 0;
}

.footer-legal-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

.footer-legal-inner p{
  margin:0;
  color:rgba(255,255,255,.82);
}

.footer-legal nav{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
}

.footer-legal nav a{
  color:rgba(255,255,255,.86);
  text-decoration:none;
}

.footer-legal nav a:hover{
  color:#ffffff;
  text-decoration:underline;
}

.footer-note{
  padding-top:.85rem;
}

.footer-note p{
  max-width:88ch;
  margin:0;
  color:rgba(255,255,255,.68);
  font-size:.92rem;
}

/* High contrast footer support */
.high-contrast .site-footer,
.high-contrast .footer-cta,
.high-contrast .footer-legal{
  background:#000000;
  color:#ffffff;
}

.high-contrast .footer-brand-panel,
.high-contrast .footer-badges span{
  border-color:#ffffff;
}

/* Footer responsive */
@media(max-width:920px){

  .footer-cta-inner{
    grid-template-columns:1fr;
  }

  .footer-cta-actions{
    justify-content:flex-start;
  }

  .footer-main-grid{
    grid-template-columns:1fr;
  }

  .footer-brand-panel{
    padding:1.2rem;
  }

  .footer-logo{
    width:min(250px,100%);
  }

  .footer-legal-inner{
    align-items:flex-start;
  }

}


/* =========================
PHOTO TILE FIX
Keep at bottom so it overrides footer/global image rules
========================= */

.photo-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;
  align-items:stretch;
}

.photo-card{
  display:flex;
  flex-direction:column;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}

.photo-card img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
  border-radius:0 !important;
  box-shadow:none !important;
}

.photo-copy{
  padding:1.25rem;
}

.photo-copy h3{
  margin-top:0;
}

.photo-copy p{
  margin-bottom:0;
}

@media(max-width:920px){
  .photo-grid{
    grid-template-columns:1fr;
  }

  .photo-card img{
    height:230px;
  }
}


.eyebrow{
  margin:0 0 .8rem;

  text-transform:uppercase;
  letter-spacing:.12em;

  font-size:.78rem;
  font-weight:900;

  color:#5e7f18;
}

.hero .eyebrow,
.footer-cta .eyebrow{
  color:#d7ff7a;
}


/* =========================
FAQ PAGE REBUILD
========================= */

.faq-layout{
  display:grid;
  grid-template-columns:minmax(240px,320px) 1fr;
  gap:1.5rem;
  align-items:start;
}

.faq-panel{
  position:sticky;
  top:150px;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.4rem;
  box-shadow:0 10px 28px rgba(16,35,29,.06);
}

.faq-panel h3{
  margin-top:0;
}

.faq-panel ul{
  margin:0 0 1.2rem;
  padding-left:1.1rem;
}

.faq-panel li{
  margin:.45rem 0;
}

.faq-accordion{
  display:grid;
  gap:.8rem;
}

.faq-accordion details{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(16,35,29,.05);
}

.faq-accordion summary{
  cursor:pointer;
  list-style:none;
  padding:1rem 1.15rem;
  font-weight:900;
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.faq-accordion summary::-webkit-details-marker{
  display:none;
}

.faq-accordion summary::after{
  content:"+";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--green-soft);
  color:var(--green);
  font-weight:900;
}

.faq-accordion details[open] summary{
  background:var(--green-soft);
}

.faq-accordion details[open] summary::after{
  content:"–";
  background:var(--green);
  color:#ffffff;
}

.faq-accordion .answer{
  padding:0 1.15rem 1.15rem;
}

.faq-accordion .answer p{
  margin-bottom:0;
}

.section.mint{
  background:var(--green-soft);
}

@media(max-width:920px){

  .faq-layout{
    grid-template-columns:1fr;
  }

  .faq-panel{
    position:static;
  }

  .faq-accordion summary{
    align-items:flex-start;
  }

}

/* Cookie notice and floating WhatsApp action */
.whatsapp-float{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:999;
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#25d366;
  color:#ffffff;
  box-shadow:0 14px 34px rgba(16,35,29,.25);
  transition:transform .18s ease, box-shadow .18s ease;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(16,35,29,.32);
  outline:3px solid rgba(37,211,102,.25);
  outline-offset:4px;
}

.whatsapp-float svg{
  width:34px;
  height:34px;
  fill:currentColor;
}

.cookie-banner{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:1000;
  padding:1rem;
  background:rgba(16,35,29,.18);
  backdrop-filter:blur(8px);
}

.cookie-banner[hidden]{
  display:none;
}

.cookie-banner-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
  padding:1.1rem 1.25rem;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:0 18px 50px rgba(16,35,29,.2);
}

.cookie-banner h2{
  margin:0 0 .35rem;
  font-size:1.08rem;
  color:var(--ink);
}

.cookie-banner p{
  margin:0;
  color:var(--muted);
  max-width:760px;
}

.cookie-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  justify-content:flex-end;
  flex:0 0 auto;
}

.cookie-actions .button{
  border:0;
  cursor:pointer;
  white-space:nowrap;
}

@media(max-width:760px){
  .cookie-banner-inner{
    align-items:flex-start;
    flex-direction:column;
  }

  .cookie-actions{
    width:100%;
    justify-content:flex-start;
  }

  .cookie-actions .button{
    flex:1 1 160px;
    text-align:center;
  }

  .whatsapp-float{
    right:16px;
    bottom:16px;
    width:54px;
    height:54px;
  }

  .whatsapp-float svg{
    width:30px;
    height:30px;
  }
}

/* Mobile navigation width fix */
@media(max-width:920px){
  .stacked-header{
    padding:.75rem 0;
  }

  .brand-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    width:100%;
  }

  .brand-logo{
    flex:1 1 auto;
    max-width:calc(100% - 104px);
  }

  .brand-logo img{
    max-width:100%;
  }

  .menu-toggle{
    order:2;
    flex:0 0 auto;
    margin-left:0;
  }

  .grouped-menu{
    order:3;
    flex:0 0 100%;
    width:100%;
    max-width:none;
    margin:.75rem 0 0;
    padding:.85rem 0 0;
    grid-template-columns:1fr;
  }

  .grouped-menu.open{
    display:grid;
    grid-template-columns:1fr;
  }

  .grouped-menu > li,
  .grouped-menu a,
  .submenu-toggle{
    width:100%;
    max-width:none;
  }

  .grouped-menu a,
  .submenu-toggle{
    min-height:52px;
    padding:.85rem 1rem;
    text-align:left;
  }

  .submenu{
    width:100%;
    max-width:none;
    padding:.45rem;
  }

  .submenu a{
    min-height:48px;
    padding:.75rem .9rem;
  }
}

@media(max-width:420px){
  .container{
    width:calc(100% - 24px);
  }

  .brand-logo{
    max-width:calc(100% - 92px);
  }

  .menu-toggle{
    min-height:44px;
    padding:.65rem .85rem;
  }
}

/* Compact centred form-success balloon */
.success-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(10, 28, 20, 0.34);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.success-balloon {
    width: min(460px, calc(100vw - 40px));
    box-sizing: border-box;
    padding: 28px 28px 24px;
    background: #f2fbf4;
    border: 1px solid #b7dfc0;
    border-radius: 24px;
    box-shadow: 0 22px 60px rgba(16, 46, 31, 0.24);
    text-align: center;
    animation: successBalloonIn .18s ease-out;
}

.success-balloon-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #2f8f52;
    color: #fff;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

.success-balloon-copy h2 {
    margin: 0 0 10px;
    font-size: clamp(1.45rem, 4vw, 1.9rem);
    line-height: 1.15;
    color: #123126;
}

.success-balloon-copy p {
    margin: 0 auto;
    max-width: 380px;
    font-size: 1rem;
    line-height: 1.55;
    color: #355047;
}

.success-balloon-ok {
    appearance: none;
    margin-top: 22px;
    min-width: 112px;
    padding: 11px 24px;
    border: 0;
    border-radius: 999px;
    background: #2f8f52;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(47, 143, 82, .24);
}

.success-balloon-ok:hover,
.success-balloon-ok:focus-visible {
    background: #267744;
    outline: none;
}

@keyframes successBalloonIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 520px) {
    .success-balloon {
        padding: 24px 20px 20px;
        border-radius: 20px;
    }
}