/* =====================================================================
   Apotek Mutiara — custom overrides (loaded after theme.css, priority 1000)
   Phase 1: pharmacy palette + header/"Semua Kategori" dropdown + wide search
   ===================================================================== */

:root{
  --apotek-teal:#0d9488;
  --apotek-teal-dark:#0f766e;
  --apotek-teal-soft:#e6f3f2;
  --apotek-ink:#1f2937;
  --apotek-muted:#6b7280;
  --apotek-line:#e5e7eb;
}

/* ---------- Pharmacy palette (override brand cyan #24b9d7) ---------- */
a{color:var(--apotek-teal-dark);}
a:hover{color:var(--apotek-teal);}
.btn-primary{background-color:var(--apotek-teal);border-color:var(--apotek-teal);}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background-color:var(--apotek-teal-dark);border-color:var(--apotek-teal-dark);}
.btn-primary:focus{box-shadow:0 0 0 .2rem rgba(13,148,136,.25);}
.btn-link{color:var(--apotek-teal-dark);}
.text-primary,.price,.product-price,.discount-product{color:var(--apotek-teal-dark)!important;}

/* ---------- Top bar ---------- */
.header-nav{background:#fff;border-bottom:1px solid var(--apotek-line);}
.header-nav a{color:var(--apotek-muted);}
.header-nav .right-nav > *{margin-left:.75rem;}

/* ---------- Main header row ---------- */
.header-top{padding:.5rem 0;}
@media (min-width:992px){
  .header-top .container > .row{align-items:center;}
  .header-top-right{display:flex;align-items:center;gap:1rem;}
  .header-top-right > #_desktop_top_menu{flex:0 0 auto;}
  .header-top-right > #search_widget{flex:1 1 auto;}
}

/* ---------- "Semua Kategori" dropdown button ---------- */
.apotek-menu{position:relative;}
.apotek-cat-btn{
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--apotek-teal);color:#fff;border:0;
  padding:.7rem 1.15rem;border-radius:.4rem;font-size:.95rem;font-weight:600;
  cursor:pointer;white-space:nowrap;line-height:1;
}
.apotek-cat-btn:hover{background:var(--apotek-teal-dark);color:#fff;}
.apotek-cat-btn__bars{font-size:1.15rem;}
.apotek-cat-btn__caret{font-size:.8rem;opacity:.9;}

/* ---------- Mega-menu dropdown panel ---------- */

/* Mobile default (<768): the panel travels into the mobile drawer, so reset it —
   the classic vertical list + Bootstrap collapse drive the mobile UX. */
.apotek-dropdown{background:transparent;border:0;box-shadow:none;padding:0;}
.apotek-l2-zone{display:none;}                          /* L2 zone is desktop-only */
#mobile_top_menu_wrapper .apotek-cat-btn{display:none;} /* inert button hidden in drawer */

/* Desktop (>=768): the mega-menu — L1 grid on top, L2 submenu below it. */
@media (min-width:768px){
  .apotek-dropdown{
    display:none;                              /* hidden until toggled */
    position:absolute;top:calc(100% + 6px);left:0;z-index:1050;
    background:#fff;border:1px solid var(--apotek-line);border-radius:.4rem;
    box-shadow:0 12px 28px rgba(15,23,42,.14);
    min-width:600px;max-width:720px;margin:0;padding:0;
  }
  #_desktop_top_menu.apotek-open .apotek-dropdown{display:block;}

  /* ---- Level-1 grid ---- */
  .apotek-dropdown #top-menu{
    display:grid;grid-template-columns:1fr 1fr;margin:0;padding:.3rem 0;list-style:none;
  }
  .apotek-dropdown #top-menu > li{position:relative;}
  .apotek-dropdown #top-menu > li > a{
    display:flex;align-items:center;gap:.65rem;
    padding:.6rem 1rem;color:var(--apotek-ink);font-weight:500;white-space:nowrap;
    border-bottom:1px solid var(--apotek-line);
    border-left:3px solid transparent;          /* active-indicator track */
    transition:background .12s ease,color .12s ease;
  }
  .apotek-dropdown #top-menu > li:nth-child(odd) > a{border-right:1px solid var(--apotek-line);}
  .apotek-dropdown #top-menu > li:last-child > a,
  .apotek-dropdown #top-menu > li:nth-last-child(2):nth-child(odd) > a{border-bottom:0;}
  .apotek-dropdown #top-menu > li > a:hover,
  .apotek-dropdown #top-menu > li.is-active > a{
    background:var(--apotek-teal-soft);color:var(--apotek-teal-dark);
  }
  /* Non-color active indicator: bold + left teal bar (not color alone) */
  .apotek-dropdown #top-menu > li.is-active > a{
    font-weight:700;border-left-color:var(--apotek-teal);
  }

  /* Kill classic desktop hover popovers; the L2 zone replaces them. */
  .apotek-dropdown .sub-menu{display:none !important;visibility:hidden !important;opacity:0 !important;}
  .apotek-dropdown .navbar-toggler{display:none;}

  /* ---- Level-2 zone (below the grid) ---- */
  .apotek-l2-zone{
    display:none;border-top:1px solid var(--apotek-line);
    padding:.8rem 1.1rem .95rem;background:#fff;
  }
  .apotek-l2-zone.has-active{display:block;}
  .apotek-l2-panel{display:none;}
  .apotek-l2-panel.is-active{display:block;animation:apotekL2In .12s ease;}
  @keyframes apotekL2In{from{opacity:0;transform:translateY(2px);}to{opacity:1;transform:none;}}

  .apotek-l2-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.5rem;}
  .apotek-l2-title{font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--apotek-teal-dark);}
  .apotek-l2-all{font-size:.8rem;font-weight:600;color:var(--apotek-teal-dark);white-space:nowrap;}
  .apotek-l2-all:hover{color:var(--apotek-teal);}
  .apotek-l2-arrow{font-size:.95rem;}
  .apotek-l2-list{display:flex;flex-wrap:wrap;gap:.2rem .35rem;margin:0;padding:0;list-style:none;}
  .apotek-l2-list > li > a{
    display:inline-block;padding:.3rem .55rem;border-radius:.3rem;
    font-size:.85rem;color:var(--apotek-ink);
    transition:background .12s ease,color .12s ease;
  }
  .apotek-l2-list > li > a:hover{background:var(--apotek-teal-soft);color:var(--apotek-teal-dark);}

  /* Visible keyboard focus */
  .apotek-dropdown a:focus-visible,
  .apotek-cat-btn:focus-visible{outline:2px solid var(--apotek-teal);outline-offset:-2px;}
}
.apotek-ic{font-size:1.1rem;line-height:1;}

/* ---------- Logo (SVG) ---------- */
.header-top .logo{height:46px;width:auto;max-width:100%;}
.header-top #_desktop_logo a{display:inline-flex;align-items:center;}

/* ---------- Wide search bar with teal submit button (bulletproof) ----------
   Input + button use IDENTICAL explicit heights so they can't drift; the
   jQuery-UI autocomplete live-region span is forced out of the flex flow. */
#search_widget .ui-helper-hidden-accessible{
  position:absolute !important;width:1px !important;height:1px !important;
  margin:-1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;
}
#search_widget.apotek-search{max-width:100%;}
#search_widget.apotek-search form{
  display:flex !important;align-items:center;
  height:44px;
  border:1.5px solid var(--apotek-line);border-radius:.4rem;overflow:hidden;background:#fff;
}
#search_widget.apotek-search form:focus-within{
  border-color:var(--apotek-teal);box-shadow:0 0 0 .2rem rgba(13,148,136,.15);
}
#search_widget .apotek-search__input{
  flex:1 1 auto;box-sizing:border-box;
  height:44px;min-height:44px;max-height:44px;
  border:0;margin:0;min-width:0;
  padding:0 .85rem;font-size:.95rem;line-height:44px;color:var(--apotek-ink);
  background:#fff;-webkit-appearance:none;appearance:none;vertical-align:top;
}
#search_widget .apotek-search__input:focus{outline:none;background:#fff;}
#search_widget .apotek-search__btn{
  display:flex;
  align-items:center;
  justify-content:center;

  position:static !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  transform:none !important;

  flex:0 0 52px;

  width:52px;
  height:44px;

  margin:0;
  padding:0;

  border:none;

  background:var(--apotek-teal);
  color:#fff;

  cursor:pointer;

  box-sizing:border-box;

  -webkit-appearance:none;
  appearance:none;
}
#search_widget .apotek-search__btn:hover{background:var(--apotek-teal-dark);}
#search_widget .apotek-search__btn .material-icons{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  height:100%;

  margin:0;
  padding:0;

  font-size:22px;
  line-height:1;

  color:#fff;
}

.header-top-right #search_widget{margin-top:0;}

.header-top .search-widget form button[type="submit"]{
  position:static !important;
  top:auto !important;
  bottom:auto !important;
  left:auto !important;
  right:auto !important;

  transform:none !important;
}
/* ---------- Mobile: keep native Classic mobile menu untouched ---------- */

/* =====================================================================
   Phase 2 — cohesive pharmacy palette + typography
   (appended; does not touch the search bar rules above)
   ===================================================================== */

/* ---- Base text + font smoothing ---- */
body{
  color:var(--apotek-ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---- Headings: bolder, tighter, ink ---- */
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
  color:var(--apotek-ink);
  font-weight:700;
  letter-spacing:-.012em;
}

/* ---- Section / block titles -> teal-dark ---- */
.products-section-title,
.block .title,
.block-category .h1,
.h1.category-name,
#search_filters .facet .title,
.cms-page h1, .cms-page h2{
  color:var(--apotek-teal-dark);
}

/* ---- Button family (btn-primary is set in Phase 1) ---- */
.btn-secondary{background:var(--apotek-teal-dark);border-color:var(--apotek-teal-dark);color:#fff;}
.btn-secondary:hover,.btn-secondary:focus{background:var(--apotek-teal);border-color:var(--apotek-teal);color:#fff;}
.btn-tertiary{color:var(--apotek-teal-dark);border-color:var(--apotek-teal-dark);background:transparent;}
.btn-tertiary:hover,.btn-tertiary:focus{background:var(--apotek-teal-soft);color:var(--apotek-teal-dark);}
.btn-outline-primary{color:var(--apotek-teal-dark);border-color:var(--apotek-teal-dark);background:transparent;}
.btn-outline-primary:hover{background:var(--apotek-teal);border-color:var(--apotek-teal);color:#fff;}

/* ---- Form focus -> teal (scoped to .form-control so the search bar is untouched) ---- */
.form-control:focus{
  border-color:var(--apotek-teal);
  box-shadow:0 0 0 .2rem rgba(13,148,136,.18);
  outline:0;
}

/* ---- "New" product flag -> teal (leave sale red for urgency) ---- */
.product-flag.new{background:var(--apotek-teal-dark);}

/* ---- Breadcrumb & pagination ---- */
.breadcrumb a{color:var(--apotek-muted);}
.breadcrumb a:hover{color:var(--apotek-teal);}
.pagination a:hover{color:var(--apotek-teal);}
.pagination .current a,
.pagination li.current a{
  background:var(--apotek-teal);border-color:var(--apotek-teal);color:#fff;
}

/* ---- Footer accent ---- */
#footer .links .title,
#footer h4,
#footer .block .title,
#footer .category-sub-title,
.block-newsletter .h3{
  color:var(--apotek-teal-dark);
}
#footer a:hover{color:var(--apotek-teal);}

/* ---- Light global polish ---- */
#content-wrapper{padding-top:1.25rem;}
body#checkout .container{min-height:auto;}
.block{margin-bottom:1.75rem;}
hr{border-top:1px solid var(--apotek-line);}
::selection{background:var(--apotek-teal);color:#fff;}

/* =====================================================================
   Phase 3 — trust badges (inline in the header, beside the search bar)
   ===================================================================== */
.apotek-trust{display:flex;align-items:center;gap:1.1rem;flex:0 0 auto;margin-left:.25rem;}
.apotek-trust__item{display:flex;align-items:center;gap:.4rem;}
.apotek-trust__item img{width:22px;height:22px;flex:0 0 auto;}
.apotek-trust__item span{font-size:.78rem;font-weight:600;color:var(--apotek-muted);white-space:nowrap;line-height:1.1;}
.apotek-trust__item:hover span{color:var(--apotek-teal-dark);}
/* On narrower laptops, keep icons but drop the labels so the header stays tidy */
@media (min-width:992px) and (max-width:1199px){
  .apotek-trust__item span{display:none;}
  .apotek-trust__item img{width:24px;height:24px;}
  .apotek-trust{gap:.85rem;}
}
@media (min-width:1200px){
  .header-top-right{gap:1.25rem;}
}

/* =====================================================================
   Phase 4 — product/category card polish
   ===================================================================== */

/* ---- Card ---- */
.product-miniature{
  background:#fff;
  border:1px solid var(--apotek-line);
  border-radius:.55rem;
  height:100%;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-miniature:hover{
  transform:translateY(-4px);
  border-color:var(--apotek-teal);
  box-shadow:0 12px 26px rgba(15,23,42,.13);
}

/* ---- Image ---- */
.product-miniature .thumbnail-container .thumbnail{
  display:block;text-align:center;padding:1.1rem 1.1rem .5rem;
}
.product-miniature .thumbnail-container .thumbnail img{transition:transform .25s ease;}
.product-miniature:hover .thumbnail-container .thumbnail img{transform:scale(1.05);}

/* ---- Description / title / price ---- */
.product-miniature .product-description{padding:.25rem 1.1rem 1rem;}
.product-miniature .product-title{font-size:.95rem;font-weight:600;margin:0 0 .35rem;}
.product-miniature .product-title a{color:var(--apotek-ink);}
.product-miniature .product-title a:hover{color:var(--apotek-teal-dark);text-decoration:none;}
.product-miniature .product-price-and-shipping{margin-top:.3rem;}
.product-miniature .product-price-and-shipping .price{font-weight:700;font-size:1.08rem;}
.product-miniature .regular-price{color:var(--apotek-muted);font-size:.82rem;text-decoration:line-through;margin-left:.35rem;}

/* ---- Flags (rounded pills) ---- */
.product-miniature .product-flags .product-flag{
  border-radius:.3rem;padding:.18rem .5rem;font-size:.7rem;font-weight:600;letter-spacing:.02em;
}

/* ---- Card vertical spacing in the grid ---- */
.products > .product{margin-bottom:1.25rem;}

/* =====================================================================
   Category page — compact header.
   theme.css forces .block-category{min-height:13.75rem} (220px) on desktop,
   which leaves a large empty box under the title when a category has no
   description/cover image. Collapsing it lets products appear much higher.
   (The right-side "Subcategories" section is removed via category.tpl; the
   left sidebar ps_categorytree still owns subcategory navigation.)
   ===================================================================== */
.block-category{min-height:0;margin-bottom:0;}
.block-category h1{margin-bottom:.4rem;}

/* =====================================================================
   Mobile menu (hamburger drawer) — restyle to match the Apotek teal theme.
   Scoped to #mobile_top_menu_wrapper (mobile-only). Behaviour (Bootstrap
   collapse: tap a category to expand/collapse its sub-categories) is unchanged.
   ===================================================================== */
#mobile_top_menu_wrapper{ padding:0; background:#fff; }

/* Level-1 category links */
#mobile_top_menu_wrapper .top-menu a[data-depth="0"]{
  display:block; min-height:48px; padding:.85rem 1rem;
  color:var(--apotek-ink); font-weight:600;
  border-bottom:1px solid var(--apotek-line);
}
#mobile_top_menu_wrapper .top-menu a[data-depth="0"]:hover,
#mobile_top_menu_wrapper .top-menu a[data-depth="0"]:active{
  background:var(--apotek-teal-soft); color:var(--apotek-teal-dark); text-decoration:none;
}
/* current page's category -> teal text + soft bg + left bar (not colour alone) */
#mobile_top_menu_wrapper .top-menu li.current > a[data-depth="0"]{
  color:var(--apotek-teal-dark); background:var(--apotek-teal-soft);
  box-shadow:inset 3px 0 0 var(--apotek-teal);
}
#mobile_top_menu_wrapper .top-menu .apotek-ic{ font-size:1.15rem; }

/* Chevron: recolour the +/- material icons teal */
#mobile_top_menu_wrapper .top-menu .navbar-toggler{ padding:.25rem 0; }
#mobile_top_menu_wrapper .top-menu .navbar-toggler .material-icons{
  color:var(--apotek-teal-dark); font-size:1.25rem;
}

/* Expanded Level-2 list: soft tint groups the sub-categories */
#mobile_top_menu_wrapper .top-menu .sub-menu{
  background:var(--apotek-teal-soft); box-shadow:none;
}
#mobile_top_menu_wrapper .top-menu .sub-menu a[data-depth="1"]{
  display:block; min-height:44px;
  padding:.6rem 1rem .6rem 2.6rem;        /* indented under the parent */
  color:var(--apotek-ink); font-weight:500;
  border-bottom:1px solid rgba(13,148,136,.10);
}
#mobile_top_menu_wrapper .top-menu .sub-menu a[data-depth="1"]:hover,
#mobile_top_menu_wrapper .top-menu .sub-menu a[data-depth="1"]:active{
  color:var(--apotek-teal-dark); text-decoration:none;
}
/* deeper sub-levels (if any) indent further */
#mobile_top_menu_wrapper .top-menu .sub-menu a[data-depth="2"]{ padding-left:3.75rem; }
#mobile_top_menu_wrapper .top-menu .sub-menu a[data-depth="3"]{ padding-left:4.9rem; }

/* Drawer footer (contact / currency / language) */
#mobile_top_menu_wrapper .js-top-menu-bottom{ margin-top:.5rem; padding:.5rem 1rem; border-top:1px solid var(--apotek-line); }
#mobile_top_menu_wrapper .js-top-menu-bottom a{ color:var(--apotek-muted); }

/* =====================================================================
   Checkout payment step — grouped, compact, layout-stable options
   (2026-08-18). Headers are emitted by payment.tpl when the Duitku
   category changes; ordering comes from duitku.php.
   ===================================================================== */

/* Category headers: Credit Card / Virtual Account / QRIS / E-Wallet */
#checkout .payment-options .payment-group-header{
  margin:1rem 0 .125rem;
  padding-bottom:.25rem;
  border-bottom:1px solid var(--apotek-line);
  font-size:.8125rem;
  font-weight:600;
  color:var(--apotek-muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* Tighter rows: theme.css gives .payment-option margin-bottom:.5rem */
#checkout .payment-options .payment-option{
  margin-bottom:0;
  padding:.375rem 0;
}

/* Channel logos (2026-08-19): official Duitku art bundled in
   modules/duitku/views/img/{code}.png, rendered by payment.tpl's
   {$option.logo}. Sized to the row height, inline with the label. */
#checkout .payment-options .payment-option label img{
  height:24px;
  width:auto;
  max-width:86px;
  object-fit:contain;
  vertical-align:middle;
  margin-left:.625rem;
}

/* Layout stability: the per-option form / additional-info containers are
   hidden by JS at init (the ps-hidden class has no CSS rule in this
   theme), so a re-render or any script unhiding one made the section
   jump — the "white space on click" effect. Force them to occupy no
   space at all. They only contain hidden inputs and a display:none
   submit button; confirm() calls form.submit() programmatically, which
   works regardless of the container's box. */
#checkout .js-payment-option-form,
#checkout .js-additional-information{
  height:0 !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  overflow:hidden !important;
}

/* Homepage "Why shop" block (2026-08-31, ps_customtext on displayHome):
   the theme's #custom-text h2 carries no bottom margin (and the generic
   h2 rule fixes height at 35px), so the paragraph renders flush against
   the title. Give the heading breathing room. */
#custom-text h2{
  margin-bottom:1.25rem;
}