/* ----------------------------------------------------------------------------

 ### PWA Bunga! UI

     This CSS file is an example file of styles to format the user 
     interface elements offered by the functions of PWA Bunga! 
     present on the pwabunga.js file.

     Documentation of pwabunga-ui.css
     --------------------------------
     https://pwabunga.com/documentation/pwa/css-ui.html

---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------

 ### PWA Bunga! UI variables

---------------------------------------------------------------------------- */

:root {
  --pwa-color-primary: #735DA5;
  --pwa-color-primary-opacity: rgba(93, 0, 216, 0.9);
  --pwa-color-secondary: #D3C5E5;
  --pwa-color-secondary-opacity: rgba(223, 205, 247, 0.9);
  --pwa-color-light: #FFFFFF;
  --code-bg: #161b22;
  --code-text: #2b1d3a;
  --pwa-color-dark: #000;
  --pwa-color-gray: #ccc;
  --pwa-box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  --z-index-1: 1;
  --z-index-2: 2;
}

/* ----------------------------------------------------------------------------

 ### PWA Bunga! UI Components

---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
 ## PWA UI Button
---------------------------------------------------------------------------- */
body {
  background: var(--pwa-color-secondary);
}

pre, code {
  background: var(--pwa-color-secondary);
  color: var(--code-text);
  padding: 10px 14px;
  border-radius: 8px;
  font-family: monospace;
}
pre {
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  overflow-x: auto;

}
.pwa-btn {
  background: var(--pwa-color-light);
  border: none;
  border-radius: 20px;
  color: var(--pwa-color-primary);
  display: inline-block;
  padding: 8px 20px;
  text-decoration: none;
  font-weight: bold;
}

.pwa-btn:active, 
.pwa-btn:hover {
  background: var(--pwa-color-secondary);
  color: var(--pwa-color-primary);
}

/* 
 # PWA UI Button primary
------------------------ */

.pwa-btn.pwa-btn-primary {
  background: var(--pwa-color-primary);
  color: var(--pwa-color-light);
}

.pwa-btn.pwa-btn-primary:active, 
.pwa-btn.pwa-btn-primary:hover {
  background: var(--pwa-color-secondary);
  color: var(--pwa-color-primary);
}

/* 
 # PWA UI Button secondary
-------------------------- */

.pwa-btn.pwa-btn-secondary {
  background: var(--pwa-color-secondary);
  color: var(--pwa-color-primary);
}

.pwa-btn.pwa-btn-secondary:active, 
.pwa-btn.pwa-btn-secondary:hover {
  background: var(--pwa-color-primary);
  color: var(--pwa-color-light);
}

/* 
 # PWA UI Button dark
--------------------- */

.pwa-btn.pwa-btn-dark {
  background: var(--pwa-color-dark);
  color: var(--pwa-color-light);
}

.pwa-btn.pwa-btn-dark:active, 
.pwa-btn.pwa-btn-dark:hover {
  background: var(--pwa-color-primary);
  color: var(--pwa-color-light);
}

/* ----------------------------------------------------------------------------
 ## PWA UI Banner
---------------------------------------------------------------------------- */

.pwa-banner {
  align-items: center;
  background: var(--pwa-color-primary);
  color: var(--pwa-color-light);
  display: flex;
  justify-content: space-between;
  left: 0;
  opacity: 0;
  padding: 10px;
  position: fixed;
  right: 0;
  top: 0;
  transform: translate(0, -100%);
  transition: all 0.2s ease-in-out;
  width: 100%;
  z-index: var(--z-index-2);
}

/* 
 # PWA UI Banner secondary theme
-------------------------------- */

.pwa-banner.pwa-banner-secondary {
  background: var(--pwa-color-secondary);
  color: var(--pwa-color-dark);
}

/* 
 # PWA UI Banner close button
----------------------------- */

.pwa-banner-close-btn {
  cursor: pointer;
  min-width: 32px;
}

/* 
 # PWA UI Banner content
------------------------ */

.pwa-banner-content {
  flex-grow: 1;
  padding: 0 10px;
}

/* 
 # PWA UI Banner title
---------------------- */

.pwa-banner-title {
  display: block;
  font-weight: bold;
}

/* 
 # PWA UI Banner is-visible state
--------------------------------- */

.pwa-banner.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ----------------------------------------------------------------------------
 ## PWA UI Banner to Snackbar (desktop)
---------------------------------------------------------------------------- */

@media only screen and (min-width : 1024px) {

  .pwa-banner.to-pwa-snackbar {
    border-radius: 10px;
    bottom: 20px;
    height: 100px;
    left: 20px;
    max-width: 400px;
    padding: 0 20px;
    right: auto;
    top: auto;
    transform: translate(calc(-100% - 20px), 0);
  }

  /* 
   # PWA UI Snackbar top left
  --------------------------- */

  .pwa-banner.to-pwa-snackbar.top-left {
    bottom: auto;
    left: 20px;
    right: auto;
    top: 20px;
  }

  /* 
   # PWA UI Snackbar top right
  ---------------------------- */

  .pwa-banner.to-pwa-snackbar.top-right {
    bottom: auto;
    left: auto;
    right: 20px;
    top: 20px;
    transform: translate(0, calc(-100% - 20px));
  }

  /* 
   # PWA UI Snackbar bottom left
  ------------------------------ */

  .pwa-banner.to-pwa-snackbar.bottom-left {
    bottom: 20px;
    left: 20px;
    right: auto;
    top: auto;
  }

  /* 
   # PWA UI Snackbar bottom right
  ------------------------------- */

  .pwa-banner.to-pwa-snackbar.bottom-right {
    bottom: 20px;
    left: auto;
    right: 20px;
    top: auto;
    transform: translate(0, calc(100% + 20px));
  }

}

/* 
 # PWA UI Banner to Snackbar is-visible state
--------------------------------------------- */

.pwa-banner.to-pwa-snackbar.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ----------------------------------------------------------------------------
 ## PWA UI Modal
---------------------------------------------------------------------------- */

.pwa-modal {
  align-items: center;
  background: var(--pwa-color-light);
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  left: 0;
  overflow-y: auto;
  position: fixed;
  right: 0;
  text-align: left;
  top: 0;
  transform: translateY(-100%);
  transition: transform 0.25s ease-in-out;
  width: 100%;
  z-index: var(--z-index-2);
}

@media only screen and (min-width : 1024px) {
  .pwa-modal {
    background: var(--pwa-color-primary-opacity);
  }
}

/* 
 # PWA UI Modal inner
--------------------- */

.pwa-modal-inner {
  padding: 0 20px;
}

@media only screen and (min-width : 1024px) {
  .pwa-modal-inner {
    padding: 20px;
    background: #fff;
    position: relative;
    border-radius: 20px;
  }
}

/* 
 # PWA UI Modal title
--------------------- */

.pwa-modal-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 25px;
  margin-top: 0;
}

/* 
 # PWA UI Modal close button
---------------------------- */

.pwa-modal-close {
  background: none;
  border: none;
  padding: 0;
  position: absolute;
  right: 10px;
  top: 10px;
}

/* 
 # PWA UI Modal close btn icon
------------------------------ */

.pwa-modal-close-icon {
  fill: var(--pwa-color-primary);
  width: 40px;
}

/* 
 # PWA UI Modal is-visible state
-------------------------------- */

.pwa-modal.is-visible {
  transform: translateY(0);
}

/* ----------------------------------------------------------------------------
 ## PWA UI Switch
---------------------------------------------------------------------------- */

.pwa-switch {
  background: none;
  border: none;
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}

/* 
 # PWA UI Switch slider
----------------------- */

.pwa-switch-slider {
  background-color: var(--pwa-color-gray);
  border-radius: 34px;
  bottom: 0;
  cursor: pointer;
  height: 34px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
  width: 60px;
}

.pwa-switch-slider::before {
  background-color: var(--pwa-color-light);
  border-radius: 50%;
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 26px;
}

/* 
 # PWA UI Switch slider is-active state
------------------------------------ */

.is-active .pwa-switch-slider {
  background-color: var(--pwa-color-primary);
}

.is-active .pwa-switch-slider::before {
  transform: translateX(26px);
}

/* ----------------------------------------------------------------------------
 ## PWA UI Alert
---------------------------------------------------------------------------- */

.pwa-alert {
  align-items: center;
  background-color: var(--pwa-color-secondary-opacity);
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  left: 0;
  overflow-y: auto;
  position: fixed;
  right: 0;
  text-align: left;
  top: 0;
  transform: translateY(-100%);
  transition: transform 0.25s ease-in-out;
  width: 100%;
  z-index: var(--z-index-2);
}

/* 
 # PWA UI Alert inner
--------------------- */

.pwa-alert-inner {
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--pwa-box-shadow);
  max-width: 320px;
  padding: 20px;
  text-align: center;
}

/* 
 # PWA UI Alert is-visible state
-------------------------------- */

.pwa-alert.is-visible {
  transform: translateY(0);
}

/* ----------------------------------------------------------------------------
 ## PWA UI Loader
---------------------------------------------------------------------------- */

.pwa-loader {
  align-items: center;
  background-color: var(--pwa-color-primary-opacity);
  display: none;
  justify-content: center;
  padding: 20px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: var(--z-index-2);
}

/* 
 # PWA UI Loader is-visible state
--------------------------------- */

.pwa-loader.is-visible {
  display: flex;
}

/* ----------------------------------------------------------------------------
 ## PWA UI Actions bar
---------------------------------------------------------------------------- */

.pwa-actions {
  background: var(--pwa-color-light);
  display: flex;
  padding: 10px 0 0 20px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: var(--z-index-1);
}

/* 
 # PWA UI Actions bar button
---------------------------- */

.pwa-actions-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  margin-right: 20px;
}

/* 
 # PWA UI Actions bar button icon
--------------------------------- */

.pwa-actions-icon {
  display: flex;
  fill: var(--pwa-color-primary);
  flex-direction: column;
  margin: 0 auto;
  width: 32px;
}

/* ----------------------------------------------------------------------------
 ## PWA UI Params Version (@for pwaParams() function)
---------------------------------------------------------------------------- */

.pwa-params-version {
  margin-bottom: 50px;
}

/* ----------------------------------------------------------------------------
 ## PWA UI Params Permissions (@for pwaParams() function)
---------------------------------------------------------------------------- */

.pwa-permission-item {
  align-items: center; 
  display: flex;
  margin-bottom: 20px;
}

.pwa-permission-item-label {
  display: block;
  margin-left: 10px;
}

/* ----------------------------------------------------------------------------

 ### PWA Bunga! UI functions core

---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
 ## PWA Install button (@for pwaInstall() function)
---------------------------------------------------------------------------- */

.pwa-install-btn {
  display: none;
}

.pwa-install-btn.is-visible {
  display: block;
}

/* ----------------------------------------------------------------------------
 ## PWA Share button (@for pwaShare() function)
---------------------------------------------------------------------------- */

.pwa-share-btn {
  display: none;
}

.pwa-share-btn.is-visible {
  display: block;
}

/* ----------------------------------------------------------------------------
 ## PWA UI Params (@for pwaParams() function)
---------------------------------------------------------------------------- */

.pwa-params-version,
.pwa-params-permission-notification,
.pwa-params-permission-geolocation,
.pwa-params-permission,
.pwa-params-btn {
  display: none;
}

.pwa-params-version.is-visible,
.pwa-params-permission.is-visible,
.pwa-params-btn.is-visible {
  display: block;
}

.pwa-params-permission-notification.is-visible,
.pwa-params-permission-geolocation.is-visible {
  display: flex;
}
.hidden-text { 
 /*
Source - https://stackoverflow.com/a/27769435
Posted by Josh Crozier, modified by community. See post 'Timeline' for change history
Retrieved 2026-04-29, License - CC BY-SA 3.0
*/
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

#installCmd {
  width: 100%;
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Roboto Mono", monospace;
  font-size: 13px;
  color: #f0f0f0;
  background: #011627;
  border: none;
  border-left: 4px solid #A569BD; /* hijau khas W3Schools */
  padding: 10px 12px; 
 /* padding: 10px 75px 10px 12px; /* kanan lebih lebar */
  border-radius: 6px;
  box-sizing: border-box;
  outline: none;
  cursor: default;
}

/* ✳️ Styling tombol copy */
#myFixCopy {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  margin-top: 6px;
  background: #A569BD;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}


/* 🌙 Mode Gelap */
@media (prefers-color-scheme: dark) {
  #installCmd {
    background: #161b22;
    color: #e6edf3;
    border-left: 4px solid #A569BD;
  }

  #myFixCopy {
    background: #A569BD;
  }

  #myFixCopy:hover {
    background: #6C3483;
  }
}

/* 📦 Tata letak mirip share-container tapi untuk table */
.table-container {
  display: flex;
  flex-wrap: wrap;         /* elemen bisa turun ke baris baru */
  gap: 10px;               /* jarak antar elemen */
  align-items: flex-start; /* biar sejajar rapi di atas */
  justify-content: flex-start; /* biar semua elemen mulai dari kiri */
  overflow-x: auto;        /* jika kepanjangan, bisa digeser horizontal */
  -webkit-overflow-scrolling: touch; /* smooth scroll di mobile */
  margin-top: 1em;
}

/* Jika kamu pakai <table> langsung di dalamnya */
.table-container table {
  border-collapse: collapse;
  min-width: 250px;
}

/* Sel dan isi tabel biar tetap bersih tapi rapi */
.table-container td,
.table-container th {
  padding: 8px 12px; /* 0 */
  text-align: left;
  border: none;
  font-family: monospace;
  background: #fff;
}

.table-container table {
  border-collapse: separate; /* penting biar border-radius berfungsi */
  border-spacing: 0;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden; /* biar radius nggak bocor */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.table-container td {
  border: none;
  padding: 0.5em;
}

.table-container td:first-child {
  border-right: 1px solid #ddd; /* garis pemisah antara input dan tombol */
}



/* 🌙 Mode Gelap */
@media (prefers-color-scheme: dark) {
  .table-container td,
  .table-container th {
    border-color: #30363d;
    background: #161b22;
    color: #e6edf3;
  }
}

.copy-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.copy-container button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: #A569BD;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: sans-serif;
  transition: background 0.2s;
  position: static;
}

.copy-container button:hover {
  background: #6C3483;
  transform: scale(1.05)
}

.copy-container button img {
  width: 18px;
  height: 18px;
  filter: invert(1) brightness(1.2);
  transition: filter 0.2s;
}

/* kalau latar tombolnya terang, balik ke ikon hitam */
@media (prefers-color-scheme: light) {
  .copy-container button {
    background: #f0f0f0;
    color: #111;
  }

  .copy-container button:hover {
    background: #ddd;
  }

  .copy-container button img {
    filter: none;
  }
}

.outline {
  position: relative;
  padding: 0.5em 1em;
  border: 1px solid #ccc;
}

.outline > button {
  position: absolute;
  right: 2em;
  top: 2em;
}


code {
  display: block;
  background: #0b0c0e;
  color: #f0f0f0;
  padding: 1em;
  border-radius: 5px;
  overflow-x: auto;
}


section {
  margin-bottom: 2rem;
}
button, input, textarea {
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  padding: 0.2em 0.5em;
}
img, .block {
  display: block;
  margin: 0.3em;
}
p {
    margin-left: 20px;
 }
.visually-hidden {
 position: absolute;
 color: #000000;
}