/* ---------------------------------------------------------------------------
   RoamHub — Country Search box  [roamhub_country_search]
   Dimuat otomatis oleh plugin di halaman mana pun widget ini dipakai.
   Jangan disalin ke Elementor lagi, cukup edit file ini.
   --------------------------------------------------------------------------- */

.rh-cs {
    --rh-blue: var(--wd-primary-color, #0046ff);
    --rh-amber: #FFA300;
    --rh-ink: #0b1533;
    --rh-soft: #f3f6ff;
    --rh-line: rgba(11, 21, 51, .1);

    width: 100%;
    /* dikunci ke lebar layar, bukan ke induk — induknya bisa lebih lebar dari layar */
    max-width: calc(100vw - 32px);
    margin: 0 auto;
    padding: 24px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--rh-line);
    box-shadow: 0 12px 32px rgba(11, 21, 51, .07);
    color: var(--rh-ink);
    overflow-wrap: break-word;
}

/* tema menimpa box-sizing & lebar form, jadi dinetralkan dulu */
.rh-cs *, .rh-cs *::before, .rh-cs *::after { box-sizing: border-box; }
.rh-cs .rh-cs__field,
.rh-cs .rh-cs__box,
.rh-cs .rh-cs__input,
.rh-cs .rh-cs__btn { box-sizing: border-box !important; }
.rh-cs, .rh-cs * { min-width: 0; }
.rh-cs img, .rh-cs input, .rh-cs button, .rh-cs select { max-width: 100%; }
.rh-cs form { margin: 0; }

.rh-cs__title { margin: 0 0 6px; font-size: 22px; font-weight: 700; line-height: 1.25; }
.rh-cs__sub   { margin: 0 0 18px; font-size: 14px; line-height: 1.5; opacity: .65; }

.rh-cs__label {
    display: block;
    margin: 0 0 7px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .5;
}

/* --- Tab eSIM / Simcard --------------------------------------------------- */

.rh-cs__tabs {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 16px;
    padding: 4px;
    border-radius: 10px;
    background: var(--rh-soft);
}
.rh-cs__tab {
    padding: 8px 20px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--rh-ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.rh-cs__tab.is-on { background: var(--rh-blue); color: #fff; }

/* --- Kolom pencarian ------------------------------------------------------ */

.rh-cs .rh-cs__field {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 10px;
    position: relative;
}

.rh-cs .rh-cs__box {
    display: block;
    position: relative;
    flex: 1 1 auto;
}

.rh-cs__icon {
    position: absolute;
    top: 50%;
    left: 18px;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    opacity: .45;
    pointer-events: none;
    z-index: 2;
}

.rh-cs .rh-cs__input {
    position: relative;
    z-index: 1;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: 54px !important;
    margin: 0;
    padding: 0 16px 0 50px !important;
    border-radius: 10px !important;
    font-size: 16px;
    line-height: 54px;
    color: var(--rh-ink);
    background: var(--rh-soft);
    border: 1.5px solid transparent;
    outline: none;
    box-shadow: none;
    transition: border-color .15s, background .15s;
}
.rh-cs .rh-cs__input::placeholder  { color: rgba(11, 21, 51, .4); }
.rh-cs .rh-cs__input:focus         { background: #fff; border-color: var(--rh-blue); box-shadow: none; }
.rh-cs .rh-cs__input:focus-visible { outline: none; }
.rh-cs .rh-cs__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.rh-cs .rh-cs__btn {
    position: relative !important;
    z-index: 2;
    right: auto !important;
    top: auto !important;
    flex: 0 0 auto;
    width: auto !important;
    height: 54px;
    margin: 0;
    padding: 0 26px;
    border: 0;
    border-radius: 10px;
    background: var(--rh-amber);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: none;
    transition: filter .15s;
}
.rh-cs .rh-cs__btn:hover { background: var(--rh-amber); filter: brightness(1.06); }

.rh-cs form,
.rh-cs .rh-cs__box,
.rh-cs .rh-cs__btn:focus,
.rh-cs .rh-cs__btn:focus-visible { outline: none !important; box-shadow: none !important; }

/* --- Daftar saran --------------------------------------------------------- */

.rh-cs__panel {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    max-height: 320px;
    overflow: auto;
    padding: 6px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--rh-line);
    box-shadow: 0 18px 44px rgba(11, 21, 51, .14);
}
.rh-cs__panel[hidden] { display: none; }

.rh-cs__head {
    padding: 10px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .45;
}

.rh-cs__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}
.rh-cs__opt:hover, .rh-cs__opt.is-active { background: var(--rh-soft); }

.rh-cs__name  { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-cs__tag   { flex: none; padding: 3px 9px; border-radius: 10px; background: rgba(0, 70, 255, .09); color: var(--rh-blue); font-size: 11px; font-weight: 600; }
.rh-cs__empty { padding: 16px 12px; font-size: 14px; opacity: .6; }

/* --- Chip tujuan populer -------------------------------------------------- */

.rh-cs__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rh-cs__chip {
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--rh-line);
    background: #fff;
    color: var(--rh-ink);
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.rh-cs__chip:hover { border-color: var(--rh-blue); color: var(--rh-blue); }

/* ---------------------------------------------------------------------------
   Halaman hasil pencarian (.wm-cs-*)
   Kotak rekomendasi, baris tipe eSIM/Simcard, dan filter Days & Quota.
   --------------------------------------------------------------------------- */

/* --- Kotak rekomendasi ---------------------------------------------------- */

.wm-cs-box {
    width: 100%;
    clear: both;
    margin: 0 0 24px;
    padding: 16px 20px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
}
.wm-cs-title { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.wm-cs-sub   { margin: 0 0 12px; font-size: 13px; opacity: .7; }
.wm-cs-list  { display: flex; flex-wrap: wrap; gap: 8px; }

.wm-cs-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--wd-primary-color, #0046ff);
    border-radius: 10px;
    color: var(--wd-primary-color, #0046ff);
    font-size: 14px;
    line-height: 1.3;
}
.wm-cs-item:hover,
.wm-cs-item.is-on { background: var(--wd-primary-color, #0046ff); color: #fff; }
.wm-cs-item:hover .wm-cs-badge,
.wm-cs-item.is-on .wm-cs-badge { background: rgba(255, 255, 255, .2); }

/* nama panjang dipotong jadi satu baris, lengkapnya ada di tooltip */
.wm-cs-name  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(60vw, 420px); }
.wm-cs-badge { flex: none; padding: 2px 6px; border-radius: 4px; background: rgba(0, 70, 255, .1); font-size: 11px; }

.wm-cs-toggle {
    display: none;
    align-self: center;
    padding: 8px 12px;
    border: 0;
    background: none;
    color: var(--wd-primary-color, #0046ff);
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}
.wm-cs-list.is-collapsed .wm-cs-more   { display: none; }
.wm-cs-list.is-collapsed .wm-cs-toggle { display: inline-block; }

/* --- Baris tipe eSIM / Simcard / Wifi ------------------------------------- */

.wm-cs-types { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; clear: both; margin: 0 0 16px; }
.wm-cs-type {
    padding: 7px 16px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.3;
    color: inherit;
}
.wm-cs-type:hover { border-color: var(--wd-primary-color, #0046ff); color: var(--wd-primary-color, #0046ff); }
.wm-cs-type.is-on {
    background: var(--wd-primary-color, #0046ff);
    border-color: var(--wd-primary-color, #0046ff);
    color: #fff;
}

/* --- Filter Days & Quota -------------------------------------------------- */

.wm-cs-plan {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    width: 100%;
    clear: both;
    margin: 0 0 18px;
}
/* selalu sebaris, bagi dua — termasuk di HP */
.wm-cs-plan .wm-cs-pair { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 0; }
.wm-cs-plan label { margin: 0; font-size: 13px; line-height: 1.3; opacity: .7; }

.wm-cs-plan .wm-cs-pair:nth-of-type(2) label { width: 100%; text-align: right; }

/* tema memaksa lebar select sendiri — dikunci di sini.
   background-color saja, JANGAN shorthand: panah dropdown tema berupa background-image */
.wm-cs-plan select {
    width: 100% !important;
    max-width: none !important;
    height: 46px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid rgba(0, 0, 0, .12) !important;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: none !important;
    font-size: 14px;
    line-height: 46px;
    color: inherit;
}
.wm-cs-plan select:focus {
    outline: none;
    border-color: var(--wd-primary-color, #0046ff) !important;
    box-shadow: none !important;
}

.wm-cs-plan .wm-cs-reset { flex: none; padding-bottom: 14px; font-size: 13px; text-decoration: underline; opacity: .6; }

/* di layar sempit label dipendekkan supaya tidak terpotong, tapi tetap sebaris */
@media (max-width: 480px) {
    .wm-cs-plan { gap: 8px; }
    .wm-cs-plan label { font-size: 12px; }
    .wm-cs-plan select { padding: 0 8px; font-size: 13px; }
}

/* ---------------------------------------------------------------------------
   Penyaring grid region di halaman kategori eSIM (.rh-gf)
   Sengaja ramping: bukan kartu, hanya satu kolom di atas grid.
   --------------------------------------------------------------------------- */

.rh-gf {
    --rh-blue: var(--wd-primary-color, #0046ff);
    --rh-ink: #0b1533;
    --rh-soft: #f3f6ff;
    --rh-line: rgba(11, 21, 51, .12);

    width: 100%;
    max-width: calc(100vw - 32px);
    margin: 0 0 22px;
    color: var(--rh-ink);
}
.rh-gf *, .rh-gf *::before, .rh-gf *::after { box-sizing: border-box; }

.rh-gf__label {
    display: block;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    opacity: .6;
}

.rh-gf__box { position: relative; display: block; }

.rh-gf__icon {
    position: absolute;
    top: 50%;
    left: 18px;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    opacity: .4;
    pointer-events: none;
    z-index: 2;
}

.rh-gf .rh-gf__input {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 52px !important;
    margin: 0;
    padding: 0 120px 0 50px !important;
    border: 1px solid var(--rh-line) !important;
    border-radius: 10px !important;
    background: #fff;
    font-size: 15px;
    line-height: 52px;
    color: var(--rh-ink);
    box-shadow: none !important;
    transition: border-color .15s;
}
.rh-gf .rh-gf__input::placeholder { color: rgba(11, 21, 51, .38); }
.rh-gf .rh-gf__input:focus        { outline: none; border-color: var(--rh-blue) !important; }

.rh-gf .rh-gf__clear {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    height: 36px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: var(--rh-soft);
    color: var(--rh-blue);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.rh-gf .rh-gf__clear[hidden] { display: none; }

/* kotak grid yang tidak cocok — !important karena tema menyetel display-nya sendiri */
.wc-child-cat-card.rh-gf-hide { display: none !important; }

.rh-gf__note { margin: 10px 0 0; font-size: 13px; opacity: .65; }
.rh-gf__note[hidden] { display: none; }

@media (max-width: 575px) {
    .rh-gf { max-width: calc(100vw - 24px); margin-bottom: 16px; }
    .rh-gf .rh-gf__input { height: 48px !important; line-height: 48px; font-size: 16px; padding: 0 96px 0 44px !important; }
    .rh-gf__icon { left: 15px; }
    .rh-gf .rh-gf__clear { height: 32px; padding: 0 10px; font-size: 12px; }
}

/* --- Mobile --------------------------------------------------------------- */

@media (max-width: 575px) {
    .rh-cs { padding: 16px; max-width: calc(100vw - 24px); }

    .rh-cs__title { font-size: 19px; }
    .rh-cs__sub   { font-size: 13px; margin-bottom: 14px; }

    .rh-cs .rh-cs__field { flex-direction: column; gap: 10px; }
    .rh-cs .rh-cs__box,
    .rh-cs .rh-cs__btn   { flex: 0 0 auto !important; width: 100% !important; }

    .rh-cs .rh-cs__input { height: 50px !important; line-height: 50px; padding: 0 14px 0 44px !important; }
    .rh-cs .rh-cs__btn   { height: 50px; }
    .rh-cs__icon         { left: 15px; }

    .rh-cs__tabs { display: flex; width: 100%; }
    .rh-cs__tab  { flex: 1 1 0; padding: 9px 12px; text-align: center; }

    .rh-cs__chips { gap: 6px; }
    .rh-cs__chip  { padding: 7px 12px; font-size: 12px; }
    .rh-cs__panel { max-height: 60vh; }
}