/*
 Theme Name: Divi Child
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme
 Author: Elegant Themes
 Author URI: https://www.elegantthemes.com
 Template: Divi
 Version: 1.0.0
*/

/* =Theme customization starts here
------------------------------------------------------- */

/* ---------- Global design tokens ---------- */
:root{
  --petro-green: #1b5e46;
  --petro-ink:   #2b2b2b;
  --petro-muted: #6f706f;
  --petro-card:  #ffffff;
  --petro-line:  rgba(0,0,0,.12);
  --petro-cream: #f9f8f5;     /* light cream used in pills */
  --petro-bg:    #f6f3ee;     /* page background for badge cutout */
}

/* ---------- Header CTA (desktop) ---------- */
@media (min-width:981px) {
  li.book-menu-button a {
    padding: 15px !important;
    background: #235c40;
    margin-top: 15px !important;
    margin-bottom: 15px;
    color: #eae2d7;
    border-radius: 5px;
  }
}

/* ---------- Trusted row utilities ---------- */
.trusted-block {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  gap: 10px;
}
.trusted-1 { max-width: 90px; }

/* place button modules next to each other in the same column */
.pa-inline-buttons .et_pb_button_module_wrapper { display: inline-block; }
.pa-inline-buttons { text-align: center !important; }

.mfp-bottom-bar .mfp-title { display: none; }

/* ---------- Map embed (full-height) ---------- */
.map-col { display: flex; flex-direction: column; }
.map-col .et_pb_module.map-embed,
.map-col .map-embed .et_pb_code_inner { flex: 1 1 auto; height: 100%; }
.map-col .map-embed iframe {
  width: 100%; height: 100%; border: 0; min-height: 320px;
}

/* =========================================================
   Pricing Cards (3-up) + “Most Popular” badge
   ========================================================= */
.petro-pricing{ margin: 0 auto; max-width: 1200px; padding: 12px 16px; }

.petro-pricing .petro-pricing__grid{
  display: grid; gap: 28px;
}
@media (min-width: 640px){
  .petro-pricing .petro-pricing__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px){
  .petro-pricing .petro-pricing__grid{ grid-template-columns: repeat(3, 1fr); }
}

.petro-pricing .petro-card{
  position: relative;
  background: var(--petro-card);
  border: 1px solid #eae2d7;
  border-radius: 10px;
  overflow: visible;                     /* allow badge to overlap */
  box-shadow: 0 2px 0 rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
}

/* header (clean like the comp) */
.petro-pricing .petro-card__head{
  background: transparent;
  text-align: center;
  padding: 22px 16px 8px;
}
.petro-pricing .petro-card__title{
  margin: 0; color: var(--petro-ink);
  font-size: 22px; line-height: 1.2; font-weight: 700;
}
.petro-pricing .petro-card__subtitle{
  margin: 4px 0 0; color: var(--petro-muted);
  font-size: 14px; font-weight: 600;
}

/* price row (no separators) */
.petro-pricing .petro-card__price{
  display: flex; align-items: baseline; gap: 8px; justify-content: center;
  padding: 10px 16px 14px; border: 0; background: transparent;
}
.petro-pricing .petro-currency,
.petro-pricing .petro-amount{
  font-size: clamp(36px, 3vw, 36px);
  line-height: 1; font-weight: 600; color: var(--petro-green);
}
.petro-pricing .petro-currency{ margin-right: .25em; }
.petro-pricing .petro-suffix{
  color: var(--petro-muted); font-size: 13px;
  align-self: flex-end; transform: translateY(-2px);
}

/* features with checkmarks only */
.petro-pricing .petro-card__features{
  list-style: none; margin: 0; padding: 18px 24px 22px;
  display: grid; gap: 14px;
}
.petro-pricing .petro-card__features li{
  list-style: none; position: relative; padding-left: 22px;
  color: var(--petro-ink); font-size: 16px;
}
.petro-pricing .petro-card__features li::before{
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--petro-green); font-weight: 700;
}

/* “Most Popular” badge */
.petro-pricing .is-popular{
  border-color: var(--petro-green);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.petro-pricing .petro-badge{
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: -20px;                        /* sit across the top border */
  background: var(--petro-green); color: #fff;
  font-weight: 700; font-size: 14px; letter-spacing: .3px;
  padding: 3px 14px; border-radius: 999px;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  z-index: 3; white-space: nowrap;
  border: 2px solid var(--petro-bg); /* “cut” through the border */
}

/* small-screen tweaks */
@media (max-width: 479px){
  .petro-pricing .petro-card__head{ padding: 18px 12px 6px; }
  .petro-pricing .petro-card__title{ font-size: 20px; }
  .petro-pricing .petro-card__subtitle{ font-size: 13px; }
  .petro-pricing .petro-badge{ top: -18px; font-size: 11px; padding: 0px 10px; }
}

/* SR-only utility */
.sr-only{
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* =========================================================
   Pensioner pills (2-up) — with mobile wrapping fix
   ========================================================= */
.petro-pensioners{
  display: grid; gap: 20px;
}
@media (min-width: 768px){
  .petro-pensioners{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.p-pill{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--petro-cream);
  border-radius: 12px; padding: 18px 22px;
  box-sizing: border-box;
}

/* allow the left text to wrap on small screens */
.p-pill .p-left{ display: grid; gap: 4px; min-width: 0; }
.p-title{
  margin: 0; font-size: 16px; font-weight: 700; color: var(--petro-ink);
}
.p-sub{
  margin: 0; font-size: 14px; color: var(--petro-muted);
}
/* break long slash-separated strings if needed */
.p-pill .p-title, .p-pill .p-sub{
  overflow-wrap: anywhere; word-break: normal;
}

/* price on right */
.p-price{
  display: flex; align-items: baseline; gap: 6px;
  flex: 0 0 auto; margin-left: auto; white-space: nowrap;
}
.p-currency{ font-size: 22px; font-weight: 700; color: var(--petro-green); }
.p-amount{ font-size: clamp(24px, 3.2vw, 28px); font-weight: 700; line-height: 1; color: var(--petro-green); }

@media (max-width: 480px){
  .p-pill{ padding: 16px 18px; gap: 10px; }
  .p-title{ font-size: 15px; }
  .p-sub{ font-size: 13px; }
  .p-price .p-currency{ font-size: 20px; }
  .p-price .p-amount{ font-size: 24px; }
}

/* =========================================================
   Two-column checklist (with Divi bullet reset)
   ========================================================= */
.petro-two-col-list{
  display:grid; gap:18px 40px;
}
@media (min-width: 900px){
  .petro-two-col-list{
    grid-template-columns: repeat(2, minmax(0,1fr));
    align-items:start;
  }
}

/* reset Divi bullets */
.petro-two-col-list ul,
.petro-two-col-list li{
  list-style: none !important; margin: 0; padding: 0;
}
.petro-two-col-list li::marker{ content: "" !important; }
.petro-two-col-list li:before{ content: none !important; }

/* our list */
.petro-list{ display:grid; row-gap:14px; }
.petro-list li{
    position: relative;
    padding-left: 28px;
    color: var(--petro-ink);
    line-height: 1.2;
    font-size: 14px;
    padding-top: 5px;
}
.petro-list li::before{
  content:"✓" !important;
  position:absolute; left:0; top:0.1em; color:var(--petro-green);
  font-weight:700; font-size:18px;
}
@media (max-width: 480px){
  .petro-list{ row-gap:12px; }
  .petro-list li{ padding-left:24px; }
  .petro-list li::before{ font-size:16px; }
}