/*
Theme Name: PHMAYON888
Description: PHMAYON888 brand, access and mobile guides.
Version: 1.0.0
Text Domain: phmayon888
Requires at least: 6.0
Requires PHP: 8.0
*/

/* =========================================================
   1. Design tokens
   ======================================================= */

:root {
    color-scheme: light;

    --phm-orange: #f45a00;
    --phm-orange-dark: #c94200;
    --phm-orange-light: #fff0e3;
    --phm-orange-border: #ffd5b6;

    --phm-bg: #fffaf5;
    --phm-surface: #ffffff;
    --phm-surface-soft: #fff5eb;

    --phm-text: #30241e;
    --phm-muted: #74675f;
    --phm-border: #eee3d9;
    --phm-footer: #302019;

    --phm-green: #23724a;
    --phm-red: #bc3434;

    --phm-radius-sm: 12px;
    --phm-radius: 20px;
    --phm-radius-lg: 28px;

    --phm-shadow-sm: 0 4px 16px rgb(80 43 14 / 4%);
    --phm-shadow: 0 12px 32px rgb(80 43 14 / 7%);
    --phm-shadow-orange: 0 7px 18px rgb(244 90 0 / 20%);

    --phm-page-width: 600px;
    --phm-gutter: 20px;

    --phm-font: -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif;
}

/* =========================================================
   2. Reset and base
   ======================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: #eee7df;
    color: var(--phm-text);
    font-family: var(--phm-font);
    font-size: 16px;
    line-height: 1.75;
    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
}

body.phm-site {
    width: min(100%, var(--phm-page-width));
    min-height: 100vh;
    margin-inline: auto;
    background: var(--phm-bg);
    box-shadow: 0 0 65px rgb(64 40 20 / 8%);
}

body.phm-modal-open,
body.phm-menu-open {
    overflow: hidden;
}

[hidden] {
    display: none !important;
}

img,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
input,
textarea,
select {
    -webkit-tap-highlight-color: transparent;
}

button {
    color: inherit;
}

button,
a {
    touch-action: manipulation;
}

button {
    cursor: pointer;
}

a {
    color: var(--phm-orange-dark);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #1968b3;
    outline-offset: 4px;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

h1,
h2,
h3,
h4 {
    color: var(--phm-text);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

h1 {
    font-size: clamp(27px, 6.6vw, 36px);
}

h2 {
    font-size: clamp(23px, 5.5vw, 29px);
}

h3 {
    font-size: 19px;
}

h4 {
    font-size: 17px;
}

::selection {
    background: #ffd8b8;
    color: #4b230b;
}

.phm-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.screen-reader-text,
.phm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.phm-skip-link {
    position: fixed;
    z-index: 100000;
    top: 12px;
    left: 12px;
    padding: 10px 16px;
    border-radius: 10px;
    background: white;
    color: var(--phm-text);
    box-shadow: var(--phm-shadow);
    transform: translateY(-180%);
}

.phm-skip-link:focus {
    transform: translateY(0);
}

/* =========================================================
   3. Layout
   ======================================================= */

.phm-shell {
    width: 100%;
    padding-inline: var(--phm-gutter);
}

.phm-main {
    min-height: 55vh;
}

.phm-section {
    padding-block: 30px;
}

.phm-section + .phm-section {
    border-top: 1px solid var(--phm-border);
}

.phm-section-soft {
    background: var(--phm-surface-soft);
}

.phm-section-heading {
    margin-bottom: 19px;
}

.phm-section-heading p {
    margin-top: 8px;
    color: var(--phm-muted);
    font-size: 14px;
}

.phm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: var(--phm-orange-dark);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.phm-eyebrow .phm-icon {
    width: 15px;
    height: 15px;
}

.phm-stack {
    display: grid;
    gap: 14px;
}

.phm-grid {
    display: grid;
    gap: 14px;
}

.phm-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* =========================================================
   4. Header and navigation
   ======================================================= */

.phm-header {
    position: sticky;
    z-index: 100;
    top: 0;
    background: var(--phm-orange);
    box-shadow: 0 3px 16px rgb(103 42 8 / 10%);
}

.phm-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 66px;
    padding: 10px var(--phm-gutter);
}

.phm-logo {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 240px;
    color: white;
    text-decoration: none;
}

.phm-logo:hover {
    text-decoration: none;
}

.phm-logo-image {
    display: block;
    width: auto;
    max-width: 210px;
    max-height: 46px;
    object-fit: contain;
}

.phm-logo-word {
    color: white;
    font-size: clamp(22px, 5vw, 28px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.055em;
    white-space: nowrap;
}

.phm-logo-word > span {
    color: #ffe0a9;
}

.phm-header-tools {
    display: flex;
    align-items: center;
    gap: 9px;
}

.phm-menu-toggle {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 34%);
    border-radius: 13px;
    background: rgb(255 255 255 / 12%);
    color: white;
}

.phm-menu-toggle:hover {
    background: rgb(255 255 255 / 22%);
}

.phm-menu-toggle .phm-icon {
    width: 23px;
    height: 23px;
}

.phm-menu-toggle .phm-menu-close-icon {
    display: none;
}

.phm-menu-toggle[aria-expanded="true"] .phm-menu-open-icon {
    display: none;
}

.phm-menu-toggle[aria-expanded="true"] .phm-menu-close-icon {
    display: block;
}

.phm-nav-panel {
    position: absolute;
    top: 100%;
    right: 12px;
    left: 12px;
    max-height: calc(100dvh - 90px);
    padding: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--phm-orange-border);
    border-radius: 0 0 20px 20px;
    background: white;
    box-shadow: 0 20px 35px rgb(55 31 13 / 14%);
}

.phm-nav-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 11px 15px;
    border-radius: 12px;
    color: var(--phm-text);
    font-size: 15px;
    font-weight: 700;
}

.phm-nav-link:hover,
.phm-nav-link.is-current {
    background: var(--phm-orange-light);
    color: var(--phm-orange-dark);
    text-decoration: none;
}

.phm-nav-extra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--phm-border);
}

/* =========================================================
   5. Buttons
   ======================================================= */

.phm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 17px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.phm-btn:hover {
    text-decoration: none;
}

.phm-btn:active {
    transform: translateY(1px);
}

.phm-btn .phm-icon {
    width: 19px;
    height: 19px;
}

.phm-btn-primary {
    background: linear-gradient(135deg, #ff730e, var(--phm-orange));
    color: white;
    box-shadow: var(--phm-shadow-orange);
}

.phm-btn-primary:hover {
    background: linear-gradient(135deg, #f26400, #df4d00);
    box-shadow: 0 9px 23px rgb(244 90 0 / 26%);
}

.phm-btn-secondary {
    border-color: var(--phm-orange-border);
    background: white;
    color: var(--phm-orange-dark);
}

.phm-btn-secondary:hover {
    border-color: #ffb47e;
    background: var(--phm-orange-light);
}

.phm-btn-soft {
    border-color: var(--phm-orange-border);
    background: var(--phm-orange-light);
    color: var(--phm-orange-dark);
}

.phm-btn-soft:hover {
    background: #ffe4cc;
}

.phm-btn-home {
    border-color: var(--phm-orange-border);
    background: white;
    color: var(--phm-orange-dark);
    box-shadow: var(--phm-shadow-sm);
}

.phm-btn-home:hover {
    background: var(--phm-orange-light);
}

.phm-btn-block {
    display: flex;
    width: 100%;
}

.phm-btn-small {
    min-height: 40px;
    padding: 9px 13px;
    border-radius: 11px;
    font-size: 13px;
}

.phm-btn.is-disabled {
    border-color: var(--phm-border);
    background: #f1ece7;
    color: #766e66;
    box-shadow: none;
    cursor: default;
}

.phm-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* =========================================================
   6. Homepage opening section
   ======================================================= */

.phm-access {
    padding-top: 21px;
    padding-bottom: 24px;
    background:
        radial-gradient(
            ellipse at 100% 0,
            rgb(255 182 99 / 17%),
            transparent 58%
        ),
        var(--phm-bg);
}

.phm-access-heading {
    margin-bottom: 17px;
}

.phm-access-heading .phm-eyebrow {
    margin-bottom: 6px;
}

.phm-access-heading h1 {
    font-size: clamp(24px, 6.5vw, 33px);
}

.phm-domain {
    display: block;
    margin-top: 5px;
    color: var(--phm-orange-dark);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.5;
    letter-spacing: 0.015em;
}

.phm-access-intro {
    max-width: 47ch;
    margin-top: 8px;
    color: var(--phm-muted);
    font-size: 13px;
    line-height: 1.65;
}

/* =========================================================
   7. Three access routes
   ======================================================= */

.phm-routes {
    display: grid;
    gap: 10px;
}

.phm-route {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 83px;
    padding: 13px;
    border: 1px solid var(--phm-orange-border);
    border-radius: 18px;
    background: white;
    box-shadow: var(--phm-shadow-sm);
}

.phm-route-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid #ffe0c6;
    border-radius: 13px;
    background: linear-gradient(145deg, #fff8ed, #ffead7);
    color: var(--phm-orange-dark);
}

.phm-route-icon .phm-icon {
    width: 23px;
    height: 23px;
}

.phm-route-body {
    min-width: 0;
}

.phm-route-label {
    display: block;
    color: var(--phm-muted);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.phm-route-domain {
    display: block;
    margin-top: 3px;
    color: var(--phm-text);
    font-size: clamp(14px, 3.7vw, 18px);
    font-weight: 850;
    line-height: 1.35;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

.phm-route-action {
    min-height: 42px;
    padding: 10px 13px;
    border-radius: 12px;
    font-size: 13px;
}

.phm-route-action .phm-icon {
    width: 16px;
    height: 16px;
}

.phm-route-note {
    margin-top: 11px;
    color: var(--phm-muted);
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}

.phm-access-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.phm-access-tools .phm-btn {
    min-height: 46px;
    padding: 10px 9px;
    font-size: 12px;
}

.phm-access-tools .phm-icon {
    width: 18px;
    height: 18px;
}

/* =========================================================
   8. Quick links
   ======================================================= */

.phm-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.phm-quick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 7px;
    border: 1px solid var(--phm-border);
    border-radius: 18px;
    background: white;
    color: var(--phm-text);
    box-shadow: var(--phm-shadow-sm);
    text-align: center;
    transition:
        border-color 160ms ease,
        transform 160ms ease;
}

.phm-quick-card:hover {
    transform: translateY(-2px);
    border-color: #ffbc8b;
    text-decoration: none;
}

.phm-quick-icon {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border-radius: 14px;
    background: var(--phm-orange-light);
    color: var(--phm-orange-dark);
}

.phm-quick-icon .phm-icon {
    width: 23px;
    height: 23px;
}

.phm-quick-card strong {
    font-size: 13px;
    line-height: 1.4;
}

.phm-quick-card small {
    color: var(--phm-muted);
    font-size: 10px;
    line-height: 1.5;
}

/* =========================================================
   9. Cards and information blocks
   ======================================================= */

.phm-card {
    padding: 22px;
    border: 1px solid var(--phm-border);
    border-radius: var(--phm-radius);
    background: white;
    box-shadow: var(--phm-shadow-sm);
}

.phm-card-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 17px;
    border: 1px solid var(--phm-orange-border);
    border-radius: 15px;
    background: var(--phm-orange-light);
    color: var(--phm-orange-dark);
}

.phm-card h3 {
    margin-bottom: 9px;
}

.phm-card p {
    color: var(--phm-muted);
    font-size: 14px;
}

.phm-card .phm-btn {
    margin-top: 18px;
}

.phm-feature-list {
    display: grid;
    gap: 13px;
    padding: 0;
    list-style: none;
}

.phm-feature-list > li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--phm-muted);
    font-size: 14px;
}

.phm-feature-list .phm-icon {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    color: var(--phm-orange-dark);
}

.phm-callout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 17px;
    border: 1px solid var(--phm-orange-border);
    border-radius: 16px;
    background: var(--phm-orange-light);
}

.phm-callout > .phm-icon {
    width: 21px;
    height: 21px;
    margin-top: 3px;
    color: var(--phm-orange-dark);
}

.phm-callout p {
    font-size: 13px;
    line-height: 1.75;
}

.phm-callout strong {
    color: var(--phm-text);
}

.phm-callout-neutral {
    border-color: var(--phm-border);
    background: #f8f5f1;
}

/* =========================================================
   10. Inner page opening
   ======================================================= */

.phm-page-hero {
    padding-block: 29px 25px;
    border-bottom: 1px solid var(--phm-orange-border);
    background:
        radial-gradient(
            ellipse at 100% 0,
            rgb(255 183 112 / 20%),
            transparent 65%
        ),
        #fff5e9;
}

.phm-page-hero h1 {
    max-width: 19ch;
}

.phm-page-lead {
    margin-top: 13px;
    color: var(--phm-muted);
    font-size: 15px;
    line-height: 1.8;
}

.phm-page-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 16px;
    color: var(--phm-muted);
    font-size: 11px;
}

.phm-page-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.phm-page-meta .phm-icon {
    width: 14px;
    height: 14px;
    color: var(--phm-orange-dark);
}

.phm-page-hero .phm-button-row {
    margin-top: 19px;
}

/* =========================================================
   11. Article typography
   ======================================================= */

.phm-article {
    padding-block: 28px 8px;
}

.phm-prose {
    color: var(--phm-text);
    font-size: 15px;
    line-height: 1.9;
}

.phm-prose > * + * {
    margin-top: 17px;
}

.phm-prose h2 {
    margin-top: 35px;
    margin-bottom: 13px;
    scroll-margin-top: 90px;
}

.phm-prose h3 {
    margin-top: 25px;
    margin-bottom: 10px;
    scroll-margin-top: 90px;
}

.phm-prose h4 {
    margin-top: 21px;
}

.phm-prose > :first-child {
    margin-top: 0;
}

.phm-prose p {
    color: #5c4e44;
}

.phm-prose strong {
    color: var(--phm-text);
    font-weight: 750;
}

.phm-prose ul,
.phm-prose ol {
    padding-left: 22px;
}

.phm-prose li + li {
    margin-top: 9px;
}

.phm-prose li {
    padding-left: 3px;
    color: #5c4e44;
}

.phm-prose li::marker {
    color: var(--phm-orange-dark);
    font-weight: 750;
}

.phm-prose a:not(.phm-btn) {
    text-decoration: underline;
    text-decoration-color: #e9b08b;
    text-underline-offset: 3px;
}

.phm-prose blockquote {
    padding: 17px 19px;
    border-left: 3px solid var(--phm-orange);
    border-radius: 0 14px 14px 0;
    background: var(--phm-orange-light);
}

.phm-prose hr {
    margin-block: 28px;
    border: 0;
    border-top: 1px solid var(--phm-border);
}

.phm-prose .phm-callout,
.phm-prose .phm-card,
.phm-prose .phm-table-wrap,
.phm-prose .phm-toc {
    margin-block: 23px;
}

.phm-prose .phm-card h3 {
    margin-top: 0;
}

.phm-prose .phm-card p + p {
    margin-top: 12px;
}

/* =========================================================
   12. Optional content images
   ======================================================= */

.phm-content-image {
    margin-block: 23px;
    overflow: hidden;
    border: 1px solid var(--phm-border);
    border-radius: 20px;
    background: #fff2e5;
}

.phm-content-image img {
    display: block;
    width: 100%;
    height: auto;
}

.phm-content-image figcaption {
    padding: 11px 14px;
    background: white;
    color: var(--phm-muted);
    font-size: 12px;
    line-height: 1.6;
}

/* =========================================================
   13. Table of contents
   ======================================================= */

.phm-toc {
    padding: 19px;
    border: 1px solid var(--phm-border);
    border-radius: 18px;
    background: white;
}

.phm-toc-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 800;
}

.phm-toc-title .phm-icon {
    width: 19px;
    height: 19px;
    color: var(--phm-orange-dark);
}

.phm-toc ol {
    display: grid;
    gap: 9px;
    margin: 0;
    padding-left: 20px;
}

.phm-toc li {
    margin: 0;
    padding-left: 2px;
    font-size: 13px;
    line-height: 1.6;
}

.phm-toc a {
    color: var(--phm-text);
}

.phm-toc a:hover {
    color: var(--phm-orange-dark);
}

/* =========================================================
   14. Numbered steps
   ======================================================= */

.phm-steps {
    display: grid;
    gap: 13px;
    padding: 0;
    list-style: none;
    counter-reset: phm-step;
}

.phm-step {
    position: relative;
    padding: 19px 18px 19px 65px;
    border: 1px solid var(--phm-border);
    border-radius: 17px;
    background: white;
    counter-increment: phm-step;
}

.phm-step::before {
    position: absolute;
    top: 19px;
    left: 17px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 11px;
    background: var(--phm-orange-light);
    color: var(--phm-orange-dark);
    font-size: 14px;
    font-weight: 850;
    content: counter(phm-step);
}

.phm-step h3 {
    margin: 0 0 7px;
    font-size: 16px;
}

.phm-step p {
    color: var(--phm-muted);
    font-size: 13px;
    line-height: 1.8;
}

/* =========================================================
   15. Tables
   ======================================================= */

.phm-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--phm-border);
    border-radius: 15px;
    background: white;
    -webkit-overflow-scrolling: touch;
}

.phm-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.7;
    text-align: left;
}

.phm-table-wrap caption {
    padding: 13px 15px;
    color: var(--phm-text);
    font-weight: 800;
    text-align: left;
}

.phm-table-wrap th,
.phm-table-wrap td {
    padding: 13px 15px;
    border-bottom: 1px solid var(--phm-border);
    vertical-align: top;
}

.phm-table-wrap th {
    background: var(--phm-orange-light);
    color: #713009;
    font-weight: 800;
}

.phm-table-wrap td {
    color: #5c4e44;
}

.phm-table-wrap tbody tr:last-child td {
    border-bottom: 0;
}

/* =========================================================
   16. FAQ
   ======================================================= */

.phm-faq {
    display: grid;
    gap: 10px;
}

.phm-faq-item {
    overflow: hidden;
    border: 1px solid var(--phm-border);
    border-radius: 16px;
    background: white;
}

.phm-faq-item summary {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 62px;
    padding: 17px 47px 17px 17px;
    color: var(--phm-text);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.6;
    list-style: none;
    cursor: pointer;
}

.phm-faq-item summary::-webkit-details-marker {
    display: none;
}

.phm-faq-item summary::after {
    position: absolute;
    top: 50%;
    right: 19px;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--phm-orange-dark);
    border-bottom: 2px solid var(--phm-orange-dark);
    content: "";
    transform: translateY(-65%) rotate(45deg);
    transition: transform 160ms ease;
}

.phm-faq-item[open] {
    border-color: var(--phm-orange-border);
}

.phm-faq-item[open] summary {
    color: var(--phm-orange-dark);
}

.phm-faq-item[open] summary::after {
    transform: translateY(-20%) rotate(225deg);
}

.phm-faq-answer {
    padding: 0 17px 18px;
    color: var(--phm-muted);
    font-size: 13px;
    line-height: 1.85;
}

.phm-faq-answer > * + * {
    margin-top: 11px;
}

.phm-faq-answer ul,
.phm-faq-answer ol {
    padding-left: 19px;
}

/* =========================================================
   17. Support and contact cards
   ======================================================= */

.phm-contact-list {
    display: grid;
    gap: 11px;
}

.phm-contact-card {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 77px;
    padding: 16px;
    border: 1px solid var(--phm-border);
    border-radius: 17px;
    background: white;
    color: var(--phm-text);
}

.phm-contact-card:hover {
    border-color: var(--phm-orange-border);
    text-decoration: none;
}

.phm-contact-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 13px;
    background: var(--phm-orange-light);
    color: var(--phm-orange-dark);
}

.phm-contact-copy {
    min-width: 0;
    flex: 1;
}

.phm-contact-copy strong {
    display: block;
    font-size: 14px;
}

.phm-contact-copy small {
    display: block;
    margin-top: 3px;
    color: var(--phm-muted);
    font-size: 11px;
    line-height: 1.6;
}

.phm-contact-card > .phm-icon {
    width: 18px;
    height: 18px;
    color: var(--phm-orange-dark);
}

/* =========================================================
   18. Single inner-page home button
   ======================================================= */

.phm-back-home {
    display: flex;
    justify-content: center;
    margin-top: 32px;
    padding-block: 25px 34px;
    border-top: 1px solid var(--phm-border);
}

.phm-back-home .phm-btn {
    min-width: 190px;
}

/* =========================================================
   19. Footer
   ======================================================= */

.phm-footer {
    padding-top: 31px;
    padding-bottom: calc(25px + env(safe-area-inset-bottom, 0px));
    background: var(--phm-footer);
    color: #dbcac0;
}

.phm-footer .phm-logo {
    margin-bottom: 16px;
}

.phm-footer .phm-logo-image {
    max-width: 200px;
    max-height: 70px;
}

.phm-footer-description {
    max-width: 48ch;
    color: #d4c0b4;
    font-size: 12px;
    line-height: 1.85;
}

.phm-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgb(255 255 255 / 12%);
}

.phm-footer-links a {
    color: #f4e8df;
    font-size: 12px;
    line-height: 1.7;
}

.phm-footer-links a:hover {
    color: #ffb77d;
}

.phm-footer-bottom {
    margin-top: 21px;
    padding-top: 17px;
    border-top: 1px solid rgb(255 255 255 / 12%);
    color: #c3ac9d;
    font-size: 11px;
    line-height: 1.85;
}

.phm-footer-bottom p + p {
    margin-top: 7px;
}

/* =========================================================
   20. Floating support dock
   ======================================================= */

.phm-float-dock {
    position: fixed;
    z-index: 90;
    right: max(
        8px,
        calc((100vw - var(--phm-page-width)) / 2 + 8px)
    );
    bottom: calc(17px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.phm-float-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 46px;
    min-height: 49px;
    padding: 7px 3px;
    border: 1px solid rgb(255 255 255 / 75%);
    border-radius: 14px;
    color: white;
    box-shadow: 0 5px 16px rgb(42 26 14 / 16%);
    text-decoration: none;
    transition: transform 160ms ease;
}

.phm-float-item:hover {
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
}

.phm-float-item .phm-icon {
    width: 21px;
    height: 21px;
}

.phm-float-label {
    font-size: 8px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.015em;
}

.phm-float-customer {
    background: linear-gradient(145deg, #ff7a1b, #e54c00);
}

.phm-float-telegram {
    background: #168ac1;
}

.phm-float-facebook {
    background: #1765cf;
}

.phm-float-whatsapp {
    background: #16884b;
}

.phm-float-top {
    background: #47372c;
}

/*
 * When contacts are configured, the later header.php will add
 * phm-has-contact-dock to the body. Content keeps a clear lane
 * beside the dock on narrow displays.
 */
@media (max-width: 759px) {
    .phm-has-contact-dock {
        --phm-gutter: 17px;
    }

    .phm-has-contact-dock .phm-main,
    .phm-has-contact-dock .phm-footer {
        padding-right: 57px;
    }

    .phm-has-contact-dock .phm-route {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 8px;
        padding: 11px;
    }

    .phm-has-contact-dock .phm-route-icon {
        width: 34px;
        height: 37px;
        border-radius: 11px;
    }

    .phm-has-contact-dock .phm-route-icon .phm-icon {
        width: 20px;
        height: 20px;
    }

    .phm-has-contact-dock .phm-route-domain {
        font-size: 13px;
    }

    .phm-has-contact-dock .phm-route-action {
        gap: 4px;
        padding-inline: 9px;
        font-size: 12px;
    }

    .phm-has-contact-dock .phm-access-tools {
        gap: 8px;
    }

    .phm-has-contact-dock .phm-access-tools .phm-btn {
        gap: 5px;
        padding-inline: 7px;
        font-size: 11px;
    }

    .phm-has-contact-dock .phm-access-tools .phm-icon {
        width: 16px;
        height: 16px;
    }

    .phm-has-contact-dock .phm-quick-grid {
        gap: 7px;
    }

    .phm-has-contact-dock .phm-quick-card strong {
        font-size: 12px;
    }
}

/* =========================================================
   21. VPN modal
   ======================================================= */

.phm-modal {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    isolation: isolate;
}

.phm-modal-overlay {
    position: absolute;
    z-index: -1;
    inset: 0;
    border: 0;
    background: rgb(35 23 15 / 65%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.phm-modal-dialog {
    display: flex;
    flex-direction: column;
    width: min(100%, 560px);
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    border: 1px solid #ffdfc7;
    border-radius: 25px;
    background: var(--phm-bg);
    box-shadow: 0 30px 90px rgb(0 0 0 / 25%);
}

.phm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    padding: 18px 18px 13px;
}

.phm-modal-title {
    font-size: 19px;
    line-height: 1.35;
    letter-spacing: -0.035em;
}

.phm-modal-close {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    padding: 0;
    border: 1px solid var(--phm-orange-border);
    border-radius: 50%;
    background: white;
    color: var(--phm-orange-dark);
}

.phm-modal-close:hover {
    background: var(--phm-orange-light);
}

.phm-modal-close .phm-icon {
    width: 18px;
    height: 18px;
}

.phm-modal-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    flex: 0 0 auto;
    margin-inline: 18px;
    margin-bottom: 14px;
    padding: 5px;
    border: 1px solid var(--phm-orange-border);
    border-radius: 15px;
    background: #ffeddd;
}

.phm-modal-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 10px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #895b39;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

.phm-modal-tab[aria-selected="true"] {
    background: var(--phm-orange);
    color: white;
    box-shadow: 0 4px 10px rgb(244 90 0 / 17%);
}

.phm-modal-scroll {
    min-height: 0;
    padding: 0 18px 19px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #e7b38d transparent;
    -webkit-overflow-scrolling: touch;
}

.phm-tutorial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.phm-tutorial-step {
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--phm-border);
    border-radius: 17px;
    background: white;
}

.phm-tutorial-image {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    overflow: hidden;
    border-radius: 11px;
    background: #fff7ee;
}

.phm-tutorial-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.phm-tutorial-number {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    margin-bottom: 8px;
    border-radius: 9px;
    background: var(--phm-orange-light);
    color: var(--phm-orange-dark);
    font-size: 12px;
    font-weight: 850;
}

.phm-tutorial-step h3 {
    margin-bottom: 7px;
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: -0.015em;
}

.phm-tutorial-step p {
    color: var(--phm-muted);
    font-size: 11px;
    line-height: 1.8;
}

.phm-tutorial-download {
    margin-top: 15px;
}

.phm-tutorial-note {
    margin-top: 12px;
    color: var(--phm-muted);
    font-size: 10px;
    line-height: 1.8;
}

/* =========================================================
   22. 404
   ======================================================= */

.phm-error {
    padding-block: 55px 15px;
    text-align: center;
}

.phm-error-number {
    color: var(--phm-orange);
    font-size: clamp(80px, 23vw, 125px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.08em;
}

.phm-error h1 {
    margin-top: 17px;
    font-size: 27px;
}

.phm-error p {
    max-width: 36ch;
    margin: 13px auto 0;
    color: var(--phm-muted);
    font-size: 14px;
}

.phm-error-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
    margin-top: 22px;
    font-size: 13px;
}

/* =========================================================
   23. WordPress content compatibility
   ======================================================= */

.aligncenter {
    margin-inline: auto;
}

.alignleft,
.alignright {
    float: none;
    margin-block: 18px;
}

.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    padding-top: 8px;
    color: var(--phm-muted);
    font-size: 12px;
}

.wp-block-image img {
    border-radius: 16px;
}

.wp-block-embed {
    max-width: 100%;
}

.wp-block-embed iframe {
    max-width: 100%;
}

.phm-prose iframe {
    max-width: 100%;
}

/* =========================================================
   24. Wider screens
   ======================================================= */

@media (min-width: 760px) {
    body.phm-site {
        margin-block: 24px;
        min-height: calc(100vh - 48px);
        border: 1px solid #eadfd4;
        border-radius: 27px;
    }

    .phm-header {
        border-radius: 26px 26px 0 0;
    }

    .phm-footer {
        border-radius: 0 0 26px 26px;
    }

    .phm-float-dock {
        right: calc((100vw - var(--phm-page-width)) / 2 - 65px);
        bottom: 30px;
    }

    .phm-float-item {
        width: 49px;
        min-height: 53px;
    }

    .phm-access {
        padding-top: 25px;
    }

    .phm-route {
        min-height: 88px;
    }

    .phm-access-tools .phm-btn {
        min-height: 49px;
        font-size: 14px;
    }

    .phm-section {
        padding-block: 34px;
    }
}

/* =========================================================
   25. Small screens
   ======================================================= */

@media (max-width: 374px) {
    :root {
        --phm-gutter: 14px;
    }

    .phm-header-inner {
        min-height: 60px;
    }

    .phm-logo-image {
        max-width: 170px;
        max-height: 40px;
    }

    .phm-logo-word {
        font-size: 21px;
    }

    .phm-access {
        padding-top: 16px;
    }

    .phm-access-heading h1 {
        font-size: 23px;
    }

    .phm-route {
        gap: 8px;
        min-height: 78px;
        padding: 10px;
    }

    .phm-route-action {
        padding-inline: 9px;
    }

    .phm-grid-two {
        grid-template-columns: 1fr;
    }

    .phm-card {
        padding: 18px;
    }

    .phm-modal {
        padding: 9px;
    }

    .phm-modal-dialog {
        max-height: calc(100dvh - 18px);
        border-radius: 20px;
    }

    .phm-modal-header {
        padding: 15px 13px 11px;
    }

    .phm-modal-title {
        font-size: 17px;
    }

    .phm-modal-tabs {
        margin-inline: 13px;
    }

    .phm-modal-scroll {
        padding-inline: 13px;
    }

    .phm-tutorial-grid {
        grid-template-columns: 1fr;
    }

    .phm-tutorial-image img {
        max-width: 225px;
    }

    .phm-tutorial-step h3 {
        font-size: 15px;
    }

    .phm-tutorial-step p {
        font-size: 12px;
    }

    .phm-has-contact-dock {
        --phm-gutter: 12px;
    }

    .phm-has-contact-dock .phm-route {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .phm-has-contact-dock .phm-route-icon {
        display: none;
    }

    .phm-has-contact-dock .phm-access-tools .phm-btn {
        flex-direction: column;
        gap: 4px;
        min-height: 57px;
    }
}

/* =========================================================
   26. Short screens
   ======================================================= */

@media (max-height: 700px) and (max-width: 759px) {
    .phm-access {
        padding-top: 14px;
        padding-bottom: 18px;
    }

    .phm-access-heading {
        margin-bottom: 12px;
    }

    .phm-access-intro {
        margin-top: 5px;
        font-size: 12px;
    }

    .phm-routes {
        gap: 8px;
    }

    .phm-route {
        min-height: 72px;
        padding-block: 10px;
    }

    .phm-access-tools {
        margin-top: 10px;
    }

    .phm-route-note {
        margin-top: 8px;
        font-size: 10px;
    }

    .phm-float-dock {
        gap: 5px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    .phm-float-item {
        min-height: 44px;
        padding-block: 5px;
    }
}

/* =========================================================
   27. WordPress admin toolbar
   ======================================================= */

.admin-bar .phm-header {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .phm-header {
        top: 46px;
    }
}

@media (max-width: 600px) {
    .admin-bar .phm-header {
        top: 0;
    }
}

/* =========================================================
   28. Reduced motion and print
   ======================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    body,
    body.phm-site {
        width: 100%;
        margin: 0;
        border: 0;
        background: white;
        box-shadow: none;
    }

    .phm-header,
    .phm-footer,
    .phm-float-dock,
    .phm-modal,
    .phm-back-home,
    .phm-menu-toggle,
    .phm-button-row {
        display: none !important;
    }

    .phm-has-contact-dock .phm-main {
        padding-right: 0;
    }

    .phm-shell {
        padding-inline: 0;
    }

    .phm-page-hero {
        background: white;
    }

    .phm-card,
    .phm-route,
    .phm-step,
    .phm-faq-item {
        box-shadow: none;
        break-inside: avoid;
    }

    .phm-prose,
    .phm-prose p {
        color: black;
    }
}
/* =========================================================
   PHMAYON888 — Global content card upgrade
   Append to the END of style.css
   ======================================================= */

:root {
    --phm-border: #f0e3d8;
    --phm-radius: 22px;
    --phm-shadow-sm:
        0 2px 5px rgb(83 43 16 / 2%),
        0 10px 28px rgb(83 43 16 / 5%);
}

/* Page background */

.phm-main {
    background: #fff8f1;
}

.phm-section-soft {
    background: #fff1e5;
}

.phm-section + .phm-section {
    border-top-color: #f3e2d3;
}

/* Main article cards */

.phm-prose {
    position: relative;
    padding: clamp(19px, 4.5vw, 28px);
    border: 1px solid #f0e3d8;
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            rgb(255 242 228 / 55%),
            transparent 180px
        ),
        #fff;
    box-shadow: var(--phm-shadow-sm);
    color: #41352d;
    font-size: 15px;
    line-height: 1.9;
}

/* Keep long text comfortable to read */

.phm-prose p {
    color: #65564b;
    line-height: 1.95;
    text-wrap: pretty;
}

.phm-prose > * + * {
    margin-top: 18px;
}

.phm-prose p + p {
    margin-top: 20px;
}

.phm-prose strong {
    color: #38271d;
    font-weight: 750;
}

/* Section headings inside content cards */

.phm-prose h2 {
    position: relative;
    margin-top: 32px;
    margin-bottom: 16px;
    padding-top: 25px;
    padding-left: 16px;
    border-top: 1px solid #f3e8df;
    color: #3c291d;
    font-size: clamp(21px, 5vw, 26px);
    line-height: 1.4;
    letter-spacing: -0.035em;
}

.phm-prose h2::before {
    position: absolute;
    top: 29px;
    bottom: 4px;
    left: 0;
    width: 5px;
    max-height: 32px;
    border-radius: 5px;
    background: linear-gradient(180deg, #ff9b3f, #f45a00);
    content: "";
}

.phm-prose > h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.phm-prose > h2:first-child::before {
    top: 4px;
}

.phm-prose h3 {
    margin-top: 25px;
    margin-bottom: 12px;
    color: #99400d;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: -0.02em;
}

/* Article links */

.phm-prose a:not(.phm-btn) {
    color: #b74300;
    font-weight: 650;
    text-decoration-color: #ffc49a;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.phm-prose a:not(.phm-btn):hover {
    color: #873000;
    text-decoration-color: currentColor;
}

/* Lists */

.phm-prose ul,
.phm-prose ol {
    padding-left: 23px;
}

.phm-prose li {
    padding-left: 5px;
    color: #65564b;
    line-height: 1.85;
}

.phm-prose li + li {
    margin-top: 13px;
}

.phm-prose li::marker {
    color: #e55a08;
    font-weight: 800;
}

/* Shared cards */

.phm-card,
.phm-toc,
.phm-step,
.phm-contact-card {
    border-color: #f0e1d5;
    background: #fff;
    box-shadow: var(--phm-shadow-sm);
}

.phm-card {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border-radius: 22px;
    background:
        radial-gradient(
            circle at 100% 0,
            #fff0df 0,
            transparent 155px
        ),
        #fff;
}

.phm-card h3 {
    color: #3b281c;
    font-size: 20px;
    line-height: 1.4;
}

.phm-card p {
    color: #746154;
    line-height: 1.85;
}

.phm-card-icon {
    width: 52px;
    height: 52px;
    border: 1px solid #ffd6b5;
    border-radius: 17px;
    background: linear-gradient(145deg, #fff7e9, #ffe4cb);
    color: #de5100;
    box-shadow:
        inset 0 1px 0 #fff,
        0 6px 13px rgb(234 102 17 / 8%);
}

.phm-card-icon .phm-icon {
    width: 25px;
    height: 25px;
}

/* Table of contents */

.phm-toc {
    padding: 22px;
    border-radius: 22px;
    background:
        linear-gradient(145deg, #fff5e9, #fff 70%);
}

.phm-toc-title {
    gap: 10px;
    margin-bottom: 16px;
    color: #482d1c;
    font-size: 16px;
}

.phm-toc-title .phm-icon {
    width: 22px;
    height: 22px;
}

.phm-toc ol {
    gap: 0;
}

.phm-toc li {
    padding-block: 6px;
    color: #c34b00;
}

.phm-toc li + li {
    border-top: 1px dashed #f0dfcf;
}

.phm-toc a {
    display: block;
    padding-block: 3px;
    color: #6b503e;
    font-size: 13px;
    line-height: 1.7;
}

.phm-toc a:hover {
    color: #d64d00;
}

/* Numbered steps */

.phm-step {
    padding: 22px 19px 22px 70px;
    border-radius: 20px;
    background:
        linear-gradient(110deg, #fff7ee, #fff 65%);
}

.phm-step::before {
    top: 22px;
    left: 18px;
    width: 36px;
    height: 36px;
    border: 1px solid #ffd0aa;
    border-radius: 12px;
    background: linear-gradient(145deg, #fff1db, #ffdab5);
    color: #b94400;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%);
}

.phm-step h3 {
    color: #493021;
}

.phm-step p {
    color: #796252;
}

/* Information and safety notices */

.phm-callout {
    gap: 12px;
    padding: 18px;
    border-color: #ffd2ad;
    border-radius: 17px;
    background: linear-gradient(135deg, #fff6e9, #ffead5);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%);
}

.phm-callout > .phm-icon {
    width: 23px;
    height: 23px;
    color: #d95300;
}

.phm-callout p {
    color: #785035;
    font-size: 13px;
    line-height: 1.85;
}

.phm-callout-neutral {
    border-color: #e9e2da;
    background: #f8f5f1;
}

/* FAQ cards */

.phm-faq {
    gap: 12px;
    margin-top: 20px;
}

.phm-faq-item {
    border: 1px solid #efdfd2;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 5px 18px rgb(86 46 17 / 4%);
}

.phm-faq-item summary {
    min-height: 66px;
    padding: 18px 48px 18px 19px;
    color: #4c3524;
    font-size: 14px;
    line-height: 1.65;
}

.phm-faq-item summary::after {
    right: 21px;
    width: 8px;
    height: 8px;
    border-color: #e55a08;
}

.phm-faq-item[open] {
    border-color: #ffc79e;
    background: linear-gradient(180deg, #fff6ec, #fff 110px);
    box-shadow: 0 7px 22px rgb(228 100 16 / 7%);
}

.phm-faq-item[open] summary {
    color: #bd4700;
}

.phm-faq-answer {
    padding: 0 19px 20px;
    color: #756052;
    font-size: 13px;
    line-height: 1.9;
}

.phm-faq-answer p {
    color: inherit;
}

/* Contact cards */

.phm-contact-card {
    gap: 13px;
    padding: 16px;
    border-radius: 18px;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.phm-contact-card:hover {
    border-color: #ffba87;
    box-shadow: 0 8px 22px rgb(218 98 20 / 8%);
}

.phm-contact-icon {
    width: 45px;
    height: 45px;
    flex-basis: 45px;
    border: 1px solid #ffdbbd;
    border-radius: 14px;
    background: linear-gradient(145deg, #fff8ef, #ffe7d1);
    color: #dc5200;
}

.phm-contact-copy strong {
    color: #4c3220;
}

.phm-contact-copy small {
    color: #806c5d;
}

/* Quick navigation cards */

.phm-quick-card {
    border-color: #f0dfd0;
    border-radius: 19px;
    background:
        linear-gradient(155deg, #fff, #fff7ef);
    box-shadow: 0 6px 20px rgb(86 46 17 / 5%);
}

.phm-quick-icon {
    border: 1px solid #ffdab8;
    border-radius: 15px;
    background: linear-gradient(145deg, #fff4e1, #ffdfbd);
    color: #d54d00;
    box-shadow: inset 0 1px 0 #fff;
}

.phm-quick-card strong {
    color: #51331f;
}

.phm-quick-card small {
    color: #8c705b;
}

/* Content illustrations */

.phm-content-image {
    overflow: hidden;
    border: 1px solid #f0d8c3;
    border-radius: 22px;
    background: #fff0df;
    box-shadow: 0 9px 26px rgb(102 53 13 / 7%);
}

.phm-content-image img {
    width: 100%;
    height: auto;
}

/* Tables */

.phm-table-wrap {
    border-color: #eedccc;
    border-radius: 17px;
    box-shadow: none;
}

.phm-table-wrap caption {
    padding: 15px;
    background: #fffaf5;
    color: #674127;
}

.phm-table-wrap th {
    padding: 14px;
    background: #ffeddb;
    color: #8f3e0c;
}

.phm-table-wrap td {
    padding: 14px;
    border-bottom-color: #f1e7de;
    color: #6d594a;
}

.phm-table-wrap tbody tr:nth-child(even) {
    background: #fffbf7;
}

/* Pagination */

.phm-pagination .page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.phm-pagination a.page-numbers,
.phm-pagination span.page-numbers,
.phm-content-pagination .post-page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid #f0dccb;
    border-radius: 12px;
    background: #fff;
    color: #a94509;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
}

.phm-pagination .page-numbers.current,
.phm-content-pagination .post-page-numbers.current {
    border-color: #f45a00;
    background: #f45a00;
    color: #fff;
}

.phm-content-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Single Back to Home button */

.phm-back-home {
    margin-top: 28px;
    border-top-color: #edddcf;
}

.phm-back-home .phm-btn {
    min-height: 50px;
    border-color: #ffd0aa;
    border-radius: 15px;
    background: linear-gradient(135deg, #fff, #fff1e2);
    color: #bd4700;
    box-shadow: 0 6px 18px rgb(182 85 20 / 7%);
}

/* Small-screen spacing */

@media (max-width: 420px) {
    .phm-prose {
        padding: 19px 17px;
        border-radius: 19px;
        font-size: 14px;
        line-height: 1.9;
    }

    .phm-prose p {
        line-height: 1.9;
    }

    .phm-prose h2 {
        font-size: 21px;
    }

    .phm-prose h3 {
        font-size: 17px;
    }

    .phm-card,
    .phm-toc {
        padding: 19px 17px;
        border-radius: 19px;
    }

    .phm-step {
        padding: 19px 15px 19px 61px;
    }

    .phm-step::before {
        top: 19px;
        left: 14px;
        width: 32px;
        height: 32px;
    }

    .phm-callout {
        padding: 15px;
        gap: 10px;
    }
}

/* Print */

@media print {
    .phm-prose,
    .phm-card,
    .phm-toc,
    .phm-step,
    .phm-faq-item,
    .phm-content-image {
        background: white;
        box-shadow: none;
    }

    .phm-prose {
        padding: 0;
        border: 0;
    }
}
/* =========================================================
   Full-width mobile layout + icon-only floating contacts
   ======================================================= */

/* Remove the reserved contact lane */

body.phm-site.phm-has-contact-dock .phm-main,
body.phm-site.phm-has-contact-dock .phm-footer {
    padding-right: 0;
}

/* Restore normal content spacing */

body.phm-site.phm-has-contact-dock {
    --phm-gutter: 20px;
}

/* Restore route cards compressed by the previous dock layout */

.phm-has-contact-dock .phm-route {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 11px;
    padding: 13px;
}

.phm-has-contact-dock .phm-route-icon {
    display: grid;
    width: 42px;
    height: 42px;
    border-radius: 13px;
}

.phm-has-contact-dock .phm-route-icon .phm-icon {
    width: 23px;
    height: 23px;
}

.phm-has-contact-dock .phm-route-domain {
    font-size: clamp(14px, 3.7vw, 18px);
}

.phm-has-contact-dock .phm-route-action {
    gap: 7px;
    padding: 10px 12px;
    font-size: 13px;
}

.phm-has-contact-dock .phm-access-tools {
    gap: 10px;
}

.phm-has-contact-dock .phm-access-tools .phm-btn {
    flex-direction: row;
    gap: 7px;
    min-height: 46px;
    padding: 10px 9px;
    font-size: 12px;
}

.phm-has-contact-dock .phm-access-tools .phm-icon {
    width: 18px;
    height: 18px;
}

.phm-has-contact-dock .phm-quick-grid {
    gap: 10px;
}

.phm-has-contact-dock .phm-quick-card strong {
    font-size: 13px;
}

/* Compact floating dock */

.phm-float-dock {
    position: fixed;
    z-index: 90;

    right: max(
        10px,
        calc((100vw - var(--phm-page-width)) / 2 + 10px)
    );

    bottom: calc(18px + env(safe-area-inset-bottom, 0px));

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;

    /* Only the individual buttons receive pointer input. */
    pointer-events: none;
}

.phm-float-dock .phm-float-item {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;
    min-height: 42px;
    flex: 0 0 42px;

    margin: 0;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 85%);
    border-radius: 50%;

    color: #fff;
    line-height: 1;
    text-decoration: none;

    box-shadow:
        0 3px 8px rgb(55 30 12 / 12%),
        inset 0 1px 0 rgb(255 255 255 / 20%);

    pointer-events: auto;

    transition:
        transform 160ms ease,
        box-shadow 160ms ease;
}

/* No visible text */

.phm-float-dock .phm-float-label {
    display: none;
}

.phm-float-dock .phm-icon {
    width: 21px;
    height: 21px;
    margin: 0;
}

.phm-float-dock .phm-float-customer {
    background: linear-gradient(145deg, #ff8526, #ee5600);
}

.phm-float-dock .phm-float-telegram {
    background: linear-gradient(145deg, #2bafe0, #1187bd);
}

.phm-float-dock .phm-float-facebook {
    background: linear-gradient(145deg, #287eed, #1459be);
}

.phm-float-dock .phm-float-whatsapp {
    background: linear-gradient(145deg, #27b66b, #12864a);
}

.phm-float-dock .phm-float-top {
    border-color: #ffd4b1;
    background: #fff;
    color: #dc5100;
}

.phm-float-dock .phm-float-top .phm-icon {
    width: 20px;
    height: 20px;
}

@media (hover: hover) {
    .phm-float-dock .phm-float-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgb(55 30 12 / 18%);
    }
}

/* Mobile: remove the outer frame and use the full viewport */

@media (max-width: 759px) {
    html {
        background: #fff8f1;
    }

    body.phm-site {
        width: 100%;
        max-width: none;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .phm-header,
    .phm-footer {
        border-radius: 0;
    }

    .phm-float-dock {
        right: calc(9px + env(safe-area-inset-right, 0px));
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        gap: 7px;
    }

    .phm-float-dock .phm-float-item {
        width: 38px;
        height: 38px;
        min-height: 38px;
        flex-basis: 38px;
    }

    .phm-float-dock .phm-icon {
        width: 19px;
        height: 19px;
    }
}

/* Small phones */

@media (max-width: 374px) {
    body.phm-site.phm-has-contact-dock {
        --phm-gutter: 14px;
    }

    .phm-has-contact-dock .phm-route {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        gap: 7px;
        padding: 10px;
    }

    .phm-has-contact-dock .phm-route-icon {
        display: grid;
        width: 32px;
        height: 36px;
        border-radius: 10px;
    }

    .phm-has-contact-dock .phm-route-domain {
        font-size: 13px;
    }

    .phm-has-contact-dock .phm-route-action {
        padding-inline: 9px;
        font-size: 12px;
    }

    .phm-has-contact-dock .phm-access-tools .phm-btn {
        gap: 5px;
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .phm-float-dock .phm-float-item {
        transition: none;
    }
}

@media print {
    .phm-float-dock {
        display: none !important;
    }
}