/* Bali VIP Journey — custom UI components (public/js/ui.js). Themed per area via the variables below:
   public site = square, editorial; admin (body.ui-admin) = rounded, layered. */
:root{
  --ui-ink:#1C2624; --ui-muted:#6B6458; --ui-line:#C8B994; --ui-bg:#FBF9F5; --ui-pop:#FFFEFB;
  --ui-accent:#0E2F36; --ui-accent-ink:#F6F1E7; --ui-gold:#C8A96A; --ui-hi:#F3EEE6; --ui-bad:#8A3B2E;
  --ui-radius:0px; --ui-pop-radius:0px; --ui-shadow:0 18px 40px -18px rgba(10,22,24,.45);
}
body.ui-admin{
  --ui-ink:#16201E; --ui-muted:#7A7264; --ui-line:#E8E0D2; --ui-bg:#FFFDF9; --ui-pop:#FFFEFB;
  --ui-accent:#0E2F36; --ui-hi:#F5EDDC; --ui-bad:#9A3F31;
  --ui-radius:12px; --ui-pop-radius:14px; --ui-shadow:0 2px 6px rgba(14,47,54,.06),0 28px 60px -24px rgba(14,47,54,.32);
}

/* The original element stays in the form but is not shown */
.ui-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;border:0!important;padding:0!important;margin:0!important}

/* Select + date share the trigger look; inline styles from the original element are copied onto it */
.ui-select,.ui-date{position:relative;display:block;min-width:0}
.ui-select-btn,.ui-date-btn{display:flex!important;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit;line-height:1.35}
.ui-select-btn:disabled,.ui-date-btn:disabled{cursor:not-allowed;opacity:.6}
.ui-select-val,.ui-date-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.is-placeholder .ui-select-val,.is-placeholder .ui-date-val{color:var(--ui-muted)}
.ui-caret{display:grid;place-items:center;flex:none;color:var(--ui-muted);transition:transform .2s}
.open > .ui-select-btn .ui-caret,.open > .ui-date-btn .ui-caret{transform:rotate(180deg);color:var(--ui-ink)}
.ui-select-btn:focus-visible,.ui-date-btn:focus-visible{outline:2px solid var(--ui-gold);outline-offset:2px}

.ui-pop{position:fixed;left:0;top:0;z-index:350;font-family:Jost,system-ui,sans-serif;background:var(--ui-pop);border:1px solid var(--ui-line);border-radius:var(--ui-pop-radius);box-shadow:var(--ui-shadow);color:var(--ui-ink);animation:ui-in .16s ease}
.ui-pop[hidden]{display:none}
@keyframes ui-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ui-select-pop{max-width:min(92vw,420px);padding:6px}
.ui-select-search{width:100%;margin:0 0 6px;padding:9px 12px;border:1px solid var(--ui-line);border-radius:calc(var(--ui-radius) * .7);background:var(--ui-bg);font:inherit;font-size:14px;color:var(--ui-ink);outline:none}
.ui-select-search:focus{border-color:var(--ui-gold)}
.ui-select-search[hidden]{display:none}
.ui-select-list{list-style:none;margin:0;padding:0;max-height:min(300px,50vh);overflow:auto}
.ui-select-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:calc(var(--ui-radius) * .6);font-size:14.5px;letter-spacing:normal;text-transform:none;cursor:pointer;color:var(--ui-ink);white-space:nowrap}
.ui-select-list li.hi{background:var(--ui-hi)}
.ui-select-list li[aria-selected="true"]{font-weight:500}
.ui-select-list li[aria-selected="true"]::after{content:"";width:6px;height:6px;transform:rotate(45deg);background:var(--ui-gold);flex:none}
.ui-select-list li[aria-disabled="true"]{opacity:.45;cursor:default}
.ui-select-list .ui-empty{color:var(--ui-muted);cursor:default}

/* Calendar */
.ui-cal{width:300px;padding:14px;font-family:Jost,system-ui,sans-serif}
.ui-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ui-cal-head b{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:20px}
.ui-cal-head button{width:34px;height:34px;border:1px solid var(--ui-line);background:none;border-radius:calc(var(--ui-radius) * .7 + 4px);font-size:18px;line-height:1;cursor:pointer;color:var(--ui-ink)}
.ui-cal-head button:hover{border-color:var(--ui-ink)}
.ui-cal-days,.ui-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.ui-cal-days span{font-size:10.5px;letter-spacing:.14em;color:var(--ui-muted);padding:6px 0}
.ui-cal-grid button{aspect-ratio:1;border:0;background:none;border-radius:calc(var(--ui-radius) * .6 + 2px);font:inherit;font-size:14px;color:var(--ui-ink);cursor:pointer}
.ui-cal-grid button:hover,.ui-cal-grid button:focus-visible{background:var(--ui-hi);outline:none}
.ui-cal-grid button.today{box-shadow:inset 0 0 0 1px var(--ui-gold)}
.ui-cal-grid button.on{background:var(--ui-accent);color:var(--ui-accent-ink)}
.ui-cal-grid button:disabled{opacity:.3;cursor:not-allowed;background:none}
.ui-cal-foot{display:flex;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid var(--ui-line)}
.ui-cal-foot button{border:0;background:none;padding:4px 2px;font:inherit;font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ui-ink);cursor:pointer;border-bottom:1px solid var(--ui-gold)}

/* Number stepper */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.ui-num{display:flex;align-items:center;gap:6px;min-width:0}
.ui-num > input{flex:1;min-width:0;text-align:center}
.ui-num-btn{flex:none;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--ui-line);border-radius:calc(var(--ui-radius) * .7 + 2px);background:var(--ui-bg);color:var(--ui-ink);font-size:17px;line-height:1;cursor:pointer;transition:border-color .2s,background .2s}
.ui-num-btn:hover{border-color:var(--ui-ink);background:var(--ui-hi)}
body.ui-admin .ui-num-btn{width:38px;height:38px}

/* Checkbox / radio / range (no browser look) */
input[type=checkbox]:not(.ui-native):not([role=switch]),input[type=radio]:not(.ui-native){-webkit-appearance:none;appearance:none}
body.ui-admin .check input[type=checkbox],body.ui-admin .perm input[type=checkbox],body.ui-admin .tbl input[type=checkbox]{width:18px;height:18px;margin:0;flex:none;border:1px solid #CFC5B4;border-radius:5px;background:#FFFDF9;display:inline-grid;place-items:center;cursor:pointer;transition:all .2s;vertical-align:middle}
body.ui-admin .check input[type=checkbox]:checked,body.ui-admin .perm input[type=checkbox]:checked,body.ui-admin .tbl input[type=checkbox]:checked{background:linear-gradient(135deg,#1F5A66,#0E2F36);border-color:#0E2F36}
body.ui-admin .check input[type=checkbox]:checked::after,body.ui-admin .perm input[type=checkbox]:checked::after,body.ui-admin .tbl input[type=checkbox]:checked::after{content:"";width:5px;height:9px;border:solid var(--gold-2,#E3C98E);border-width:0 2px 2px 0;transform:translate(0,-1px) rotate(45deg)}
body.ui-admin .check input[type=checkbox]:focus-visible,body.ui-admin .perm input[type=checkbox]:focus-visible{outline:2px solid var(--ui-gold);outline-offset:2px}
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;background:var(--ui-line);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--ui-accent);box-shadow:0 0 0 3px #fff,0 0 0 4px var(--ui-gold);cursor:pointer}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--ui-accent);box-shadow:0 0 0 3px #fff,0 0 0 4px var(--ui-gold);cursor:pointer}

/* Tooltip */
.ui-tip{position:absolute;z-index:400;max-width:260px;padding:7px 11px;border-radius:calc(var(--ui-radius) * .6 + 2px);background:#0E2F36;color:#F6F1E7;font:500 12px/1.4 Jost,system-ui,sans-serif;letter-spacing:.02em;pointer-events:none;box-shadow:0 10px 24px -10px rgba(7,26,29,.6);animation:ui-in .14s ease}
.ui-tip::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;background:inherit;transform:translateX(-50%) rotate(45deg)}
.ui-tip.below::after{bottom:auto;top:-4px}
.ui-tip[hidden]{display:none}

/* Validation */
.ui-err{display:block;margin-top:6px;font-size:12.5px;letter-spacing:normal;text-transform:none;color:var(--ui-bad)}
.ui-invalid > input,.ui-invalid > button,input.ui-invalid,textarea.ui-invalid,input[aria-invalid="true"],textarea[aria-invalid="true"]{border-bottom-color:var(--ui-bad)!important}

/* Toast (public) */
.ui-toast{position:fixed;left:50%;bottom:28px;z-index:500;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:14px 20px;background:#0E2F36;color:#F6F1E7;font:500 13px/1.4 Jost,system-ui,sans-serif;letter-spacing:.06em;box-shadow:0 18px 40px -18px rgba(10,22,24,.6);transition:all .25s}
.ui-toast.show{opacity:1;transform:translate(-50%,0)}

/* Scrollbars */
*{scrollbar-width:thin;scrollbar-color:rgba(200,169,106,.55) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(200,169,106,.5);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:rgba(200,169,106,.8)}

/* Textareas grow with their content (ui.js) */
textarea{resize:none;overflow:hidden}

/* Phone input: country picker + number (components/phone-input) */
.ph{position:relative;min-width:0}
.ph-row{display:flex!important;align-items:center;gap:0;padding-top:0!important;padding-bottom:0!important}
.ph-cc{display:flex;align-items:center;gap:8px;flex:none;align-self:stretch;padding:10px 14px 10px 0;margin-right:14px;border:0;border-right:1px solid var(--ui-line);background:none;font:inherit;color:inherit;cursor:pointer}
.ph-cc .fi{width:22px;height:16.5px;flex:none;box-shadow:0 0 0 1px rgba(28,38,36,.12);background-size:cover}
.ph-cc svg{color:var(--ui-muted);transition:transform .2s}
.ph-cc:focus-visible{outline:2px solid var(--ui-gold);outline-offset:2px}
.ph-dial{font-variant-numeric:tabular-nums}
.ph-num{flex:1;min-width:0;border:0!important;background:transparent!important;padding:10px 0!important;font:inherit;color:inherit;outline:none;box-shadow:none!important}
.ph-pop{position:fixed;z-index:360;display:flex;flex-direction:column;overflow:hidden;font-family:Jost,system-ui,sans-serif;background:var(--ui-pop);border:1px solid var(--ui-line);border-radius:var(--ui-pop-radius);box-shadow:var(--ui-shadow);color:var(--ui-ink)}
.ph-search{display:flex;align-items:center;gap:10px;margin:8px;padding:0 12px;border:1px solid var(--ui-line);border-radius:calc(var(--ui-radius) * .7);background:var(--ui-bg);color:var(--ui-muted)}
.ph-search:focus-within{border-color:var(--ui-gold)}
.ph-search input{flex:1;min-width:0;border:0;background:none;padding:10px 0;font:inherit;font-size:14px;color:var(--ui-ink);outline:none}
.ph-list{list-style:none;margin:0;padding:0 6px 6px;overflow:auto;flex:0 1 auto;min-height:0}
.ph-list li{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:calc(var(--ui-radius) * .6);font-size:14.5px;cursor:pointer}
.ph-list li.hi{background:var(--ui-hi)}
.ph-list li[aria-selected="true"]{font-weight:500}
.ph-list li.sep{margin-bottom:6px;position:relative}
.ph-list li.sep::after{content:"";position:absolute;left:10px;right:10px;bottom:-4px;height:1px;background:var(--ui-line)}
.ph-list .fi{width:22px;height:16.5px;flex:none;box-shadow:0 0 0 1px rgba(28,38,36,.12);background-size:cover}
.ph-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-code{color:var(--ui-muted);font-variant-numeric:tabular-nums;font-size:13.5px}
.ph-empty{color:var(--ui-muted);cursor:default!important}
.ph-row.ui-invalid,.ph .ui-invalid{border-bottom-color:var(--ui-bad)!important}
/* Public site: square stepper buttons like the rest of the form. */
body.ui-public .ui-num-btn{border-radius:0}