/* Free-trial sign-up (wooglsmodul-funnel-assets 0.16.1, feature 111): the approved preview B
   (design/gls-homepage/preview-trial-checkout/b/index.html) on FunnelKit's checkout step `trial_checkout`.
   Loaded after styles.css + checkout-design.css + checkout.css, only on that step (body.wgm-trial). The values are
   the preview's; the .tr-* parts are the step content (tools/build-trial-blocks.py), the rest maps the preview's form
   onto FunnelKit's markup. `#wfacp-e-form#wfacp-e-form` where FunnelKit's ID rules (`body #wfacp-e-form *{font-size:14px}`)
   would win otherwise. */

/* ---- layout: benefits left, the sign-up card right; the button sits above the fold ---- */
body.wgm-trial .ck.tr{padding:48px 0 72px}
body.wgm-trial .tr-grid{display:grid;grid-template-columns:minmax(0,1fr) 480px;grid-template-areas:"hero card" "more card";grid-template-rows:auto 1fr;column-gap:64px;row-gap:0;align-items:start}
body.wgm-trial .tr-hero{grid-area:hero;min-width:0}
body.wgm-trial .tr-card{grid-area:card;min-width:0}
body.wgm-trial .tr-more{grid-area:more;min-width:0}
body.wgm-trial .tr-more .tr-inc{margin-top:28px}
body.wgm-trial .tr-grid > .wp-block-group{margin:0}

body.wgm-trial .tr-kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
body.wgm-trial .tr-marks{display:inline-flex;gap:4px}
body.wgm-trial .tr-mark{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 6px;border-radius:4px;font-family:var(--font-display);font-weight:800;font-size:11px;letter-spacing:.02em;line-height:1}
body.wgm-trial .tr-mark-gls{background:var(--yellow);color:var(--navy)}
body.wgm-trial .tr-mark-dpd{background:var(--dpd-red);color:#fff}
body.wgm-trial .tr-hero h1{margin:14px 0 0;font-family:var(--font-display);font-weight:800;font-size:52px;line-height:1.04;letter-spacing:-.03em;color:var(--navy)}
body.wgm-trial .tr-sub{margin-top:18px;max-width:560px;font-size:19px;line-height:1.55;color:var(--muted)}
body.wgm-trial .tr-tf{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:560px}
body.wgm-trial .tr-tf li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;margin:0}
body.wgm-trial .tr-tf-n{font-family:var(--font-display);font-weight:800;font-size:32px;line-height:1.05;color:var(--navy);letter-spacing:-.02em;white-space:nowrap}
body.wgm-trial .tr-tf-l{font-family:var(--font-mono);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
body.wgm-trial .tr-inc{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;max-width:560px}
body.wgm-trial .tr-inc li{display:flex;align-items:center;gap:10px;margin:0;font-weight:500;color:var(--ink)}
body.wgm-trial .tr-inc svg{flex:none;display:block}
body.wgm-trial .tr-after{margin-top:32px;max-width:560px;border-left:3px solid var(--yellow);background:#fff;border-radius:0 10px 10px 0;padding:18px 20px}
body.wgm-trial .tr-after h2{margin:0;font-family:var(--font-body);font-weight:600;font-size:16px;line-height:1.4;color:var(--navy)}
body.wgm-trial .tr-after p{margin-top:6px;font-size:15px;line-height:1.6;color:var(--muted)}

/* ---- the sign-up card ---- */
body.wgm-trial .tr-card{position:sticky;top:56px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -24px rgba(11,31,92,.35);overflow:hidden}
body.wgm-trial.admin-bar .tr-card{top:88px}
body.wgm-trial .tr-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--navy);color:#fff;padding:18px 24px}
body.wgm-trial .tr-pkg{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:18px;line-height:1.25;letter-spacing:-.01em}
body.wgm-trial .tr-price{font-family:var(--font-display);font-weight:800;font-size:34px;line-height:1;color:var(--yellow);letter-spacing:-.02em;white-space:nowrap}
body.wgm-trial .tr-card .wfacp-checkout-form-block{margin:0!important;padding:24px!important;max-width:none!important;background:none!important}
body.wgm-trial .tr-card :where(#wfacp-e-form,#wfacp-sec-wrapper,.wfacp-form,.wfacp_main_form,#wfacp_checkout_form,.wfacp-left-panel,form.checkout){margin:0!important;padding:0!important;max-width:none!important;width:auto!important;background:none!important;border:0!important;box-shadow:none!important}
/* FunnelKit's mobile order summary and step bar have no place on a 0 € sign-up (the card top shows the package) */
body.wgm-trial .wfacp_collapsible_order_summary_wrap,body.wgm-trial #wfacp-e-form .wfacp_form_steps{display:none!important}

/* section title = the card's "Vaši podatki" (no number) */
body.wgm-trial #wfacp-e-form .wfacp-section{margin:0!important}
body.wgm-trial #wfacp-e-form .wfacp-comm-title{margin:0!important}
body.wgm-trial #wfacp-e-form#wfacp-e-form .wfacp_section_heading{display:block!important;font-family:var(--font-display)!important;font-weight:800!important;font-size:22px!important;line-height:1.25!important;letter-spacing:-.01em;color:var(--navy)!important}
body.wgm-trial #wfacp-e-form .wfacp_section_heading::before{content:none!important;display:none!important}
body.wgm-trial #wfacp-e-form .wfacp_payment .wfacp-comm-title{display:none!important}

/* fields: one column, 16 px between rows, label 6 px above, hint 6 px below */
body.wgm-trial #wfacp-e-form .wfacp-section:not(.wfacp_payment) .wfacp-comm-form-detail > .wfacp-row{grid-template-columns:1fr!important;gap:16px!important;margin-top:16px!important}
body.wgm-trial #wfacp-e-form .wfacp-row > #billing_first_name_field{grid-column:1/-1}
body.wgm-trial #wfacp-e-form .wfacp-row > .woocommerce-account-fields,body.wgm-trial #wfacp-e-form .wfacp-row > .clear{display:none!important}
body.wgm-trial #wfacp-e-form#wfacp-e-form label.wfacp-form-control-label{font-size:15px!important;font-weight:600!important;line-height:1.4!important;color:var(--ink)!important}
body.wgm-trial #wfacp-e-form#wfacp-e-form label.wfacp-form-control-label abbr.required{display:inline;margin:0;border:0;text-decoration:none;font-size:inherit!important;font-weight:600;color:var(--dpd-red)!important}
body.wgm-trial #wfacp-e-form#wfacp-e-form label.wfacp-form-control-label .optional{font-size:inherit!important;font-weight:400!important;color:var(--muted)!important}
body.wgm-trial #wfacp-e-form#wfacp-e-form input.wfacp-form-control{height:52px!important;min-height:52px!important;padding:0 16px!important;border:1px solid var(--line)!important;font-size:17px!important;line-height:50px!important;transition:border-color .15s,box-shadow .15s}
body.wgm-trial #wfacp-e-form#wfacp-e-form input.wfacp-form-control::placeholder{color:#8A90A3}
body.wgm-trial #wfacp-e-form#wfacp-e-form input.wfacp-form-control:focus{outline:0!important;border-color:var(--navy)!important;box-shadow:0 0 0 3px rgba(23,55,181,.18)!important}
body.wgm-trial #wfacp-e-form#wfacp-e-form .woocommerce-invalid input.wfacp-form-control{border-color:#B42318!important}
body.wgm-trial #wfacp-e-form#wfacp-e-form .ck-hint{display:block;margin:0;font-size:13.5px!important;line-height:1.5!important;color:var(--muted)}
body.wgm-trial #wfacp-e-form#wfacp-e-form .woocommerce-input-wrapper .description{display:none!important}

/* carrier-account line, button, small print (FunnelKit's place-order row; no payment methods on a 0 € order) */
body.wgm-trial #wfacp-e-form #payment .place-order{display:block!important}
body.wgm-trial #wfacp-e-form .woocommerce-checkout-review-order{margin:0!important;padding:0!important}
body.wgm-trial #wfacp-e-form#wfacp-e-form .tr-acct{display:flex;gap:8px;align-items:flex-start;text-align:left;margin:20px 0 0!important;padding:10px 12px;font-size:14px!important;line-height:1.5!important;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
body.wgm-trial #wfacp-e-form#wfacp-e-form .tr-acct *{font-size:inherit!important;line-height:inherit!important}
body.wgm-trial #wfacp-e-form .tr-acct svg{display:block;flex:none;margin-top:2px;color:var(--navy)}
body.wgm-trial #wfacp-e-form .wfacp-order-place-btn-wrap{margin:14px 0 0!important}
body.wgm-trial #wfacp-e-form#wfacp-e-form #place_order{gap:10px;min-height:58px!important;padding:0 24px!important;font-size:18px!important;transition:background-color .15s,transform .15s}
body.wgm-trial #wfacp-e-form#wfacp-e-form #place_order:hover{transform:translateY(-1px)}
/* the preview's arrow (FunnelKit's script rewrites the button's text, so it cannot be a child element) */
body.wgm-trial #wfacp-e-form#wfacp-e-form #place_order::after{content:"";display:block;flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h12M10 4l5 5-5 5'/%3E%3C/svg%3E") center/18px 18px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h12M10 4l5 5-5 5'/%3E%3C/svg%3E") center/18px 18px no-repeat}
body.wgm-trial form.checkout.processing #place_order::after{display:none}
body.wgm-trial #wfacp-e-form#wfacp-e-form .tr-fine{margin:14px 0 0!important;font-size:13.5px!important;line-height:1.55!important;color:var(--muted);text-align:center}
body.wgm-trial #wfacp-e-form .woocommerce-NoticeGroup,body.wgm-trial #wfacp-e-form .woocommerce-error{margin:0 0 16px!important}

/* ---- phone: one column (hero, card, more); a bottom bar brings the button back once it scrolls away ---- */
body.wgm-trial .tr-mbar{display:none}
@media (max-width:1060px){
  body.wgm-trial .tr-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "card" "more";grid-template-rows:auto;row-gap:28px}
  body.wgm-trial .tr-more .tr-inc{margin-top:0}
  body.wgm-trial .tr-card{position:static;max-width:640px}
}
@media (max-width:600px){
  body.wgm-trial .ck.tr{padding:24px 0 96px}
  body.wgm-trial .tr-card-top .tr-pkg .tr-marks{display:none}
  body.wgm-trial .tr-hero h1{font-size:34px}
  body.wgm-trial .tr-sub{font-size:17px;margin-top:12px}
  body.wgm-trial .tr-tf{margin-top:20px;gap:8px}
  body.wgm-trial .tr-tf li{padding:12px}
  body.wgm-trial .tr-tf-n{font-size:24px}
  body.wgm-trial .tr-tf-l{font-size:10.5px;letter-spacing:.06em}
  body.wgm-trial .tr-card-top{padding:16px 18px}
  body.wgm-trial .tr-pkg{font-size:16px}
  body.wgm-trial .tr-price{font-size:28px}
  body.wgm-trial .tr-card .wfacp-checkout-form-block{padding:18px!important}
  body.wgm-trial .tr-inc{grid-template-columns:1fr;margin-top:0}
  body.wgm-trial .tr-after{margin-top:20px}
  body.wgm-trial .tr-mbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:1000;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(247,245,239,.96);border-top:1px solid var(--line);transform:translateY(110%);visibility:hidden;transition:transform .2s ease,visibility .2s}
  body.wgm-trial .tr-mbar.on{transform:none;visibility:visible}
  body.wgm-trial .tr-mbar .tr-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:0 24px;border-radius:var(--r);background:var(--yellow);color:var(--navy);font:600 18px/1.2 var(--font-body);text-decoration:none}
  body.wgm-trial .tr-mbar .tr-cta:hover{background:var(--yellow-deep);color:var(--navy);text-decoration:none}
  body.wgm-trial .footer.fb.ck-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){body.wgm-trial .tr-mbar{transition:none}}
