.faq-content{max-width:1040px;margin-inline:auto}
.faq-content h1{margin-top:24px}
.faq-content p{line-height:1.9}
.faq-content details{border:1px solid var(--border-color,#dbeafe);border-radius:14px;margin-block:12px;padding:18px;background:var(--card-bg,#fff)}
.faq-content summary{cursor:pointer;font-weight:700;line-height:1.8;padding-inline-end:12px}
.faq-content summary:focus-visible,.faq-directory-link:focus-visible{outline:3px solid #2563eb;outline-offset:5px}
.faq-content details p{margin-block:14px 0}
.faq-directory-link{display:inline-block;margin-block:10px 20px;color:#2563eb}
.faq-content #couriers{scroll-margin-top:100px;margin-top:40px}
.courier-directory{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;list-style:none;padding:0!important}
.courier-directory li{border:1px solid var(--border-color,#dbeafe);border-radius:12px;padding:14px;background:var(--card-bg,#fff)}
.courier-directory strong,.courier-directory span{display:block;overflow-wrap:anywhere}
.courier-directory span{font-size:13px;margin-top:7px;line-height:1.7}
.courier-directory-alt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.courier-search{margin-block:20px 14px}
.courier-content .courier-search-label{display:block;margin-bottom:8px;font-size:14px;font-weight:700}
.courier-search-box{position:relative;display:flex;align-items:center}
.courier-search-input{width:100%;min-height:48px;padding:12px 14px;padding-inline-end:46px;border:1px solid var(--border-color,#dbeafe);border-radius:12px;background:var(--card-bg,#fff);color:inherit;font:inherit;font-size:16px;line-height:1.6;transition:border-color .2s ease,box-shadow .2s ease;-webkit-appearance:none;appearance:none}
.courier-search-input::placeholder{color:#64748b}
.courier-search-input:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.courier-search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.courier-search-clear{position:absolute;inset-inline-end:8px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--border-color,#dbeafe);border-radius:50%;background:var(--card-bg,#fff);color:#475569;font:inherit;font-size:18px;line-height:1;cursor:pointer}
.courier-search-clear[hidden]{display:none}
.courier-search-clear:hover{border-color:#2563eb;color:#2563eb}
.courier-content .courier-search-status{margin:10px 0 0;font-size:13px;line-height:1.6;color:#64748b;min-height:1.4em}
.courier-content .courier-search-empty{margin:14px 0 0;padding:18px 16px;border:1px dashed var(--border-color,#dbeafe);border-radius:12px;background:var(--card-bg,#fff);text-align:center;font-weight:700}
.courier-search-empty[hidden]{display:none}
.subpage-logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:800}
html[data-theme="dark"] .faq-content details,html[data-theme="dark"] .courier-directory li,body.dark-mode .faq-content details,body.dark-mode .courier-directory li{background:#111827;color:#e5e7eb;border-color:#334155}
html[data-theme="dark"] .courier-search-input,html[data-theme="dark"] .courier-search-clear,html[data-theme="dark"] .courier-search-empty,body.dark-mode .courier-search-input,body.dark-mode .courier-search-clear,body.dark-mode .courier-search-empty{background:#111827;color:#e5e7eb;border-color:#334155}
html[data-theme="dark"] .courier-search-clear,body.dark-mode .courier-search-clear{color:#94a3b8}
html[data-theme="dark"] .courier-search-clear:hover,body.dark-mode .courier-search-clear:hover{color:#bfdbfe;border-color:#60a5fa}
html[data-theme="dark"] .courier-content .courier-search-status,body.dark-mode .courier-content .courier-search-status{color:#94a3b8}
@media(max-width:600px){.faq-content details{padding:14px}.subpage-header-actions{gap:12px}.courier-directory{grid-template-columns:1fr 1fr}.courier-directory li{padding:10px}.courier-search-input{min-height:46px}.courier-content .courier-search-empty{padding:16px 12px}}

/* Create-store interaction adapted from Kabak:
 * https://uiverse.io/Kabak/unlucky-treefrog-77
 * MIT License — Copyright (c) 2026 Kabak (Kabak)
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */
.faq-header-actions{gap:20px;flex-shrink:0}
.faq-create-store{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:50px;min-width:136px;padding:10px 22px;
    border:1px solid #404c5d;border-radius:5px;
    background:linear-gradient(145deg,#2e2d2d,#212121);
    color:#e5e7eb;font-family:inherit;font-size:14px;font-weight:700;line-height:1.5;
    text-decoration:none;white-space:nowrap;cursor:pointer;
    box-shadow:-1px -5px 15px #41465b55,5px 5px 15px #41465b44,inset 5px 5px 10px #212121,inset -5px -5px 10px #212121;
    transition:box-shadow 500ms,color 500ms,border-color 500ms,transform 160ms;
    -webkit-tap-highlight-color:transparent;
}
.faq-create-store:hover,.faq-create-store:focus-visible{
    box-shadow:1px 1px 13px #20232e66,-1px -1px 13px #545b7888;
    color:#fff;border-color:#64748b;
}
.faq-create-store:active{
    box-shadow:1px 1px 13px #20232e88,-1px -1px 33px #545b7899,inset 2px 2px 6px #111;
    transform:translateY(1px);transition-duration:100ms;
}
.faq-language-switch{
    display:inline-flex;align-items:center;gap:3px;padding:4px;
    border:1px solid #dbe3ef;border-radius:12px;background:#eef2f7;
}
.faq-language-switch a{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:38px;min-width:66px;padding:7px 11px;border-radius:8px;
    color:#475569;font-size:13px;font-weight:700;line-height:1.4;text-decoration:none;
    transition:background-color 180ms,color 180ms,box-shadow 180ms,transform 180ms;
    -webkit-tap-highlight-color:transparent;
}
.faq-language-switch a[aria-current="page"]{background:#fff;color:#1d4ed8;box-shadow:0 1px 4px #0f172a18}
.faq-language-switch a:hover{background:#dfe8f8;color:#1d4ed8;transform:translateY(-1px)}
.faq-language-switch a:active{transform:translateY(1px);box-shadow:inset 0 1px 3px #0f172a24}
.faq-create-store:focus-visible,.faq-language-switch a:focus-visible{outline:3px solid #60a5fa;outline-offset:4px}
html[data-theme="dark"] .faq-language-switch{background:#172033;border-color:#334155}
html[data-theme="dark"] .faq-language-switch a{color:#cbd5e1}
html[data-theme="dark"] .faq-language-switch a[aria-current="page"]{background:#334155;color:#fff}
html[data-theme="dark"] .faq-language-switch a:hover{background:#263b59;color:#bfdbfe}
@media(max-width:600px){
    .faq-header-actions{gap:10px;flex-wrap:wrap;justify-content:center}
    .faq-create-store{min-width:120px;min-height:46px;padding:10px 15px}
    .faq-language-switch a{min-width:58px;padding:7px 9px}
}
@media(prefers-reduced-motion:reduce){
    .faq-create-store,.faq-language-switch a,.courier-search-input,.courier-search-clear{transition:none}
    .faq-create-store:active,.faq-language-switch a:hover,.faq-language-switch a:active{transform:none}
}


/* Mobile overflow protection for the FAQ and courier directory */
html,body{max-width:100%;overflow-x:clip}
.faq-content,.faq-content *,.subpage-main-wrapper,.subpage-main-wrapper *{box-sizing:border-box;min-width:0}
.faq-content{width:100%;overflow-wrap:anywhere;word-break:normal}
.faq-content details,.faq-content summary,.faq-content p,.faq-content a{max-width:100%;overflow-wrap:anywhere}
.courier-directory{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.courier-directory li{min-width:0;overflow-wrap:anywhere}
.courier-search-box,.courier-search-input{min-width:0;max-width:100%}
@media(max-width:600px){
  .subpage-main-wrapper,.subpage-main-wrapper .content-container{width:100%;max-width:100%;padding-inline:12px}
  .faq-content{padding-inline:0}
  .faq-content h1{font-size:clamp(1.5rem,6vw,2rem);overflow-wrap:anywhere}
  .faq-content details{padding:12px}
  .faq-content summary{padding-inline-end:4px}
  .courier-directory{grid-template-columns:minmax(0,1fr)}
  .faq-directory-link{max-width:100%;white-space:normal;overflow-wrap:anywhere}
}


/* Mobile-only layout fix: keep the FAQ header and page within the viewport */
@media (max-width: 600px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
  }
  .subpage-header,
  .subpage-nav-container {
    width: 100%;
    max-width: 100%;
  }
  .subpage-nav-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
  }
  .subpage-logo {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
  }
  .subpage-logo img {
    flex: 0 0 42px;
    max-width: 42px;
  }
  .faq-header-actions {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .faq-language-switch {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
  }
  .faq-language-switch a {
    min-width: 0;
    padding-inline: 9px;
  }
  .faq-create-store {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    padding-inline: 12px;
  }
  .subpage-main-wrapper,
  .subpage-main-wrapper .content-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
  }
  .content-container {
    transform: none;
    transform-style: flat;
  }
  .faq-content,
  .faq-content section,
  .faq-content details,
  .courier-content,
  .courier-directory,
  .courier-directory li {
    min-width: 0;
    max-width: 100%;
  }
  .faq-content img,
  .faq-content iframe,
  .faq-content table,
  .faq-content pre {
    max-width: 100%;
  }
  body::before,
  body::after {
    animation: none;
  }
}
