/* Page 19 button options 01-18 (Liav, Session 125), sections 388 (on the orange brand) and 389 (on the light page). */
.c-bto { font-family: "Noto Sans Hebrew", sans-serif; letter-spacing: 0; }
.c-bto :where(h2, p, ul, li) { margin: 0; padding: 0; list-style: none; }
.c-bto .n { font-family: "Poppins", sans-serif; font-weight: 900; }
.c-bto > .c-bto__sec { padding: 64px 20px 72px; }
.c-bto--onbrand > .c-bto__sec { background: #c95000 !important; color: #fff; }
.c-bto--onlight > .c-bto__sec { background: #fef8f4 !important; color: #2a1608; }
.c-bto__h { text-align: center; font-size: clamp(26px, 6vw, 40px); font-weight: 900; line-height: 1.2; }
.c-bto--onbrand .c-bto__h, .c-bto--onbrand .c-bto__name, .c-bto--onbrand .c-bto__no { color: #fff; -webkit-text-fill-color: #fff; }
.c-bto--onlight .c-bto__h, .c-bto--onlight .c-bto__name, .c-bto--onlight .c-bto__no { color: #2a1608; -webkit-text-fill-color: #2a1608; }
.c-bto__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px 32px; max-width: 1200px; margin: 48px auto 0; }
@media (min-width: 760px) { .c-bto__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .c-bto__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.c-bto__item { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.c-bto__no { font-size: 22px; opacity: .85; }
.c-bto__name { font-size: 16px; font-weight: 500; line-height: 1.4; }

/* base of every option */
.c-bto__btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; min-height: 62px; padding: 8px 40px; border-radius: 999px; font-size: 19px; font-weight: 800; line-height: 1.25; text-decoration: none; white-space: nowrap; transition: translate .2s, box-shadow .2s; }
.c-bto__btn:hover { translate: 0 -2px; }
.c-bto__btn:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.c-bto__btn b { font-weight: 900; }
.c-bto__arr { position: absolute; left: 8px; top: 50%; width: 46px; height: 46px; transform: translateY(-50%); border-radius: 50%; background: var(--ab, #c95000); }
.c-bto__arr::after, .c-bto__chev, .c-bto__blk::after { content: ""; -webkit-mask: url(../assets/icons/ph-arrow-left-bold.svg) center / contain no-repeat; mask: url(../assets/icons/ph-arrow-left-bold.svg) center / contain no-repeat; }
.c-bto__arr::after { position: absolute; inset: 13px; background: var(--af, #fff); }
.c-bto__chev { flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask-image: url(../assets/icons/ph-caret-left-bold.svg); mask-image: url(../assets/icons/ph-caret-left-bold.svg); }
.c-bto__btn:has(.c-bto__arr) { padding: 8px 40px 8px 90px; }

/* the colour of each option is fixed with !important because the page brand-slot rule paints every span and b white */
.c-bto .c-bto__btn, .c-bto .c-bto__btn :is(span, b, small) { color: var(--fg) !important; -webkit-text-fill-color: var(--fg) !important; }

/* ---- on the orange brand ---- */
.c-bto--b1 { --fg: #a84400; background: #fff; box-shadow: 0 12px 28px rgba(60, 20, 0, .28); }
.c-bto--b2 { --fg: #a84400; background: #fff; }
.c-bto--b3 { --fg: #fff; background: #2a1608; box-shadow: 0 12px 28px rgba(40, 14, 0, .35); }
.c-bto--b4 { --fg: #fff; background: transparent; border: 2px solid #fff; }
.c-bto--b4:hover { background: rgba(255, 255, 255, .12); }
.c-bto--b5 { --fg: #a84400; background: #fff; border-radius: 16px; box-shadow: 0 16px 34px rgba(60, 20, 0, .3), 0 2px 6px rgba(60, 20, 0, .18); }
.c-bto--b6 { --fg: #a84400; background: #fff; font-weight: 400; box-shadow: 0 12px 28px rgba(60, 20, 0, .28); }
.c-bto--b7 { --fg: #a84400; background: #fff; box-shadow: 0 0 0 5px #c95000, 0 0 0 7px rgba(255, 255, 255, .85); }
.c-bto--b8 { --fg: #fff; background: #8f3800; border: 2px solid #fff; }
.c-bto--b9 { --fg: #a84400; background: #fff; box-shadow: 0 6px 0 #e6c3aa, 0 14px 22px rgba(60, 20, 0, .3); }
.c-bto--b9:active { translate: 0 4px; box-shadow: 0 2px 0 #e6c3aa, 0 6px 12px rgba(60, 20, 0, .3); }
.c-bto--b10 { --fg: #a84400; background: #fff; border-radius: 14px; padding: 0 0 0 0; overflow: hidden; gap: 0; box-shadow: 0 12px 28px rgba(60, 20, 0, .28); }
.c-bto--b10 > span { padding: 0 32px; }
.c-bto__blk { position: relative; align-self: stretch; width: 62px; background: #2a1608; }
.c-bto__blk::after { position: absolute; inset: 20px; background: #fff; }
.c-bto--b11 { --fg: #fff; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.c-bto--b12 { --fg: #a84400; background: #fff; border-radius: 20px; padding: 12px 40px; box-shadow: 0 12px 28px rgba(60, 20, 0, .28); }
.c-bto__two { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.c-bto__two small { font-size: 15px; font-weight: 500; }

/* ---- on the light page ---- */
.c-bto--l1 { --fg: #fff; --ab: #fff; --af: #b84800; background: #b84800; box-shadow: 0 12px 28px rgba(150, 60, 0, .3); }
.c-bto--l2 { --fg: #fff; background: #b84800; }
.c-bto--l3 { --fg: #fff; background: #b84800; box-shadow: 0 6px 0 #7a3000, 0 14px 22px rgba(120, 40, 0, .28); }
.c-bto--l3:active { translate: 0 4px; box-shadow: 0 2px 0 #7a3000, 0 6px 12px rgba(120, 40, 0, .28); }
.c-bto--l4 { --fg: #fff; background: #2a1608; }
.c-bto--l5 { --fg: #a84400; background: transparent; border: 2px solid #b84800; }
.c-bto--l5:hover { background: rgba(184, 72, 0, .08); }
.c-bto--l6 { --fg: #fff; background: #b84800; box-shadow: 0 0 0 5px #fef8f4, 0 0 0 7px #b84800; }

@media (max-width: 420px) { .c-bto__btn { font-size: 17px; padding-inline: 28px; } .c-bto__btn:has(.c-bto__arr) { padding: 8px 28px 8px 74px; } }

/* ===== the chosen look on page 19 (Liav, Session 125): option 01 on the orange brand sections, option 13 on the light sections and for the floating button ===== */
body.p19 .p19b { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; min-height: 62px !important; padding: 8px 40px 8px 90px !important; border: 0 !important; border-radius: 999px !important; background: #b84800 !important; box-shadow: 0 12px 28px rgba(150, 60, 0, .3) !important; text-decoration: none !important; cursor: pointer; transition: translate .2s; }
body.p19 .p19b:hover { translate: 0 -2px; }
body.p19 .p19b::before, body.p19 .p19b::after { content: none !important; }
body.p19 .p19b .p19b__l, body.p19 .p19b { color: #fff !important; -webkit-text-fill-color: #fff !important; font-family: "Noto Sans Hebrew", sans-serif !important; font-size: clamp(17px, 4.4vw, 19px) !important; font-weight: 800 !important; line-height: 1.25 !important; text-align: center; }
body.p19 .p19b__arr { position: absolute; left: 8px; top: 50%; width: 46px; height: 46px; transform: translateY(-50%); border-radius: 50%; background: #fff; }
body.p19 .p19b__arr::after { content: ""; position: absolute; inset: 13px; background: #b84800; -webkit-mask: url(../assets/icons/ph-arrow-left-bold.svg) center / contain no-repeat; mask: url(../assets/icons/ph-arrow-left-bold.svg) center / contain no-repeat; }
body.p19 .p19b:focus-visible { outline: 3px solid #2a1608 !important; outline-offset: 4px; }
/* option 01 inside an orange (brand slot) section */
body.p19 [data-zk-slot="brand"] .p19b { background: #fff !important; box-shadow: 0 12px 28px rgba(60, 20, 0, .28) !important; }
body.p19 [data-zk-slot="brand"] .p19b, body.p19 [data-zk-slot="brand"] .p19b .p19b__l { color: #a84400 !important; -webkit-text-fill-color: #a84400 !important; }
body.p19 [data-zk-slot="brand"] .p19b__arr { background: #c95000; }
body.p19 [data-zk-slot="brand"] .p19b__arr::after { background: #fff; }
body.p19 [data-zk-slot="brand"] .p19b:focus-visible { outline-color: #fff !important; }
@media (max-width: 420px) { body.p19 .p19b { padding: 8px 24px 8px 70px !important; } body.p19 .p19b__arr { width: 42px; height: 42px; left: 7px; } }
/* form 2 button had its own gradient with a stronger selector */
body.p19 main :is(a, button).p19b.p19b.p19b.p19b { background-image: none !important; }
body.p19 main > div[data-zk]:not([data-zk-slot="brand"]) :is(a, button).p19b.p19b { background-color: #b84800 !important; }
/* the floating button keeps its fixed place (zk-sticky.js), only the look of option 13 applies */
body.p19 .c-mlx .c-mlx__btn.p19b { position: fixed !important; }