/* Safe & Secure "Book a locksmith online" page (/book-online/), 2026-11-02.
   One booking page: book now and pay later (shared popup) or prepay on the
   page via Square (Sam merged /book-service/ into it).

   Sits on top of ssl-home.css (the homepage tokens, navy frame, nav, steps,
   FAQ and final CTA). Everything here hangs off .hp.bkp in
   ssl_public/book_pay.html. Top of the page = H1 + one line + the form (Sam):
   on desktop the intro tile and the form sit side by side inside the navy
   frame, on phones they stack with the form straight under the line. */

.hp.bkp .bkp-hero{display:block}
.hp.bkp .bkp-panel{background:var(--white);color:var(--navy);padding:32px 36px 34px;display:block}
/* head: yellow-square flag + H1 on the left, the one line on the right */
.hp.bkp .bkp-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 40px;flex-wrap:wrap;margin-bottom:22px}
.hp.bkp .bkp-t{display:flex;flex-direction:column;gap:16px;min-width:0}
.hp.bkp .bkp-panel h1{max-width:none;font-size:clamp(32px,3.9vw,56px)}
.hp.bkp .bkp-top .lede{margin:0;max-width:38ch;font-size:17px}

/* fee summary */
.hp.bkp .bkp-fee{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--tile);border-radius:16px;padding:18px 20px;margin-bottom:6px}
.hp.bkp .bkp-fee .l b{display:block;font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--navy)}
.hp.bkp .bkp-fee .l span{display:block;font-size:14px;color:var(--text);margin-top:2px}
.hp.bkp .bkp-fee .v{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.hp.bkp .bkp-fee .v b{font-family:var(--disp);font-weight:800;font-size:36px;line-height:1;letter-spacing:-.03em;color:var(--navy)}
.hp.bkp .bkp-fee .was{font-size:15px;color:var(--muted);text-decoration:line-through}
.hp.bkp .bkp-fee .cur{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--muted)}
.hp.bkp .bkp-badge{align-self:center;background:var(--yellow);color:var(--navy);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}

/* section heads + fields */
.hp.bkp .bkp-h{display:flex;align-items:center;gap:12px;font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--navy);margin:28px 0 14px}
.hp.bkp .bkp-h span{flex:none;width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--yellow);display:grid;place-items:center;font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:0}
.hp.bkp .bkp-field{margin-bottom:14px}
.hp.bkp .bkp-field label{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin-bottom:7px}
.hp.bkp .bkp-field label em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted)}
.hp.bkp .bkp-field input,.hp.bkp .bkp-field select,.hp.bkp .bkp-field textarea{width:100%;border:1.5px solid var(--line2);border-radius:12px;padding:0 14px;font:400 16px var(--sans);background:var(--paper);color:var(--navy);outline:none;transition:border-color .15s}
.hp.bkp .bkp-field input,.hp.bkp .bkp-field select{height:50px}
.hp.bkp .bkp-field textarea{min-height:92px;padding:12px 14px;resize:vertical}
.hp.bkp .bkp-field input:hover,.hp.bkp .bkp-field select:hover,.hp.bkp .bkp-field textarea:hover{border-color:var(--navy3)}
.hp.bkp .bkp-field input:focus-visible,.hp.bkp .bkp-field select:focus-visible,.hp.bkp .bkp-field textarea:focus-visible{border-color:var(--navy);outline:3px solid var(--yellow);outline-offset:1px}
.hp.bkp .bkp-field input::placeholder,.hp.bkp .bkp-field textarea::placeholder{color:var(--muted)}
.hp.bkp .bkp-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hp.bkp .bkp-note{font-size:14px;color:var(--text);margin-top:10px}
.hp.bkp .bkp-note a,.hp.bkp .bkp-small a,.hp.bkp .faq-r a{color:var(--navy);font-weight:600}

/* date chips (built by the page script) */
.hp.bkp .bkp-dates{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.hp.bkp .bkp-date-chip{flex:0 0 auto;min-width:62px;padding:9px 6px;border:1.5px solid var(--line2);border-radius:14px;background:var(--white);color:var(--navy);cursor:pointer;text-align:center;line-height:1.15;scroll-snap-align:start;transition:background .15s,border-color .15s}
.hp.bkp .bkp-date-chip .dow,.hp.bkp .bkp-date-chip .dmon{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hp.bkp .bkp-date-chip .dnum{display:block;font-family:var(--disp);font-weight:800;font-size:21px;letter-spacing:-.02em;margin:2px 0}
.hp.bkp .bkp-date-chip:hover{border-color:var(--navy)}
.hp.bkp .bkp-date-chip:focus-visible,.hp.bkp .bkp-time:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.hp.bkp .bkp-date-chip.on{background:var(--navy);border-color:var(--navy);color:var(--white)}
.hp.bkp .bkp-date-chip.on .dow,.hp.bkp .bkp-date-chip.on .dmon{color:var(--cream)}

/* time pills */
/* service picker: main-service cards, then chips (mirrors the booking popup's .sbk-cat / .sbk-chip) */
.hp.bkp .bkp-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.hp.bkp .bkp-cat{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;padding:14px;border-radius:16px;background:var(--paper);border:1.5px solid var(--line2);color:var(--text);text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.hp.bkp .bkp-cat:hover{border-color:var(--navy3)}
.hp.bkp .bkp-cat-ico{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:11px;background:var(--white);color:var(--navy)}
.hp.bkp .bkp-cat-ico svg{width:20px;height:20px}
.hp.bkp .bkp-cat-tx{min-width:0;display:flex;flex-direction:column}
.hp.bkp .bkp-cat-t{font-family:var(--disp);font-size:16px;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--navy)}
.hp.bkp .bkp-cat-s{font-size:13px;line-height:1.35;color:var(--text)}
.hp.bkp .bkp-cat[aria-pressed="true"]{background:var(--white);border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.hp.bkp .bkp-cat[aria-pressed="true"] .bkp-cat-ico{background:var(--yellow)}
.hp.bkp .bkp-sub{margin-top:14px}
.hp.bkp .bkp-sub-h{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:8px}
.hp.bkp .bkp-sub-h em{font-style:normal;font-weight:400;color:var(--muted)}
.hp.bkp .bkp-chips{display:flex;flex-wrap:wrap;gap:6px}
.hp.bkp .bkp-chips[hidden]{display:none}
.hp.bkp .bkp-field .bkp-detail{margin-top:8px}
.hp.bkp .bkp-chip{padding:8px 14px;border-radius:999px;background:var(--white);border:1.5px solid var(--line2);font:500 14px/1.25 var(--sans);color:var(--navy);text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
.hp.bkp .bkp-chip:hover{border-color:var(--navy3)}
.hp.bkp .bkp-chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--white)}
.hp.bkp .bkp-cat:focus-visible,.hp.bkp .bkp-chip:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

.hp.bkp .bkp-times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hp.bkp .bkp-time{height:50px;padding:0 8px;border:1.5px solid var(--line2);border-radius:999px;background:var(--white);color:var(--navy);cursor:pointer;font:600 15px var(--sans);transition:background .15s,border-color .15s}
.hp.bkp .bkp-time:hover{border-color:var(--navy)}
.hp.bkp .bkp-time.on{background:var(--yellow);border-color:var(--yellow)}

/* payment */
.hp.bkp #bkp-card{min-height:90px;border:1.5px solid var(--line2);border-radius:12px;padding:3px;background:var(--paper)}
.hp.bkp .bkp-wallets{margin-bottom:6px}
.hp.bkp .apple-pay-button{display:block;width:100%;height:50px;-webkit-appearance:-apple-pay-button;-apple-pay-button-type:plain;-apple-pay-button-style:black;cursor:pointer;margin-bottom:8px;border-radius:999px}
.hp.bkp .bkp-google{width:100%;min-height:50px;margin-bottom:8px}
.hp.bkp .bkp-or{display:flex;align-items:center;gap:10px;margin:14px 0 6px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hp.bkp .bkp-or::before,.hp.bkp .bkp-or::after{content:"";flex:1;height:1px;background:var(--line)}
.hp.bkp .bkp-cardf{margin-bottom:0}
.hp.bkp .bkp-pay{width:100%;min-height:58px;margin-top:18px;padding:0 24px;background:var(--navy);color:var(--white);border:0;border-radius:999px;cursor:pointer;font:600 14px var(--sans);letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .15s,transform .08s}
.hp.bkp .bkp-pay:hover:not(:disabled){background:var(--navy2)}
.hp.bkp .bkp-pay:active:not(:disabled){transform:translateY(1px)}
.hp.bkp .bkp-pay:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.hp.bkp .bkp-pay:disabled{opacity:.55;cursor:not-allowed}
.hp.bkp .bkp-pay .spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,252,.35);border-top-color:currentColor;animation:bkpspin .7s linear infinite;display:none}
.hp.bkp .bkp-pay.is-loading .spin{display:inline-block}
@keyframes bkpspin{to{transform:rotate(360deg)}}
.hp.bkp .bkp-secure{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hp.bkp .bkp-err{display:none;margin-top:12px;padding:12px 14px;border:1.5px solid #C43D3D;border-radius:12px;background:#FFF6F5;font-size:14px;font-weight:600;color:#A83232;line-height:1.5}
.hp.bkp .bkp-err.show{display:block}
.hp.bkp .bkp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* confirmation + call-us fallback */
.hp.bkp .bkp-done{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:12px 0}
.hp.bkp .bkp-done h2{font-family:var(--disp);font-weight:800;font-size:clamp(26px,2.6vw,36px);line-height:1.05;letter-spacing:-.025em;text-transform:uppercase;color:var(--navy)}
.hp.bkp .bkp-done p{font-size:17px;max-width:46ch;color:var(--text)}
.hp.bkp .bkp-tick{width:56px;height:56px;border-radius:50%;background:var(--yellow);color:var(--navy);display:grid;place-items:center}
.hp.bkp .bkp-small{font-size:15px!important}
.hp.bkp .bkp-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.hp.bkp .pill.outline{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy);padding:17px 26px;font-size:15px}
.hp.bkp .pill.outline:hover{background:var(--tile)}

/* processing takeover (raised once a payment is authorised) */
.bkp-proc{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(21,18,58,.7);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.bkp-proc.show{display:flex}
.bkp-proc-card{background:var(--white);border-radius:20px;padding:34px 28px;text-align:center;max-width:360px;width:100%}
.bkp-proc-mark{position:relative;width:88px;height:88px;margin:0 auto 22px;display:flex;align-items:center;justify-content:center}
.bkp-proc-mark img{width:52px;height:52px;animation:bkpbreathe 1.6s ease-in-out infinite}
.bkp-proc-mark .ring{position:absolute;inset:0;border:3px solid var(--tile);border-top-color:var(--yellow);border-radius:50%;animation:bkpspin .9s linear infinite}
.bkp-proc-t{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--navy);margin-bottom:9px}
.bkp-proc-s{font-size:14px;color:var(--text);line-height:1.55}
@keyframes bkpbreathe{0%,100%{opacity:1}50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){
  .bkp-proc-mark img,.bkp-proc-mark .ring,.hp.bkp .bkp-pay .spin{animation:none}
}

@media (max-width:860px){
  .hp.bkp .bkp-top{margin-bottom:16px}
  .hp.bkp .bkp-t{gap:12px}
  .hp.bkp .bkp-panel{padding:22px 18px 24px}
  .hp.bkp .bkp-fee .v b{font-size:30px}
}
@media (max-width:480px){
  .hp.bkp .bkp-2{grid-template-columns:1fr;gap:0}
  .hp.bkp .bkp-times{grid-template-columns:1fr}
  .hp.bkp .bkp-cats{grid-template-columns:1fr 1fr}
}

/* the two booking options */
.hp.bkp .bkp-mode{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.hp.bkp .bkp-opt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:16px 18px;border:1.5px solid var(--line2);border-radius:16px;background:var(--white);color:var(--text);cursor:pointer;font-size:14px;line-height:1.4;transition:border-color .15s,background .15s}
.hp.bkp .bkp-opt b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:-.015em;color:var(--navy)}
.hp.bkp .bkp-opt b i{font-style:normal}
.hp.bkp .bkp-opt:hover{border-color:var(--navy)}
.hp.bkp .bkp-opt:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.hp.bkp .bkp-opt.on{border-color:var(--navy);background:var(--tile);box-shadow:inset 0 0 0 1px var(--navy)}
.hp.bkp .bkp-pane[hidden]{display:none}

/* pay later: main services + consultation */
.hp.bkp .bkp-svcs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hp.bkp .bkp-svc{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 18px 20px;border-radius:16px;background:var(--paper);border:1px solid var(--line);color:var(--text);text-decoration:none;font-size:14px;line-height:1.45;transition:border-color .15s,background .15s}
.hp.bkp .bkp-svc .ic{width:42px;height:42px;border-radius:12px;background:var(--navy);color:var(--yellow);display:grid;place-items:center;margin-bottom:8px}
.hp.bkp .bkp-svc b{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:-.02em;color:var(--navy)}
.hp.bkp .bkp-svc .go,.hp.bkp .bkp-consult .go{position:absolute;top:18px;right:18px;color:var(--navy)}
.hp.bkp .bkp-svc:hover{border-color:var(--navy);background:var(--white)}
.hp.bkp .bkp-svc:focus-visible,.hp.bkp .bkp-consult:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.hp.bkp .bkp-consult{position:relative;display:flex;align-items:center;gap:14px;margin-top:10px;padding:16px 52px 16px 16px;border-radius:16px;background:var(--navy);color:#C9C7D6;text-decoration:none;font-size:14px;line-height:1.45}
.hp.bkp .bkp-consult b{display:block;font-family:var(--disp);font-weight:700;font-size:17px;color:var(--white)}
.hp.bkp .bkp-consult .ic{flex:none;width:40px;height:40px;border-radius:50%;background:var(--yellow);color:var(--navy);display:grid;place-items:center}
.hp.bkp .bkp-consult .go{top:50%;transform:translateY(-50%);color:var(--yellow)}
.hp.bkp .bkp-consult:hover{background:var(--navy2)}
.hp.bkp a.bkp-cta{text-decoration:none;background:var(--yellow);color:var(--navy)}
.hp.bkp a.bkp-cta:hover{background:var(--yellow-deep)}

/* under the menu: three points */
.hp.bkp .bkp-points{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:36px max(32px,env(safe-area-inset-right,0px)) 8px max(32px,env(safe-area-inset-left,0px))}
.hp.bkp .bkp-points>div{display:flex;gap:14px;align-items:flex-start;color:var(--navy)}
.hp.bkp .bkp-points svg{flex:none;margin-top:2px}
.hp.bkp .bkp-points p{font-size:15px;color:var(--text)}
.hp.bkp .bkp-points b{display:block;font-family:var(--disp);font-weight:700;font-size:18px;color:var(--navy)}
.hp.bkp #numbers{padding-top:56px}

/* guide cards */
.hp.bkp .bkp-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hp.bkp .bkp-guide .g{background:var(--tile);border-radius:20px;padding:26px}
.hp.bkp .bkp-guide .g.wide{grid-column:1/-1;background:var(--cream)}
.hp.bkp .bkp-guide h3{font-family:var(--disp);font-weight:700;font-size:21px;line-height:1.2;letter-spacing:-.02em;color:var(--navy);margin:0 0 10px}
.hp.bkp .bkp-guide p{font-size:15px;max-width:60ch}
.hp.bkp .bkp-guide .g.dark{background:var(--navy);color:#C9C7D6}
.hp.bkp .bkp-guide .g.dark h3{color:var(--white)}
.hp.bkp .bkp-guide .g.dark a{color:var(--yellow);font-weight:600}
@media (max-width:1100px){
  .hp.bkp .bkp-guide{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .hp.bkp .bkp-points{grid-template-columns:1fr;gap:16px;padding:28px 20px 0}
  .hp.bkp .bkp-guide{grid-template-columns:1fr}
  .hp.bkp .bkp-guide .g{padding:20px}
  .hp.bkp .bkp-opt{padding:14px}
  .hp.bkp .bkp-opt b{font-size:16px}
}
@media (max-width:480px){
  .hp.bkp .bkp-svcs{grid-template-columns:1fr 1fr;gap:8px}
  .hp.bkp .bkp-svc{padding:14px}
  .hp.bkp .bkp-svc .ln{display:none}
  .hp.bkp .bkp-svc b{font-size:17px}
  .hp.bkp .bkp-svc .go{top:14px;right:14px}
}


/* ================================================================
   Inline booking flow (Sam, 2026-11-02). ssl-book.js moves #sslBk into
   #bkpInline and adds .is-inline: the popup's panel becomes a plain card in
   the page. No scrim, no fixed stage, no side panel, no close button; the
   form grows with its content and the page scrolls (not an inner box).
   ================================================================ */
.hp.bkp .bkp-inline{min-height:420px}
.hp.bkp .bkp-inline:has(.ssl-bk.is-inline){min-height:0}
.ssl-bk.is-inline{display:block}
.ssl-bk.is-inline .sbk-scrim,.ssl-bk.is-inline .sbk-side,.ssl-bk.is-inline .sbk-x,.ssl-bk.is-inline .sbk-mhead{display:none}
.ssl-bk.is-inline .sbk-stage{position:static;display:block;padding:0;pointer-events:auto}
.ssl-bk.is-inline .sbk-panel{display:block;width:100%;height:auto;max-height:none;overflow:visible;border-radius:20px;background:var(--hb-paper);box-shadow:inset 0 0 0 1px var(--hb-line)}
.ssl-bk.is-inline .sbk-main{display:block}
.ssl-bk.is-inline .sbk-head{padding:18px 24px;border-bottom:1px solid var(--hb-line);flex-wrap:nowrap}
.ssl-bk.is-inline .sbk-steps{flex:1 1 auto;order:0}
.ssl-bk.is-inline .sbk-steps li{flex:0 1 auto}
.ssl-bk.is-inline .sbk-form{display:block}
.ssl-bk.is-inline .sbk-body{overflow:visible;padding:28px 24px;display:block}
/* step 1: name and phone side by side on desktop, the rest below */
.ssl-bk.is-inline .sbk-page{max-width:none}
.ssl-bk.is-inline .sbk-page[data-page="1"]:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.ssl-bk.is-inline .sbk-page > *{min-width:0}
.ssl-bk.is-inline .sbk-page[data-page="1"] > .sbk-picked,.ssl-bk.is-inline .sbk-page[data-page="1"] > .sbk-check,.ssl-bk.is-inline .sbk-page[data-page="1"] > .sbk-svs{grid-column:1/-1}
.ssl-bk.is-inline .sbk-foot{position:sticky;bottom:0;z-index:5;border-radius:0 0 20px 20px;padding:14px 24px}
.ssl-bk.is-inline .sbk-ts{padding:0 24px 12px}
/* confirmation in place of the form */
.ssl-bk .sbk-sent{display:none}
.ssl-bk.is-inline .sbk-panel.is-done .sbk-head,.ssl-bk.is-inline .sbk-panel.is-done .sbk-form{display:none}
.ssl-bk.is-inline .sbk-sent:not([hidden]){display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:44px 28px;outline:none}
.ssl-bk .sbk-sent-tick{width:56px;height:56px;border-radius:50%;background:var(--hb-yellow);color:var(--hb-navy);display:grid;place-items:center}
.ssl-bk .sbk-sent-tick svg{width:28px;height:28px}
.ssl-bk .sbk-sent-h{font-family:var(--hb-disp);font-weight:800;font-size:clamp(26px,2.8vw,38px);line-height:1.05;letter-spacing:-.025em;text-transform:uppercase;color:var(--hb-navy)}
.ssl-bk .sbk-sent-p{font-size:17px;max-width:46ch;color:var(--hb-text)}
@media (max-width:999px){
  .ssl-bk.is-inline .sbk-panel{height:auto;border-radius:16px}
  .ssl-bk.is-inline .sbk-head{padding:14px 14px}
  .ssl-bk.is-inline .sbk-steps{gap:5px}
  .ssl-bk.is-inline .sbk-steps li{flex:1 1 auto}
  .ssl-bk.is-inline .sbk-body{padding:18px 14px}
  .ssl-bk.is-inline .sbk-page[data-page="1"]:not([hidden]){grid-template-columns:minmax(0,1fr)}
  .ssl-bk.is-inline .sbk-foot{padding:12px 14px calc(12px + env(safe-area-inset-bottom));border-radius:0 0 16px 16px}
  .ssl-bk.is-inline .sbk-ts{padding:0 14px 12px}
}