@media (max-width:767px){
  .pb-main .shop-cats{padding-right:18px;padding-left:18px}
  .pb-main .shop-cats{display:flex;grid-template-columns:none;gap:10px;overflow-x:auto}
  .pb-main .shop-cat{flex:0 0 188px}
}

.pb-main .booking-section{padding-top:18px;padding-bottom:18px}

.pb-main .frm_forms,
.pb-main .frm_forms.with_frm_style{max-width:none;width:100%;margin-left:auto;margin-right:auto;color:var(--dark)}

/* Formidable zet zijn eigen formulierbreedte (standaard 760px, uit de
   Formidable-stijl) op het <form>-element zelf, niet op de .frm_forms-wrapper.
   Alleen die wrapper verbreden helpt dus niets: het formulier blijft daarbinnen
   gecentreerd staan. Hiermee vult het de volle breedte van de sectie, gelijk
   met de paginatitel en de rest van de inhoud. */

.pb-main .frm_forms{--form-width:100%}

.pb-main .frm_forms form{max-width:none;width:100%;margin-left:0;margin-right:0}

.pb-main .frm_forms fieldset{border:0;margin:0;padding:0;min-width:0}

.pb-main .frm_forms .frm_form_field{margin-bottom:13px}

.pb-main .frm_forms .frm_error_style,
.pb-main .frm_forms .frm_error{font-size:12px;color:#b4452f}

.pb-main .frm_forms .pb-step-head{margin-bottom:14px}

.pb-main .frm_forms .pb-step-head .h2{margin-top:0}

.pb-main .frm_forms .frm_primary_label{display:block;color:#7d6757;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:850;padding:0 0 6px;margin:0;line-height:1.2}

.pb-main .frm_forms input[type="text"],
.pb-main .frm_forms input[type="email"],
.pb-main .frm_forms input[type="tel"],
.pb-main .frm_forms input[type="number"],
.pb-main .frm_forms select,
.pb-main .frm_forms textarea{width:100%!important;border:1px solid #d5c2b3!important;background:#fffaf5!important;color:var(--dark)!important;border-radius:var(--r)!important;min-height:44px!important;padding:0 11px!important;font-family:Manrope,system-ui,sans-serif!important;font-size:14px!important;box-shadow:none!important}

.pb-main .frm_forms textarea{min-height:96px!important;padding-top:11px!important;padding-bottom:11px!important;resize:vertical}

.pb-main .frm_forms input::placeholder,
.pb-main .frm_forms textarea::placeholder{color:#9a8778;font-size:13px}

.pb-main .frm_forms input:focus,
.pb-main .frm_forms select:focus,
.pb-main .frm_forms textarea:focus{border-color:var(--accent)!important;outline:0}

.pb-main .frm_forms .frm_half{grid-column:span 6}

.pb-main .frm_forms .form-note{color:var(--muted);font-size:13px;line-height:1.5;margin:6px 2px 4px}

/* Behandelingen-kiezer — compacte lijst, één regel per behandeling.
   De drie onderdelen (.pb-tr-naam / .pb-tr-duur / .pb-tr-prijs) komen uit het
   optielabel dat inc/pb-behandelingen-form-options.php opbouwt: Formidable
   staat HTML toe in een optielabel, dus de opsplitsing gebeurt serverkant en
   niet in de browser. Let op: Formidable toont `data-frmprice` zélf nergens —
   dat attribuut voedt alleen het Totaal-veld — vandaar dat de zichtbare prijs
   uit het label komt. */

.pb-main .frm_forms .pb-treatments > .frm_primary_label{display:none}

/* Eén kolom over de volle breedte: de namen ("Doodle Medium — schofthoogte
   43 t/m 52 cm") zijn te lang voor twee kolommen en braken daar over twee
   regels. Zo blijft elke regel één regel en staat de prijs netjes rechts. */

.pb-main .frm_forms .pb-treatments .frm_opt_container{display:block;border:0;padding:0;border-top:1px solid var(--line)}

.pb-main .frm_forms .pb-treatments .frm_checkbox,
.pb-main .frm_forms .pb-treatments .frm_radio{margin:0}

.pb-main .frm_forms .pb-treatments .frm_checkbox label,
.pb-main .frm_forms .pb-treatments .frm_radio label{display:flex;align-items:center;gap:12px;margin:0;padding:13px 16px;cursor:pointer;width:100%;color:var(--brown);font-size:15.5px;font-weight:700;line-height:1.3;transition:background .15s ease;
	/* Deze vier zetten de kaartopmaak uit die in de pagina zelf staat
	   (inline <style> in Bricks, selector `.pb-booking .pb-treatments
	   .frm_checkbox label`). Weglaten is niet genoeg: wat je niet overschrijft
	   blijft gewoon staan, en dan houd je per regel een omlijnd blokje. */
	background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}

.pb-main .frm_forms .pb-treatments .frm_checkbox label:hover,
.pb-main .frm_forms .pb-treatments .frm_radio label:hover{background:#fff8f1}

/* Het keuzerondje.
   Formidable dwingt `height:16px !important` af op zijn eigen checkboxes, en
   die regel is met CSS niet te overrulen — ook niet met een specifiekere
   selector plus !important (nagemeten in de browser: de eigen regel wordt
   simpelweg niet toegepast). Vandaar deze aanpak: de checkbox zelf wordt
   onzichtbaar gemaakt en het rondje is een ::before op het label. Een
   pseudo-element kan Formidable niet aanpassen, dus het blijft netjes rond.
   Klikken op het label schakelt de checkbox gewoon, dus dit verandert niets
   aan de bediening of de toegankelijkheid. */

.pb-main .frm_forms .pb-treatments .frm_checkbox input[type="checkbox"],
.pb-main .frm_forms .pb-treatments .frm_radio input[type="radio"]{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;pointer-events:none}

.pb-main .frm_forms .pb-treatments .frm_checkbox label::before,
.pb-main .frm_forms .pb-treatments .frm_radio label::before{content:"";flex:0 0 20px;width:20px;height:20px;box-sizing:border-box;display:block;border:2px solid #d3bbaa;border-radius:50%;background:#fff;transition:border-color .15s ease,background .15s ease}

.pb-main .frm_forms .pb-treatments label:has(input:checked)::before{border-color:var(--accent);background:radial-gradient(circle at center,var(--accent) 0 42%,#fff 44%)}

/* Opgesplitst label: naam vet, duur klein en grijs eronder, prijs rechts */

.pb-main .frm_forms .pb-treatments .pb-tr-midden{flex:1 1 auto;min-width:0;display:block}

.pb-main .frm_forms .pb-treatments .pb-tr-naam{display:block;overflow-wrap:anywhere}

.pb-main .frm_forms .pb-treatments .pb-tr-duur{display:block;margin-top:1px;font-size:12px;font-weight:600;line-height:1.3;color:var(--muted)}

.pb-main .frm_forms .pb-treatments .pb-tr-prijs{flex:0 0 auto;font-family:Fraunces,serif;font-size:18px;font-weight:600;color:var(--brown);white-space:nowrap;padding-left:12px}

.pb-main .frm_forms .pb-treatments label:has(input:checked){background:#fff8f1}

.pb-main .frm_forms .pb-treatments label:has(input:checked) .pb-tr-prijs{color:var(--accent)}

.pb-main .frm_forms .pb-total{display:flex;align-items:center;gap:8px;background:var(--brown);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow2);margin:4px 0 14px}

.pb-main .frm_forms .pb-total .frm_primary_label{order:1;margin:0;margin-right:auto;color:rgba(255,255,255,.78);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:850;padding:0}

/* Formidable toont het totaal in <p class="frm_total_formatted"> en verbergt
   het echte invoerveld in .frm_with_box.frm_hidden. Daarom hangt de opmaak aan
   die paragraaf en niet meer aan het input-veld — dat laatste leverde een los
   euroteken rechts en het bedrag links op.
   De regel hieronder zet het oude euroteken op de balk zelf expliciet uit;
   anders staat er twee keer een € zodra een oudere versie van dit bestand nog
   in de browsercache zit. */

.pb-main .frm_forms .pb-total::before{content:none}

.pb-main .frm_forms .pb-total .frm_total_formatted{order:2;margin:0;color:#fff;font-family:Fraunces,serif;font-size:24px;font-weight:600;line-height:1;white-space:nowrap}

.pb-main .frm_forms .pb-total .frm_total_formatted::before{content:"\20AC\00A0"}

.pb-main .frm_forms .pb-total .frm_with_box{display:none}

.pb-main .frm_forms .pb-total .frm_description,
.pb-main .frm_forms .pb-total .frm_required{display:none}

.pb-main .frm_forms .frm_submit{margin-top:8px;clear:both}

.pb-main .frm_forms .frm_submit button,
.pb-main .frm_forms .frm_submit input[type="submit"],
.pb-main .frm_forms .frm_button_submit,
.pb-main .frm_forms .frm_prev_page{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,var(--accent),#a96548)!important;color:#fff!important;font:800 14px/1 Manrope,system-ui,sans-serif!important;padding:0 18px!important;min-height:44px!important;border:0!important;border-radius:var(--btn-radius, 10px)!important;box-shadow:0 8px 16px rgba(111,72,49,.18);cursor:pointer;transition:.2s ease;text-shadow:none}

.pb-main .frm_forms .frm_submit .frm_prev_page,
.pb-main .frm_forms .frm_submit button.frm_prev_page{background:#efe1d6!important;color:var(--brown)!important;box-shadow:none!important}

.pb-main .frm_forms .frm_submit button:hover{transform:translateY(-1px)}

@media (max-width:767px){
  .pb-main .frm_forms,
  .pb-main .frm_forms.with_frm_style{max-width:none}
  .pb-main .frm_forms .pb-treatments .frm_checkbox label,
  .pb-main .frm_forms .pb-treatments .frm_radio label{flex-wrap:wrap;font-size:14.5px;padding:11px 2px}
  .pb-main .frm_forms .pb-treatments .pb-tr-prijs{font-size:16px;padding-left:32px;width:100%;margin-top:2px}
  .pb-main .frm_forms .pb-total .frm_total_formatted{font-size:21px}
}

/* ==========================================================================
   MOBIEL — uitlijning en de twee vaste balken onderin
   --------------------------------------------------------------------------
   TWEE DINGEN UIT DE VORIGE VERSIE RECHTGEZET.

   1) Uitlijning. Ik zette `flex-wrap:wrap` op het label zodat de prijs onder
      de naam kon vallen. Bij een lange naam ("Doodle Standaard — schofthoogte
      vanaf 53 cm") brak de flexregel echter al ná het rondje, waardoor dat in
      z'n eentje bovenaan kwam te staan en de naam over de volle breedte ging.
      Grid lost dat structureel op: kolom 1 is altijd het rondje, kolom 2 is
      altijd de tekst, hoe lang die ook wordt.

   2) De knop. Totaal én verzendknop kregen allebei `bottom: 86px`, dus ze
      plakten op precies dezelfde plek en de knop verdween achter de balk.
      Ze staan nu boven elkaar: totaal bovenop, knop eronder binnen duimbereik.
   ========================================================================== */

@media (max-width: 767px) {
  .pb-main .frm_forms,
  .pb-main .frm_forms.with_frm_style{ max-width: none }
  .pb-main .frm_forms .pb-treatments .frm_checkbox label,
  .pb-main .frm_forms .pb-treatments .frm_radio label{
    display: grid;
    grid-template-columns: 20px 1fr;
    column-gap: 12px;
    align-items: start;
    padding: 12px 4px;
    font-size: 14.5px;
  }
  .pb-main .frm_forms .pb-treatments .frm_checkbox label::before,
  .pb-main .frm_forms .pb-treatments .frm_radio label::before{
    margin-top: 2px;
  }
  .pb-main .frm_forms .pb-treatments .pb-tr-midden{ grid-column: 2 }
  .pb-main .frm_forms .pb-treatments .pb-tr-prijs{
    grid-column: 2;            /* onder de naam, niet onder het rondje */
    width: auto;
    padding-left: 0;
    margin-top: 5px;
    font-size: 17px;
  }
}

/* ==========================================================================
   TOT 899px — totaal en knop plakken onderin
   --------------------------------------------------------------------------
   LET OP DE EERSTE REGEL. Vanaf 900px zet pb-behandelingen-overzicht.js het
   overzicht, het totaal en de knop in één omhulsel (.pb-booking-zij), zodat
   de zijkolom als geheel kan meeschuiven. Maar een plakkend element blijft
   alleen plakken binnen zijn eigen omhulsel — en dat omhulsel is maar een paar
   honderd pixels hoog. Op mobiel zouden de balken dus na een klein stukje
   scrollen weer losschieten.

   `display:contents` haalt het omhulsel uit de opmaak zonder het uit de HTML
   te halen: de drie blokken gedragen zich weer als losse kinderen van het
   formulier, en dat is hoog genoeg om over de hele lijst te blijven plakken.
   Zo hoeft het script niets te weten over schermbreedte.
   ========================================================================== */

@media (max-width: 899px) {
  .pb-main .frm_forms .pb-booking .pb-booking-zij{ display: contents }
  .pb-main .frm_forms .pb-total{
    position: sticky;
    bottom: calc(78px + 8px + 56px);   /* boven de knop, boven de onderbalk */
    z-index: 30;
    margin: 10px 0 8px;
    padding: 11px 14px;
    border-radius: var(--btn-radius, 10px);
    box-shadow: 0 12px 28px rgba(38, 27, 20, .22);
  }
  .pb-main .frm_forms .pb-total .frm_primary_label{ font-size: 10.5px; align-self: center }
  .pb-main .frm_forms .pb-total .frm_total_formatted{ font-size: 21px; align-self: center }
  .pb-main .frm_forms .frm_submit{
    position: sticky;
    bottom: calc(78px + 8px);
    z-index: 29;
    margin: 0;
    /* Zonder eigen ondergrond liep de lijst zichtbaar achter de knop door. */
    background: var(--cream, #fdfaf6);
    padding: 6px 0 10px;
  }
  .pb-main .frm_forms .frm_submit{ display: flex !important }
  .pb-main .frm_forms .frm_button_submit{
    width: 100% !important;
    flex: 1 1 100% !important;
    display: flex !important;
  }
  .pb-main .pb-keuze{ display: none }
  .pb-main .frm_forms form{ padding-bottom: 24px }
}

/* ==========================================================================
   INDELING VAN STAP 1 — behandeling kiezen
   --------------------------------------------------------------------------
   Wat er mis was: alle behandelingen stonden in één kolom onder elkaar, met
   het totaal en de knop "Volgende stap" pas onderaan. Op een breed scherm
   betekende dat een smalle lijst met de halve breedte leeg, en moest je naar
   beneden scrollen om te zien wat het kostte of om verder te kunnen.

   Nu de lijst links en rechts het totaal met de knop, die meeschuiven terwijl
   je aanvinkt — dezelfde logica als de mobiele versie hierboven, alleen naast
   elkaar in plaats van onder elkaar.

   TWEE DINGEN DIE HIER BEWUST ZO ZIJN:

   1. Formidable geeft .frm_fields_container zélf al een raster van twaalf
      kolommen; dat is hun indelingssysteem waarmee velden op breedte worden
      gezet. Ik vervang dat niet maar lift er op mee: de lijst pakt kolom 1-8,
      de zijkolom 9-12. Zou ik het raster overschrijven, dan kan de indeling
      van stap 2 sneuvelen.

      De !important is hier geen luiheid: formidableforms.css zet zelf
      `grid-column: 1 / span 12 !important` op elk .frm_form_field en op
      .frm_submit. Zonder !important verliest elke plaatsing het.

   2. De selector hangt aan `:has(.pb-treatments)` en niet aan de stap zelf.
      Zo raakt dit uitsluitend de stap met de behandelingenlijst, ongeacht
      hoeveel stappen het formulier later krijgt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   De blokken in de zijkolom altijd over de volle breedte

   Dit staat bewust BUITEN elke media query, want het is op beide breedtes
   nodig — om twee verschillende redenen:

   Op desktop is .pb-booking-zij zelf een raster van één kolom. Zonder deze
   regel houden het totaal en de knop hun eigen grid-column vast (van
   Formidable of van een oudere regel), maakt dat raster daar lege kolommen bij
   en schuift het totaal naar rechts weg. Dat gebeurde ook echt.

   Op mobiel staat de zijkolom op display:contents. Dan zijn de blokken voor de
   opmaak weer kinderen van het formulier, maar in de HTML nog steeds kinderen
   van het omhulsel — en Formidable's regel `.frm_fields_container > .frm_submit`
   matcht op die HTML-structuur. Die regel treft ze dus niet meer, waardoor ze
   hun volle breedte kwijt zijn en in één van de twaalf smalle kolommen belanden
   (gemeten: 100px in plaats van 375px). Deze regel zet dat recht.
   -------------------------------------------------------------------------- */

.pb-main .frm_forms .pb-booking .pb-booking-zij > *{
  grid-column:1 / -1 !important;
  width:auto !important;
}

@media (min-width:900px){
  .pb-main .frm_forms .pb-booking .pb-booking-zij > *{
    grid-row:auto !important;
    position:static !important;
  }
}

@media (min-width:900px){
  .pb-main .frm_forms .pb-booking .frm_fields_container:has(.pb-treatments){
    align-items:start;
    column-gap:28px;
  }
  .pb-main .frm_forms .pb-booking .frm_fields_container:has(.pb-treatments) > .frm_html_container{
    grid-column:1 / span 12 !important;
  }
  .pb-main .frm_forms .pb-booking .pb-treatments{
    grid-column:1 / 9 !important;
    grid-row:2;
  }
  .pb-main .frm_forms .pb-booking .pb-booking-zij{
    grid-column:9 / span 4 !important;
    grid-row:2;
    position:sticky;
    top:96px;                 /* onder de vaste header */
    align-self:start;
    display:grid;
    gap:12px;

    /* Eén kaart om alle drie de blokken. Eerder stonden het totaal (ronding
       18) en de knop (ronding 10) los onder elkaar als gelijkwaardige
       blokken, en dan valt dat verschil in ronding op. Nu zit alles ín een
       kaart: het overzicht, het bedrag en de knop lezen als één geheel, en
       het bedrag en de knop krijgen exact dezelfde ronding. */
    padding:16px;
    border:1px solid var(--line);
    border-radius:var(--img-radius-lg, 18px);
    background:var(--paper, #fffaf5);
  }
  .pb-main .frm_forms .pb-booking .pb-total{
    margin:0;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    padding:14px 16px;
    /* Zelfde ronding als de knop eronder — dat was precies wat wrong. */
    border-radius:var(--btn-radius, 10px);
  }
  .pb-main .frm_forms .pb-booking .pb-total .frm_primary_label{margin:0;font-size:11px}
  .pb-main .frm_forms .pb-booking .pb-total .frm_total_formatted{font-size:30px}
  .pb-main .frm_forms .pb-booking .frm_submit{margin:0;padding:0}
  .pb-main .frm_forms .pb-booking .frm_button_submit{width:100% !important}
  .pb-main .frm_forms .pb-booking .frm_fields_container > div:has(.frm_verify){
    grid-column:1 / span 12 !important;
  }
}

/* ==========================================================================
   MUST HAVES — zichtbaar onderdeel van de trimsalon
   De productenrij stond los onder het formulier met alleen "Door Patty
   aanbevolen / Must Haves" erboven; niets verbond die met de trimsalon. Met
   een eigen achtergrond en een lijn erboven leest het als een vervolg op de
   afspraak in plaats van een willekeurige winkelblok.
   ========================================================================== */

/* De categorie-tegels stonden hier als tekstpillen. Dat was fout: die
   elementen dragen een inline background-image en horen fotokaarten te zijn.
   De opmaak ervoor stond alleen in pb-shop.css en pb-index.css, en die laden
   hier niet — vandaar dat ze kaal waren. Het component staat nu in
   pb-common.css, zodat het op elke pagina hetzelfde is. */

/* ==========================================================================
   BEHANDELINGENLIJST ALS LOSSE KAARTEN
   --------------------------------------------------------------------------
   Eerst stond de lijst in één omkaderd blok met een scheidingslijn per regel.
   Dat gaf een onrustig beeld: alleen de buitenste vier hoeken waren afgerond
   en daarbinnen liepen tien rechte lijntjes. Nu is elke behandeling een eigen
   kaart met eigen ronding en een beetje lucht ertussen — dezelfde taal als de
   kaarten elders op de site, en de aangevinkte keuze is direct te zien.
   ========================================================================== */

.pb-main .frm_forms .pb-treatments .frm_opt_container{
  display:grid;
  /* Eén kolom. Formidable zet hier zelf meerdere kolommen zodra je het raster
     niet vastzet, maar twee kolommen maakt het kiezen rommelig: je oog moet
     dan heen en weer terwijl dit een lijst is die je van boven naar beneden
     doorloopt. */
  grid-template-columns:1fr;
  gap:8px;
  border:0;
  padding:0;
  background:transparent;
}

.pb-main .frm_forms .pb-treatments .frm_checkbox,
.pb-main .frm_forms .pb-treatments .frm_radio{margin:0}

.pb-main .frm_forms .pb-treatments .frm_checkbox label,
.pb-main .frm_forms .pb-treatments .frm_radio label{
  border:1px solid var(--line);
  border-radius:var(--img-radius, 14px);
  background:var(--paper, #fffaf5);
  padding:14px 16px;
  transition:border-color .15s ease, background .15s ease;
}

/* Aangevinkt: accentrand en een lichte tint, zodat je in één oogopslag ziet
   wat je gekozen hebt zonder naar het totaal te hoeven kijken. */

.pb-main .frm_forms .pb-treatments label:has(input:checked){
  border-color:var(--accent);
  background:#fff8f1;
  box-shadow:inset 0 0 0 1px var(--accent);
}

/* ==========================================================================
   OVERZICHT VAN DE KEUZE — boven het totaal
   Opgebouwd door pb-behandelingen-overzicht.js. Staat er niets aangevinkt of
   is JavaScript uit, dan bestaat dit blok niet en verandert er niets.
   ========================================================================== */

.pb-main .pb-keuze{
  margin:0 0 10px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:var(--img-radius-lg, 18px);
  background:var(--paper, #fffaf5);
}

.pb-main .pb-keuze-kop{
  margin:0 0 10px;
  color:var(--accent);
  font-family:Manrope, system-ui, sans-serif;
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.pb-main .pb-keuze-lijst{list-style:none;margin:0;padding:0;display:grid;gap:8px}

.pb-main .pb-keuze-regel{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:baseline;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
}

.pb-main .pb-keuze-regel:last-child{padding-bottom:0;border-bottom:0}

.pb-main .pb-keuze-naam{
  color:var(--brown);
  font-family:Manrope, system-ui, sans-serif;
  font-size:13.5px;
  font-weight:800;
  line-height:1.35;
}

.pb-main .pb-keuze-duur{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:11.5px;
  font-weight:600;
}

.pb-main .pb-keuze-prijs{
  color:var(--brown);
  font-family:Fraunces, Georgia, serif;
  font-size:16px;
  font-weight:700;
  white-space:nowrap;
}

/* Op mobiel hangt het overzicht boven de vaste totaalbalk; daar is de ruimte
   krap, dus alleen de namen en prijzen, ingeklapt tot een compacte lijst. */

@media (max-width:899px){
  .pb-main .pb-keuze{
    margin:14px 0 0;
    padding:14px 16px;
  }
  .pb-main .pb-keuze-duur{display:none}
}

/* ==========================================================================
   RONDING VAN DE VERZENDKNOP
   Bricks zet op deze pagina zélf een regel op de knop:
     .pb-booking .frm_submit .frm_button_submit { border-radius: var(--r-md) !important }
   Dat is 8px, terwijl het totaalblok erboven op 10px staat — precies het
   verschil dat opviel. Meer !important helpt daar niet tegen, want die regel
   heeft er al een; er is meer specificiteit nodig. Vandaar deze langere
   selector.
   ========================================================================== */

.pb-main .frm_forms .pb-booking .frm_submit .frm_button_submit,
.pb-main .frm_forms .pb-booking .frm_submit button[type="submit"],
.pb-main .frm_forms .pb-booking .frm_submit input[type="submit"]{
  border-radius:var(--btn-radius, 10px) !important;
}