/*!
 * for-shoppere-cta.css  (use together with for-shoppere-cta.js)
 *
 * Combines section-header.css and cta-sizes.css. Replaces both (and hero-cta.css).
 *
 * Part 1, header for the "For shoppere" section:
 *  - Desktop: the section name ("For shoppere") is shown below the ViaBill logo, in ViaBill purple.
 *  - Mobile/tablet (980px and narrower): the header becomes two rows.
 *      Row 1: logo with the section name below it on the left, menu icon on the right.
 *      Row 2: the two header CTAs side by side at equal width.
 *
 * Part 2, site-wide CTA sizes on mobile and tablet (980px and narrower). Desktop is unchanged.
 *   Medium  header and navigation CTAs ............ 40px high, tappable area 44px
 *   Large   hero and all in-page section CTAs ..... 52px high
 *  - Both sizes share the same pill corner radius and border width; each has its own fixed
 *    font size and side padding. Filled and outline CTAs of the same size have exactly the
 *    same outer height (border included). Labels never wrap.
 *  - Which buttons get a size (no per-page styling needed):
 *      Medium : header CTAs (DiviFlash Advanced Menu buttons, .df-menu-button)
 *      Large  : DiviFlash dual buttons (.df_button_left / .df_button_right)
 *               Divi buttons with the site CTA classes .viabill-btn-primary / .viabill-btn-secondary
 *               any other button given the class .vb-cta
 *  - Pairs: two CTAs in a dual-button module share the row 50/50, and stack at full width
 *    when both labels cannot fit side by side (for-shoppere-cta.js decides which).
 *    A single in-page CTA has one shared minimum width across the site.
 *  - Menu icon: ViaBill-purple lines and border on a white circle (>= 3:1 against any background, also when
 *    the header stays fixed while scrolling).
 *  - All sizes and colours are CSS variables in :root below.
 *
 * Usage, in <head>:
 *   <link rel="stylesheet" id="for-shoppere-cta-css" href="/dk/css/for-shoppere-cta.css">
 */

/* =====================================================================
   Part 1: header for the "For shoppere" section
   ===================================================================== */

/* Section name under the logo (desktop and mobile) */
header .vb-header-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  line-height: 1;
}
header .vb-header-brand .df-site-logo {
  display: block;
}
header .vb-header-tagline {
  display: block;
  margin-top: 4px;
  color: #5a00ff;
  font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
}

@media only screen and (max-width: 980px) {

  /* Row 1: logo + section name left, menu icon right */
  header .difl_advancedmenu_0_tb_header .vb-mobile-header .top-row .row-inner {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 16px;
  }
  header .difl_advancedmenu_0_tb_header .vb-mobile-header .top-row .df-am-col {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
  }
  header .difl_advancedmenu_0_tb_header .vb-mobile-header .vb-header-brand .df-site-logo {
    width: 120px;
    height: auto;
  }
  header .difl_advancedmenu_0_tb_header .vb-mobile-header .df-mobile-menu-wrap {
    display: block;
  }

  /* Row 2: the two header CTAs, equal width */
  header .difl_advancedmenu_0_tb_header .vb-mobile-cta-row .row-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
  }
  header .difl_advancedmenu_0_tb_header .vb-mobile-cta-row .df-menu-button {
    width: 100%;
    min-width: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    padding-left: .5rem;
    padding-right: .5rem;
    box-sizing: border-box;
  }
}


/* =====================================================================
   Part 2: site-wide CTA sizes (mobile and tablet)
   ===================================================================== */

:root {
  /* Shared by both sizes */
  --vb-cta-radius: 100px;
  --vb-cta-border: 3px;
  --vb-cta-font: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
  --vb-cta-weight: 600;

  /* Medium: header and navigation CTAs */
  --vb-cta-m-height: 40px;
  --vb-cta-m-tap: 44px;
  --vb-cta-m-font-size: 13px;
  --vb-cta-m-padding-x: 12px;

  /* Large: hero and in-page CTAs */
  --vb-cta-l-height: 52px;
  --vb-cta-l-font-size: 15px;
  --vb-cta-l-padding-x: 16px;
  --vb-cta-l-min-width: 220px;       /* shared minimum width of a single in-page CTA */

  /* Space between two CTAs in a pair */
  --vb-cta-gap: 12px;

  /* Menu icon */
  --vb-burger-size: 44px;
  --vb-burger-bg: #fff;
  --vb-burger-fg: #5a00ff;
}

@media only screen and (max-width: 980px) {

  /* ---------- Medium: header CTAs ---------- */
  body header .difl_advancedmenu_0_tb_header a.df-menu-button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    height: var(--vb-cta-m-height) !important;
    min-height: 0 !important;
    padding: 0 var(--vb-cta-m-padding-x) !important;
    border-width: var(--vb-cta-border) !important;
    border-style: solid !important;
    border-radius: var(--vb-cta-radius) !important;
    font-family: var(--vb-cta-font) !important;
    font-size: var(--vb-cta-m-font-size) !important;
    font-weight: var(--vb-cta-weight) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  /* Filled CTA: border in its own fill colour, so filled and outline are the same height */
  body header .difl_advancedmenu_0_tb_header a.df-menu-button.difl_advancedmenuitem_2_tb_header {
    border-color: #5a00ff !important;
  }
  /* 44px tappable area around the 40px pill */
  body header .difl_advancedmenu_0_tb_header a.df-menu-button::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc((var(--vb-cta-m-height) - var(--vb-cta-m-tap)) / 2);
    bottom: calc((var(--vb-cta-m-height) - var(--vb-cta-m-tap)) / 2);
  }

  /* ---------- Large: shared look of every in-page CTA ---------- */
  body #page-container #main-content .difl_dual_button .df_button_container .df_button_left,
  body #page-container #main-content .difl_dual_button .df_button_container .df_button_right,
  body #page-container #main-content .et_pb_section a.et_pb_button.viabill-btn-primary,
  body #page-container #main-content .et_pb_section a.et_pb_button.viabill-btn-secondary,
  body #page-container #main-content .et_pb_section a.vb-cta,
  body #page-container #main-content .et_pb_section a.et_pb_button.viabill-btn-primary:hover,
  body #page-container #main-content .et_pb_section a.et_pb_button.viabill-btn-secondary:hover,
  body #page-container #main-content .et_pb_section a.vb-cta:hover {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    height: var(--vb-cta-l-height) !important;
    min-height: 0 !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 var(--vb-cta-l-padding-x) !important;
    border-width: var(--vb-cta-border) !important;
    border-style: solid !important;
    border-radius: var(--vb-cta-radius) !important;
    font-family: var(--vb-cta-font) !important;
    font-size: var(--vb-cta-l-font-size) !important;
    font-weight: var(--vb-cta-weight) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  /* Filled Divi CTA: border in its own fill colour (same outer height as outline) */
  body #page-container #main-content .et_pb_section a.et_pb_button.viabill-btn-primary {
    border-color: #5a00ff !important;
  }
  /* Divi's hover arrow shifts the label; switch it off for sized CTAs */
  body #page-container #main-content .et_pb_section a.et_pb_button.viabill-btn-primary::after,
  body #page-container #main-content .et_pb_section a.et_pb_button.viabill-btn-secondary::after,
  body #page-container #main-content .et_pb_section a.et_pb_button.viabill-btn-primary::before,
  body #page-container #main-content .et_pb_section a.et_pb_button.viabill-btn-secondary::before {
    display: none !important;
  }

  /* ---------- Large: a single in-page CTA, one shared minimum width ---------- */
  body #page-container #main-content .et_pb_section a.et_pb_button.viabill-btn-primary,
  body #page-container #main-content .et_pb_section a.et_pb_button.viabill-btn-secondary,
  body #page-container #main-content .et_pb_section a.vb-cta {
    min-width: min(100%, var(--vb-cta-l-min-width)) !important;
  }

  /* ---------- Large: pairs (dual-button module), 50/50 or stacked ---------- */
  body #page-container #main-content .difl_dual_button .df_button_container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: var(--vb-cta-gap) !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Without the script: each as wide as its label, growing to share the row; wraps when it cannot fit */
  body #page-container #main-content .difl_dual_button .df_button_container > div {
    flex: 1 1 0 !important;
    min-width: max-content !important;
    max-width: 100% !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* With the script: exact 50/50 ... */
  body #page-container #main-content .difl_dual_button .df_button_container[data-vb-cta="row"] > div {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  /* ... or stacked at full width */
  body #page-container #main-content .difl_dual_button .df_button_container[data-vb-cta="stack"] > div {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  body #page-container #main-content .difl_dual_button .df_button_container .df_button_left,
  body #page-container #main-content .difl_dual_button .df_button_container .df_button_right {
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* ---------- Menu icon: purple lines on a white circle with a purple border ---------- */
  body header .difl_advancedmenu_0_tb_header .df-mobile-menu-button {
    color: var(--vb-burger-fg) !important;
    background: var(--vb-burger-bg) !important;
    border: 3px solid var(--vb-burger-fg) !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    width: var(--vb-burger-size) !important;
    height: var(--vb-burger-size) !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    line-height: 1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    cursor: pointer;
  }
  body header .difl_advancedmenu_0_tb_header .df-mobile-menu-button:focus-visible {
    outline: 3px solid var(--vb-burger-fg);
    outline-offset: 3px;
  }
}