/* ==========================================================================
   W3 SMS - API documentation (v3)

   Loaded after home-v3.css, whose .hv3 scope, hero background and buttons the
   page reuses. Everything new is av3-*, so nothing leaks onto other pages.
   The header and the footer are not touched.
   ========================================================================== */

html { scroll-behavior: smooth; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hv3 .av3-hero { padding: clamp(26px, 3.4vw, 40px) 0 clamp(54px, 6vw, 72px); }

.av3-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px) 120px; gap: 16px; align-items: center; }

.av3-crumbs {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 16px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    font-size: .8rem;
    font-weight: 600;
    color: #fff;
}
.av3-crumbs a { color: #fff; }
.av3-crumbs a:hover { text-decoration: underline; }
.av3-crumbs i { font-size: .62rem; opacity: .7; }

.av3-hero__title {
    margin-top: 16px !important;
    font-size: clamp(2.2rem, 4.6vw, 3.4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #fff;
}
.av3-hero__title em { font-style: normal; color: #2fb4ff; }
.av3-hero__sub { margin-top: 12px !important; font-size: 1.05rem; color: #eaf2ff; }

.av3-highlights { display: flex; flex-wrap: wrap; gap: 16px 30px; margin-top: 30px !important; }
.av3-highlights li { display: flex; align-items: center; gap: 12px; }
.av3-highlights__icon {
    flex: 0 0 46px;
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #3da2ff, #1262e8);
    border: 2px solid rgba(255, 255, 255, .55);
    box-shadow: 0 8px 18px rgba(0, 20, 90, .35);
    font-size: 1.1rem;
    color: #fff;
}
.av3-highlights strong { display: block; font-size: .86rem; font-weight: 700; color: #fff; }
.av3-highlights small { display: block; font-size: .74rem; color: #c9dcff; }

/* ---- the drawn server, laptop and cloud ---- */
.av3-art { display: flex; justify-content: center; }
.av3-art svg { width: 100%; max-width: 470px; height: auto; filter: drop-shadow(0 22px 28px rgba(0, 20, 90, .35)); }

/* ---- the languages the examples are written in ---- */
.av3-langs { display: grid; gap: 10px; align-content: center; }
.av3-lang {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 11px;
    background: rgba(8, 36, 120, .55);
    box-shadow: 0 8px 18px rgba(0, 20, 90, .3);
    font-size: .8rem; font-weight: 700;
    color: #fff;
    transition: transform .15s ease, background .15s ease;
}
.av3-lang:hover { transform: translateX(-3px); background: rgba(20, 70, 190, .7); color: #fff; }
.av3-lang i { flex: 0 0 22px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: #fff; font-size: .8rem; }

/* --------------------------------------------------------------------------
   Layout: contents | documentation | quick links
   -------------------------------------------------------------------------- */

.hv3 .av3-main { padding: 22px 0 clamp(44px, 6vw, 72px); background: linear-gradient(180deg, #fff 0, #f4f8ff 100%); }
.av3-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr) 220px; gap: 22px; align-items: start; }

.av3-side, .av3-rail { position: sticky; top: 92px; display: grid; gap: 16px; max-height: calc(100vh - 110px); overflow: auto; scrollbar-width: none !important; }
.av3-side::-webkit-scrollbar, .av3-rail::-webkit-scrollbar { display: none; }

.av3-card { padding: 16px; border-radius: 16px; background: #fff; border: 1px solid #e3ecfa; box-shadow: 0 12px 30px rgba(18, 63, 160, .07); }

/* ---- search ---- */
.av3-search { position: relative; }
.av3-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: .85rem; color: #6b7fa6; }
.av3-search input {
    width: 100%; height: 42px; padding: 0 14px 0 38px;
    border: 1px solid #dbe6f8; border-radius: 10px; background: #fff;
    font: inherit; font-size: .84rem; color: #0b1f4d;
}
.av3-search input:focus { outline: 0; border-color: #1a62f0; box-shadow: 0 0 0 3px rgba(26, 98, 240, .15); }

/* ---- contents ---- */
.av3-nav { padding: 10px 8px; }
.av3-nav li + li { margin-top: 2px; }
.av3-nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 9px;
    font-size: .82rem; font-weight: 500; color: #1d3361;
    transition: background .14s ease, color .14s ease;
}
.av3-nav a i { flex: 0 0 18px; text-align: center; font-size: .9rem; color: #3b5280; }
.av3-nav a:hover { background: #f1f6ff; }
.av3-nav a.is-active { background: linear-gradient(135deg, #2a78ff, #0b4bd0); color: #fff; font-weight: 700; box-shadow: 0 8px 18px rgba(26, 98, 240, .3); }
.av3-nav a.is-active i { color: #fff; }
.av3-nav li[hidden] { display: none; }
.av3-nav__none { padding: 12px; font-size: .8rem; color: var(--c-mute); }

.av3-help { padding: 20px 16px; border-radius: 16px; background: #eaf3ff; border: 1px solid #d6e6fc; text-align: center; }
.av3-help__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 6px; font-size: 1.9rem; color: #1a62f0; }
.av3-help h3 { font-size: 1.1rem; font-weight: 800; color: #0b1f4d; }
.av3-help p { margin: 4px 0 14px !important; font-size: .82rem; color: var(--c-mute); }
.av3-help .hv3-btn, .av3-card .hv3-btn { width: 100%; padding-inline: 14px; font-size: .82rem; }

/* ---- documentation column ---- */
.av3-doc { display: grid; gap: 16px; min-width: 0; }

.av3-crumb { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 12px; background: #fff; border: 1px solid #e3ecfa; font-size: .78rem; color: #3b5280; }
.av3-crumb a { color: #3b5280; }
.av3-crumb a:hover { color: #1a62f0; }
.av3-crumb i { font-size: .56rem; opacity: .6; }
.av3-crumb strong { font-weight: 700; color: #0b1f4d !important; }

.av3-sec {
    position: relative; padding: 24px 26px;
    border-radius: 16px; background: #fff; border: 1px solid #e3ecfa;
    box-shadow: 0 10px 26px rgba(18, 63, 160, .06);
    scroll-margin-top: 92px;
    min-width: 0;
}
.av3-sec__head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.av3-sec__icon {
    flex: 0 0 44px; width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #e5efff; font-size: 1.1rem; color: #1a62f0;
}
.av3-sec h2 { font-size: 1.28rem; font-weight: 800; color: #0b1f4d; }
.av3-sec h3 { margin: 20px 0 8px !important; font-size: .98rem; font-weight: 800; color: #0b1f4d; }
.av3-sec p { font-size: .86rem; line-height: 1.7; color: #4a5d82; }
.av3-sec p + p { margin-top: 6px !important; }
.av3-sec code { padding: 1px 6px; border-radius: 5px; background: #eef4ff; font-size: .82em; color: #0b3fc4; }
.av3-sec .av3-code code, .av3-sec .av3-url code, .av3-sec .av3-creds code { padding: 0; border-radius: 0; background: none; font-size: inherit; color: inherit; }
.av3-sec .av3-url code { color: #e9eefc; }
.av3-sec .av3-creds code { color: #4a5d82; }
.av3-sec a:not(.hv3-btn) { color: #1a62f0; font-weight: 600; }
.av3-sec strong { color: #0b1f4d !important; }

.av3-lead { margin: 4px 0 6px !important; font-size: 1.05rem !important; font-weight: 700; color: #0b1f4d !important; }

.av3-bul { margin-top: 8px !important; }
.av3-bul li { position: relative; padding: 3px 0 3px 22px; font-size: .85rem; line-height: 1.6; color: #35496f; }
.av3-bul li::before { content: ""; position: absolute; left: 5px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: #1a62f0; }

/* ---- the four feature tiles ---- */
.av3-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.av3-tile { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: #fff; border: 1px solid #e3ecfa; box-shadow: 0 8px 20px rgba(18, 63, 160, .06); }
.av3-tile__icon { flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 1rem; color: #fff; }
.av3-tile__icon--g { background: linear-gradient(145deg, #45d98c, #12a35e); }
.av3-tile__icon--b { background: linear-gradient(145deg, #3d8bff, #1450d8); }
.av3-tile__icon--p { background: linear-gradient(145deg, #9b7bff, #5b3fd6); }
.av3-tile__icon--o { background: linear-gradient(145deg, #ffa24a, #f06a12); }
.av3-tile strong { display: block; font-size: .8rem; font-weight: 700; }
.av3-tile small { display: block; font-size: .7rem; line-height: 1.35; color: var(--c-mute); }

/* ---- code ---- */
.av3-code { position: relative; border-radius: 12px; background: #181c27; overflow: hidden; }
.av3-code + .av3-code, .av3-code + p, p + .av3-code { margin-top: 10px; }
.av3-code pre { margin: 0; padding: 18px 20px; overflow-x: auto; background: none; border: 0; font-family: "JetBrains Mono", ui-monospace, Consolas, Menlo, monospace; font-size: .8rem; line-height: 1.65; color: #e9eefc; white-space: pre; }
.av3-code--inline pre { padding-right: 96px; }
.av3-copy {
    position: absolute; top: 10px; right: 10px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border: 0; border-radius: 8px;
    background: #1a62f0; font: inherit; font-size: .74rem; font-weight: 700; color: #fff; cursor: pointer;
}
.av3-copy:hover { background: #2a78ff; }
.av3-code--ok { background: #eaf8ef; }
.av3-code--ok pre { color: #12513a; }
.av3-code--ok .av3-copy { background: #fff; color: #1d3361; border: 1px solid #cfe6d9; }

.av3-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; margin-bottom: 10px; border-radius: 10px; background: #f0f5ff; }
.av3-tabs button { padding: 8px 16px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: .8rem; font-weight: 600; color: #35496f; cursor: pointer; }
.av3-tabs button:hover { background: #e2ecff; }
.av3-tabs button.is-on { background: #1a62f0; color: #fff; }
.av3-pane[hidden] { display: none; }

/* ---- URL box, credentials, notes ---- */
.av3-url { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #181c27; }
.av3-url + .av3-url { margin-top: 8px; }
.av3-url b { flex: 0 0 auto; padding: 3px 8px; border-radius: 6px; background: #1a62f0; font-size: .7rem; font-weight: 800; letter-spacing: .04em; color: #fff; }
.av3-url code { flex: 1 1 auto; min-width: 0; overflow-x: auto; font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; font-size: .84rem; color: #e9eefc; white-space: nowrap; }
.av3-url .av3-copy { position: static; flex: 0 0 auto; }

.av3-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 11px 14px; border-radius: 10px; font-size: .8rem; line-height: 1.55; }
.av3-note i { margin-top: 3px; }
.av3-note--info { background: #e9f2ff; color: #1b4aa8; }
.av3-note--warn { background: #fdeeee; color: #b4231d; }
.av3-note--amber { background: #fff6e3; color: #8a5a00; }
.av3-sec .av3-note strong { color: inherit !important; }

.av3-creds { border: 1px solid #dbe6f8; border-radius: 12px; overflow: hidden; }
.av3-creds > div { display: grid; grid-template-columns: 130px minmax(0, 1fr) 44px; align-items: center; background: #f6f9ff; }
.av3-creds > div + div { border-top: 1px solid #dbe6f8; }
.av3-creds b { padding: 14px 16px; font-size: .84rem; font-weight: 700; color: #0b1f4d; }
.av3-creds code { padding: 14px 12px; font-family: ui-monospace, Consolas, monospace; font-size: .82rem; color: #4a5d82; overflow-x: auto; white-space: nowrap; }
.av3-creds button { height: 100%; min-height: 46px; border: 0; border-left: 1px solid #dbe6f8; background: none; color: #35496f; cursor: pointer; }
.av3-creds button:hover { color: #1a62f0; background: #eef4ff; }

/* ---- tables ---- */
.av3-table { overflow-x: auto; border: 1px solid #e3ecfa; border-radius: 12px; }
.av3-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .82rem; }
.av3-table th { padding: 11px 14px; background: #f3f7ff; text-align: left; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #35496f; }
.av3-table td { padding: 11px 14px; border-top: 1px solid #e9f0fb; vertical-align: top; line-height: 1.55; color: #35496f; }
.av3-table td:first-child { white-space: nowrap; }
.av3-req, .av3-opt { margin-left: 8px; padding: 2px 7px; border-radius: 99px; font-size: .64rem; font-weight: 700; }
.av3-req { background: #fdeeee; color: #c4302b; }
.av3-opt { background: #eef2f8; color: #5b6f94; }
.av3-st { font-weight: 800; }
.av3-table td.av3-st--ok { color: #12a35e; }
.av3-table td.av3-st--err { color: #d6342e; }
.av3-code--url pre { white-space: pre-wrap; overflow-wrap: anywhere; }

.av3-dl { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; }
.av3-dl .hv3-btn { width: auto; }

/* ---- the right-hand rail ---- */
.av3-rail h3 { margin-bottom: 10px !important; font-size: .98rem; font-weight: 800; color: #0b1f4d; }
.av3-rail li a { display: flex; align-items: center; gap: 10px; padding: 7px 4px; font-size: .8rem; color: #1d3361; }
.av3-rail li a i { flex: 0 0 18px; text-align: center; color: #3b5280; font-size: .85rem; }
.av3-rail li a:hover { color: #1a62f0; }
.av3-promo { text-align: center; }
.av3-promo__icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; margin-bottom: 6px; border-radius: 50%; background: #e5efff; font-size: 1.4rem; color: #1a62f0; }
.av3-promo h3 { margin-bottom: 6px !important; }
.av3-promo p { margin: 0 0 12px !important; font-size: .76rem; line-height: 1.5; color: var(--c-mute); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    .av3-layout { grid-template-columns: 230px minmax(0, 1fr); }
    .av3-rail { position: static; max-height: none; overflow: visible; grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
    .av3-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
    .av3-langs { display: none; }
}

@media (max-width: 991.98px) {
    .av3-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .av3-art { display: none; }
    .av3-layout { grid-template-columns: minmax(0, 1fr); }
    .av3-side { position: static; max-height: none; overflow: visible; }
    .av3-nav ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
    .av3-nav li + li { margin-top: 0; }
    .av3-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    .av3-nav ol { grid-template-columns: minmax(0, 1fr); }
    .av3-tiles { grid-template-columns: minmax(0, 1fr); }
    .av3-sec { padding: 18px 16px; }
    .av3-creds > div { grid-template-columns: minmax(0, 1fr) 44px; }
    .av3-creds b { grid-column: 1 / -1; padding-bottom: 0; }
    .av3-crumb span:last-child { display: none; }
}

.av3-highlights { gap: 12px 18px !important; flex-wrap: nowrap !important; }
.av3-highlights li { min-width: 0; }
.av3-highlights li { gap: 10px; }
.av3-highlights__icon { flex-basis: 42px !important; width: 42px !important; height: 42px !important; }
.av3-hero__line { display: block; }

@media (max-width: 1199.98px) {
    .av3-highlights { flex-wrap: wrap !important; }
}
@media (max-width: 991.98px) {
    .av3-highlights { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px !important; }
    .av3-highlights li { align-items: flex-start; }
}
@media (max-width: 575.98px) {
    .av3-url { flex-wrap: wrap; }
    .av3-url code { flex-basis: 100%; order: 3; white-space: normal; overflow-wrap: anywhere; }
}

/* ---- spacing that used to be inline style attributes ---- */
.av3-lang i { color: #1a62f0; }
.av3-tiles--spaced { margin-top: 16px; }
.av3-sec .av3-p-gap { margin-bottom: 12px; }
.av3-sec .av3-p-gap--s { margin-bottom: 6px; }
.av3-sec .av3-p-gap--m { margin-bottom: 10px; }
.av3-sec .av3-p-note { margin: 6px 0 0; font-size: .78rem; }
.av3-sec .av3-p-note--gap { margin-bottom: 12px; }
.av3-sec .av3-p-after { margin-top: 8px; }
.av3-sec .av3-p-after--m { margin-top: 10px; }

/* ---- touch targets: the copy buttons, the credential copy buttons and the
   in-page links were 32px or less tall ---- */
.av3-copy { min-height: 36px; }
.av3-creds button { min-width: 44px; }
.av3-crumb a, .av3-rail li a, .av3-sec .av3-dl a:not(.hv3-btn) { display: inline-flex; align-items: center; min-height: 32px; }
@media (pointer: coarse) {
    .av3-copy { min-height: 40px; padding-inline: 14px; }
    .av3-tabs button { min-height: 40px; }
    .av3-nav a { padding-block: 12px; }
}

/* --------------------------------------------------------------------------
   Phones and tablets
   -------------------------------------------------------------------------- */

/* The credential values lost their padding to the reset above. */
.av3-sec .av3-creds code { padding: 14px 12px; }

@media (max-width: 991.98px) {
    /* The contents list used to sit above the whole article as a 700px column of
       links. It is now one row of chips that scrolls sideways, and the help card
       (which the page also offers at the foot) is left to the foot. */
    /* A grid track is as wide as its widest child unless told otherwise, and the
       one-row list of chips is wider than any screen. */
    .av3-side { grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 12px; }
    .av3-nav { min-width: 0; }
    .hv3 .av3-hero { padding-bottom: clamp(110px, 24vw, 150px); }
    .av3-side .av3-help { display: none; }
    .av3-nav { padding: 6px; }
    .av3-nav ol { display: flex !important; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none !important; -webkit-overflow-scrolling: touch; }
    .av3-nav ol::-webkit-scrollbar { display: none; }
    .av3-nav li { flex: 0 0 auto; }
    .av3-nav li + li { margin-top: 0; }
    .av3-nav a { white-space: nowrap; padding: 10px 14px; }
    .av3-nav a i { display: none; }
    .av3-crumb { display: none; }
}

@media (max-width: 767.98px) {
    /* The copy button no longer floats over the first line of the code. */
    .av3-code--inline pre { padding-right: 20px; }
    .av3-code--inline .av3-copy { position: static; display: flex; margin: 10px 10px 0 auto; }
    .av3-url { flex-wrap: wrap; }
    .av3-url code { flex-basis: 100%; order: 3; white-space: normal; overflow-wrap: anywhere; }
    .av3-url .av3-copy { margin-left: auto; }

    /* The reference tables read as cards: nothing hides to the right of the
       screen, and a long description is as wide as the screen. */
    .av3-table { border: 0; overflow: visible; }
    .av3-table table, .av3-table tbody, .av3-table tr, .av3-table td { display: block; min-width: 0; width: 100%; }
    .av3-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .av3-table tr { margin-bottom: 10px; padding: 12px 14px; border: 1px solid #e3ecfa; border-radius: 12px; background: #fff; }
    .av3-table td { padding: 2px 0; border: 0; white-space: normal; }
    .av3-table td:first-child { white-space: normal; padding-bottom: 4px; font-weight: 700; }
    .av3-table td code { overflow-wrap: anywhere; }
    .av3-table td:first-child code { white-space: normal; }
}

@media (max-width: 575.98px) {
    .av3-creds > div { grid-template-columns: minmax(0, 1fr) 44px; }
    .av3-creds code { grid-column: 1; padding: 0 12px 14px 16px !important; }
    .av3-creds b { grid-column: 1 / -1; padding: 12px 16px 4px; }
    .av3-creds button { grid-column: 2; grid-row: 2; align-self: stretch; }
}

/* Four tiles across need the full-width column; beside the contents list they are two. */
@media (max-width: 1199.98px) {
    .av3-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .av3-tiles { grid-template-columns: minmax(0, 1fr); }
}