.paai-modal-open {
overflow: hidden;
}
.paai-zone,
.paai-zone * {
box-sizing: border-box;
}
.paai-zone {
--paai-ink: #18211c;
--paai-muted: #657169;
--paai-border: rgba(24, 33, 28, .13);
--paai-accent: #1f6f54;
--paai-paper: #f7f7f3;
position: relative;
width: 100%;
margin: 36px auto;
color: var(--paai-ink);
font-family: inherit;
}
.paai-zone__header {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
margin-bottom: 18px;
padding: 0 2px;
}
.paai-zone__header h2 {
margin: 3px 0 0;
color: var(--paai-ink);
font: 700 clamp(25px, 3vw, 38px)/1.1 inherit;
letter-spacing: -.035em;
}
.paai-zone__kicker {
color: var(--paai-accent);
font-size: 12px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.paai-zone--dark .paai-zone__header h2 {
color: #f7fbf9 !important;
text-shadow: 0 1px 18px rgba(0, 0, 0, .22);
}
.paai-zone--dark .paai-zone__kicker {
color: #6ee7b7 !important;
}
.paai-zone--dark .paai-publish-button {
background: #38d889 !important;
color: #071710 !important;
box-shadow: 0 9px 28px rgba(24, 207, 124, .18);
}
.paai-zone--dark .paai-publish-button:hover {
background: #75edbc !important;
color: #071710 !important;
}
.paai-zone--dark .paai-zone__sell {
color: #c6d3cd !important;
}
.paai-zone--dark .paai-link-button {
color: #6ee7b7 !important;
}
.paai-zone--dark .paai-empty {
border-color: rgba(110, 231, 183, .32);
background: rgba(255, 255, 255, .035);
color: #dce8e2;
}
.paai-publish-button,
.paai-next,
.paai-submit {
appearance: none;
border: 0;
border-radius: 999px;
background: var(--paai-ink);
color: #fff;
cursor: pointer;
font: 750 15px/1 inherit;
padding: 14px 20px;
transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.paai-publish-button:hover,
.paai-next:hover,
.paai-submit:hover {
background: var(--paai-accent);
box-shadow: 0 10px 28px rgba(31, 111, 84, .2);
transform: translateY(-1px);
}
.paai-publish-button:focus-visible,
.paai-link-button:focus-visible,
.paai-card a:focus-visible,
.paai-modal button:focus-visible,
.paai-modal input:focus-visible,
.paai-modal textarea:focus-visible {
outline: 3px solid rgba(31, 111, 84, .32);
outline-offset: 3px;
}
.paai-listings {
display: grid;
grid-template-columns: 1fr;
gap: 22px;
}
.paai-empty {
grid-column: 1 / -1;
display: grid;
min-height: 104px;
place-items: center;
border: 1px dashed rgba(31, 111, 84, .32);
border-radius: 18px;
background: #f3f6f4;
color: var(--paai-muted);
font-weight: 650;
padding: 22px;
}
.paai-card {
--card-accent: #587b67;
--card-soft: #eaf0eb;
--card-ink: #17211b;
display: grid;
min-width: 0;
overflow: hidden;
border: 1px solid rgba(25, 35, 29, .1);
border-radius: 25px;
background: #fff;
box-shadow: 0 18px 55px rgba(30, 42, 34, .08);
color: var(--card-ink);
isolation: isolate;
grid-column: 1 / -1;
width: 100%;
max-width: none;
grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
}
.paai-card.paai-layout-compact,
.paai-card.paai-layout-standard,
.paai-card.paai-layout-featured,
.paai-card.paai-layout-premium,
.paai-card.paai-layout-compact:only-child,
.paai-card.paai-layout-standard:only-child,
.paai-listings[data-count="1"] .paai-card,
.paai-listings[data-count="1"] .paai-card.paai-layout-compact,
.paai-listings[data-count="1"] .paai-card.paai-layout-standard {
grid-column: 1 / -1;
width: 100%;
max-width: none;
grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
}
.paai-card.paai-layout-compact .paai-card__body { padding: 22px; }
.paai-card.paai-layout-compact .paai-card__title { font-size: 23px; }
.paai-card.paai-layout-compact .paai-card__summary { font-size: 14px; }
.paai-card.paai-layout-premium {
border: 2px solid color-mix(in srgb, var(--card-accent) 62%, #fff);
box-shadow: 0 25px 75px rgba(21,33,26,.16);
}
.paai-palette-ocean { --card-accent: #176b78; --card-soft: #e3f1f2; --card-ink: #12333a; }
.paai-palette-sand { --card-accent: #936b32; --card-soft: #f5ecdc; --card-ink: #342719; }
.paai-palette-plum { --card-accent: #7a4266; --card-soft: #f3e6ef; --card-ink: #311e2b; }
.paai-palette-midnight { --card-accent: #d0ab63; --card-soft: #232937; --card-ink: #f9f5ec; background: #171c27; border-color: rgba(255,255,255,.11); }
.paai-palette-terracotta { --card-accent: #a64e35; --card-soft: #f7e5df; --card-ink: #3c2018; }
.paai-card__media {
position: relative;
min-height: 330px;
overflow: hidden;
background: var(--card-soft);
aspect-ratio: 16 / 10;
}
.paai-card__hero {
display: block;
width: 100%;
height: 100%;
min-height: inherit;
object-fit: contain;
object-position: center;
background: var(--card-soft);
transition: opacity .18s ease;
}
.paai-card__hero.is-changing {
opacity: .28;
}
.paai-focus-center { object-position: center; }
.paai-focus-top,
.paai-focus-bottom,
.paai-focus-left,
.paai-focus-right { object-position: center; }
.paai-card__media::after {
position: absolute;
inset: auto 0 0;
height: 34%;
background: linear-gradient(transparent, rgba(0, 0, 0, .34));
content: "";
pointer-events: none;
}
.paai-card__gallery {
position: absolute;
z-index: 2;
left: 50%;
bottom: 14px;
display: flex;
max-width: calc(100% - 128px);
gap: 7px;
overflow-x: auto;
padding: 3px;
scrollbar-width: none;
transform: translateX(-50%);
}
.paai-card__gallery::-webkit-scrollbar {
display: none;
}
.paai-card__thumb {
appearance: none;
width: 55px;
height: 55px;
flex: 0 0 55px;
margin: 0;
overflow: hidden;
border: 2px solid rgba(255,255,255,.82);
border-radius: 12px;
background: rgba(18,25,21,.5);
box-shadow: 0 7px 20px rgba(0,0,0,.18);
cursor: pointer;
opacity: .82;
padding: 0;
transition: border-color .18s ease, opacity .18s ease, transform .18s ease;
}
.paai-card__thumb:hover,
.paai-card__thumb.is-active {
border-color: #fff;
opacity: 1;
transform: translateY(-2px);
}
.paai-card__thumb.is-active {
box-shadow: 0 0 0 2px var(--card-accent), 0 8px 22px rgba(0,0,0,.24);
}
.paai-card__thumb:focus-visible,
.paai-card__gallery-arrow:focus-visible {
outline: 3px solid #fff;
outline-offset: 2px;
}
.paai-card__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
background: var(--card-soft);
}
.paai-card__gallery-arrow {
appearance: none;
position: absolute;
z-index: 3;
top: 50%;
display: grid;
width: 42px;
height: 42px;
margin: 0;
place-items: center;
border: 1px solid rgba(255,255,255,.42);
border-radius: 50%;
background: rgba(17,24,20,.58);
color: #fff;
cursor: pointer;
font: 400 32px/1 sans-serif;
padding: 0 0 3px;
transform: translateY(-50%);
transition: background .18s ease, transform .18s ease;
backdrop-filter: blur(8px);
}
.paai-card__gallery-arrow:hover {
background: var(--card-accent);
transform: translateY(-50%) scale(1.06);
}
.paai-card__gallery-arrow--prev { left: 14px; }
.paai-card__gallery-arrow--next { right: 14px; }
.paai-card__gallery-count {
position: absolute;
z-index: 2;
bottom: 20px;
left: 17px;
border: 1px solid rgba(255,255,255,.32);
border-radius: 999px;
background: rgba(17,24,20,.58);
color: #fff;
font-size: 11px;
font-weight: 750;
line-height: 1;
padding: 7px 9px;
backdrop-filter: blur(8px);
}
.paai-card__sponsored {
position: absolute;
z-index: 2;
top: 13px;
left: 13px;
border: 1px solid rgba(255,255,255,.35);
border-radius: 999px;
background: rgba(20,25,22,.56);
color: #fff;
font-size: 10px;
font-weight: 750;
letter-spacing: .055em;
padding: 6px 9px;
text-transform: uppercase;
backdrop-filter: blur(10px);
}
.paai-card__premium {
position: absolute;
z-index: 2;
top: 13px;
right: 13px;
border-radius: 999px;
background: #f2d58b;
box-shadow: 0 6px 22px rgba(0,0,0,.18);
color: #35270b;
font-size: 10px;
font-weight: 850;
letter-spacing: .045em;
padding: 7px 10px;
text-transform: uppercase;
}
.paai-card__body {
display: flex;
min-width: 0;
flex-direction: column;
padding: clamp(22px, 3vw, 34px);
}
.paai-card__eyebrow {
margin-bottom: 9px;
color: var(--card-accent);
font-size: 11px;
font-weight: 850;
letter-spacing: .11em;
text-transform: uppercase;
}
.paai-card__title {
margin: 0 0 12px;
color: var(--card-ink);
font: 750 clamp(22px, 2.4vw, 32px)/1.08 inherit;
letter-spacing: -.035em;
}
.paai-listings:not([data-count="1"]) .paai-card__title {
font-size: clamp(21px, 2vw, 27px);
}
.paai-card__summary {
margin: 0 0 18px;
color: color-mix(in srgb, var(--card-ink) 72%, transparent);
font-size: 15px;
line-height: 1.62;
}
.paai-card__highlights {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin: 0 0 19px;
padding: 0;
list-style: none;
}
.paai-card__highlights li {
border-radius: 999px;
background: var(--card-soft);
color: var(--card-ink);
font-size: 12px;
font-weight: 680;
line-height: 1.2;
padding: 8px 10px;
}
.paai-card__details {
display: grid;
gap: 7px;
margin: 0 0 22px;
}
.paai-card__details a,
.paai-card__details span {
overflow: hidden;
color: color-mix(in srgb, var(--card-ink) 72%, transparent);
font-size: 13px;
line-height: 1.35;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
.paai-card__details a:hover {
color: var(--card-accent);
}
.paai-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 13px;
margin-top: auto;
padding-top: 17px;
border-top: 1px solid color-mix(in srgb, var(--card-ink) 12%, transparent);
}
.paai-card__brand {
overflow: hidden;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
}
.paai-card__cta {
flex: 0 0 auto;
border-radius: 999px;
background: var(--card-accent);
color: #fff !important;
font-size: 13px;
font-weight: 750;
padding: 10px 13px;
text-decoration: none !important;
}
.paai-card__cta:hover {
filter: brightness(.94);
}
.paai-variant-editorial .paai-card__title {
font-family: Georgia, "Times New Roman", serif;
font-weight: 600;
letter-spacing: -.025em;
}
.paai-variant-bold .paai-card__body {
background: linear-gradient(145deg, var(--card-soft), transparent 75%);
}
.paai-variant-warm {
border-radius: 34px 12px 34px 12px;
}
.paai-palette-midnight .paai-card__summary,
.paai-palette-midnight .paai-card__details a,
.paai-palette-midnight .paai-card__details span {
color: rgba(249,245,236,.72);
}
.paai-zone__sell {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px 10px 0;
color: var(--paai-muted);
font-size: 13px;
}
.paai-link-button,
.paai-back {
appearance: none;
border: 0;
background: transparent;
color: var(--paai-accent);
cursor: pointer;
font: 750 13px/1 inherit;
padding: 7px;
}
.paai-modal[hidden],
.paai-step[hidden] {
display: none !important;
}
.paai-modal {
position: fixed;
z-index: 999999;
inset: 0;
display: grid;
padding: 18px;
place-items: center;
}
.paai-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(11, 18, 14, .72);
backdrop-filter: blur(9px);
}
.paai-modal__panel {
position: relative;
z-index: 1;
width: min(980px, 100%);
max-height: calc(100vh - 36px);
overflow: auto;
border: 1px solid rgba(255,255,255,.35);
border-radius: 26px;
background: #fbfbf8;
box-shadow: 0 32px 100px rgba(0,0,0,.34);
padding: clamp(22px, 4vw, 42px);
animation: paai-modal-in .24s ease both;
}
@keyframes paai-modal-in {
from { opacity: 0; transform: translateY(10px) scale(.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.paai-modal .paai-modal__close {
appearance: none !important;
position: absolute;
top: 14px !important;
right: 14px !important;
display: flex !important;
width: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
border: 1px solid rgba(24, 33, 28, .18) !important;
border-radius: 999px !important;
background: #fff !important;
box-shadow: 0 7px 20px rgba(17, 26, 21, .12) !important;
color: #17211b !important;
cursor: pointer;
font: 400 26px/1 Arial, sans-serif !important;
padding: 0 0 3px !important;
text-align: center !important;
text-indent: 0 !important;
transform: none !important;
}
.paai-modal .paai-modal__close > span {
display: block !important;
width: 1em !important;
height: 1em !important;
margin: 0 !important;
color: inherit !important;
font: inherit !important;
line-height: .9 !important;
}
.paai-modal .paai-modal__close:hover {
border-color: rgba(31, 111, 84, .48) !important;
background: #edf6f1 !important;
color: #15563f !important;
}
.paai-modal__intro > span {
color: var(--paai-accent);
font-size: 11px;
font-weight: 850;
letter-spacing: .11em;
text-transform: uppercase;
}
.paai-modal__intro h2 {
max-width: 620px;
margin: 6px 46px 8px 0;
color: var(--paai-ink);
font: 750 clamp(25px, 4vw, 36px)/1.08 inherit;
letter-spacing: -.035em;
}
.paai-modal__intro p {
max-width: 650px;
margin: 0;
color: var(--paai-muted);
font-size: 14px;
line-height: 1.55;
}
.paai-progress {
display: flex;
align-items: center;
width: min(330px, 86%);
margin: 25px 0 22px;
}
.paai-progress span {
display: grid;
width: 28px;
height: 28px;
flex: 0 0 auto;
place-items: center;
border: 1px solid var(--paai-border);
border-radius: 50%;
background: #fff;
color: var(--paai-muted);
font-size: 12px;
font-weight: 800;
}
.paai-progress span.is-active,
.paai-progress span.is-done {
border-color: var(--paai-accent);
background: var(--paai-accent);
color: #fff;
}
.paai-progress i {
height: 1px;
flex: 1 1 auto;
background: var(--paai-border);
}
.paai-step {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.paai-step legend {
width: 100%;
margin-bottom: 15px;
color: var(--paai-ink);
font-size: 17px;
font-weight: 800;
}
.paai-plan-intro { margin: -6px 0 16px; color: var(--paai-muted); font-size: 13px; line-height: 1.5; }
.paai-plan-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.paai-plan-option {
position: relative;
display: flex !important;
min-width: 0;
flex-direction: column;
gap: 8px !important;
margin: 0 !important;
border: 1px solid rgba(24,33,28,.13);
border-radius: 16px;
background: #fff;
cursor: pointer;
padding: 15px;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.paai-plan-option:hover,
.paai-plan-option.is-selected { border-color: var(--paai-accent); box-shadow: 0 10px 28px rgba(31,111,84,.10); transform: translateY(-1px); }
.paai-plan-option input,
.paai-duration-option input { position: absolute; opacity: 0; pointer-events: none; }
.paai-plan-option__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.paai-plan-option__top strong { color: var(--paai-ink); font-size: 16px; }
.paai-plan-option__top em { border-radius: 999px; background: #dceee5; color: #1f6f54; font-size: 9px; font-style: normal; font-weight: 800; padding: 5px 7px; text-transform: uppercase; }
.paai-plan-option__tagline { min-height: 32px; color: var(--paai-muted) !important; font-size: 11px !important; font-weight: 550 !important; line-height: 1.4; }
.paai-plan-option > b { color: var(--paai-accent); font-size: 17px; }
.paai-plan-option > b small { color: var(--paai-muted); font-size: 10px; font-weight: 550; }
.paai-plan-option ul { display: grid; gap: 6px; margin: 1px 0 0; padding: 0; list-style: none; }
.paai-plan-option li { color: #46534b; font-size: 10px; line-height: 1.35; }
.paai-plan-option li::before { color: var(--paai-accent); content: "✓ "; font-weight: 900; }
.paai-form-section-title { margin: 22px 0 11px; color: var(--paai-ink); font-size: 14px; }
.paai-duration-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.paai-duration-option {
position: relative;
display: block !important;
margin: 0 !important;
border: 1px solid rgba(24,33,28,.13);
border-radius: 12px;
background: #fff;
cursor: pointer;
padding: 10px 8px;
text-align: center;
}
.paai-duration-option.is-selected { border-color: var(--paai-accent); background: #eaf2ed; }
.paai-duration-option span { font-size: 12px !important; }
.paai-addon-option {
display: flex !important;
align-items: flex-start;
gap: 10px !important;
margin: 13px 0 !important;
border: 1px solid rgba(31,111,84,.22);
border-radius: 13px;
background: rgba(31,111,84,.045);
cursor: pointer;
padding: 12px 13px;
}
.paai-addon-option input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--paai-accent); }
.paai-addon-option > span { display: grid; gap: 3px; }
.paai-addon-option small { color: var(--paai-muted); font-weight: 500; }
.paai-plan-live-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-radius: 14px; background: #18211c; color: #fff; padding: 13px 15px; }
.paai-plan-live-summary > div { display: grid; gap: 3px; }
.paai-plan-live-summary span { color: rgba(255,255,255,.65); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.paai-plan-live-summary strong { font-size: 13px; }
.paai-plan-live-summary > b { color: #8bd9b5; font-size: 20px; }
.paai-ai-helper { display: flex; align-items: center; gap: 12px; margin: 2px 0 14px; }
.paai-ai-button { flex: 0 0 auto; border: 0; border-radius: 999px; background: #e7e5f7; color: #423b79; cursor: pointer; font: 750 12px/1 inherit; padding: 10px 13px; }
.paai-ai-button:disabled { cursor: wait; opacity: .65; }
.paai-ai-helper > span { color: var(--paai-muted); font-size: 11px; font-weight: 500; line-height: 1.4; }
.paai-ai-status { display: none; margin: 0 0 14px; border-radius: 13px; font-size: 12px; padding: 12px; }
.paai-ai-status.is-loading,
.paai-ai-status.is-success,
.paai-ai-status.is-error { display: grid; gap: 9px; }
.paai-ai-status.is-loading { background: #ecebf8; color: #423b79; }
.paai-ai-status.is-success { background: #e7f2eb; color: #205c46; }
.paai-ai-status.is-error { background: #fbe8e5; color: #8b2d20; }
.paai-ai-status p { margin: 0; }
.paai-ai-status small { line-height: 1.45; }
.paai-ai-research-note { border-top: 1px solid rgba(31,111,84,.16); padding-top: 8px; font-style: italic; }
.paai-ai-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.paai-ai-sources strong { margin-right: 2px; font-size: 10px; text-transform: uppercase; }
.paai-ai-sources a { border-radius: 999px; background: #fff; color: #1f5f49; font-size: 10px; padding: 6px 8px; text-decoration: underline; }
.paai-ai-title-options { display: flex; flex-wrap: wrap; gap: 6px; }
.paai-ai-title-options button { border: 1px solid rgba(31,111,84,.28); border-radius: 999px; background: #fff; color: #1f5f49; cursor: pointer; font: 650 11px/1.2 inherit; padding: 8px 10px; }
.paai-ai-title-options button.is-selected { background: #1f6f54; color: #fff; }
.paai-fields {
display: grid;
gap: 15px;
}
.paai-fields--two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.paai-form label:not(.paai-upload):not(.paai-consent):not(.paai-honeypot):not(.paai-plan-option):not(.paai-duration-option):not(.paai-addon-option) {
display: grid;
gap: 7px;
margin-bottom: 15px;
}
.paai-form label > span {
color: #334139;
font-size: 12px;
font-weight: 750;
}
.paai-form input[type="text"],
.paai-form input[type="tel"],
.paai-form input[type="email"],
.paai-form textarea {
width: 100%;
margin: 0;
border: 1px solid rgba(24,33,28,.16);
border-radius: 12px;
background: #fff;
color: var(--paai-ink);
font: 400 15px/1.4 inherit;
padding: 12px 13px;
box-shadow: none;
}
.paai-form textarea {
min-height: 90px;
resize: vertical;
}
.paai-form input:focus,
.paai-form textarea:focus {
border-color: var(--paai-accent);
box-shadow: 0 0 0 3px rgba(31,111,84,.11);
}
.paai-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
margin-top: 19px;
}
.paai-upload {
display: grid;
min-height: 145px;
place-items: center;
align-content: center;
border: 1.5px dashed rgba(31,111,84,.42);
border-radius: 17px;
background: rgba(31,111,84,.045);
cursor: pointer;
padding: 20px;
text-align: center;
}
.paai-upload input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
}
.paai-upload strong {
color: var(--paai-accent);
font-size: 16px;
}
.paai-upload span {
max-width: 470px;
margin-top: 5px;
color: var(--paai-muted) !important;
font-weight: 450 !important;
line-height: 1.45;
}
.paai-previews {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 11px;
}
.paai-previews figure {
position: relative;
width: 68px;
height: 68px;
margin: 0;
overflow: hidden;
border-radius: 11px;
background: #e8ece9;
}
.paai-previews img {
width: 100%;
height: 100%;
object-fit: contain;
background: #eef1ef;
}
.paai-preview-remove {
appearance: none;
position: absolute;
top: 4px;
right: 4px;
display: grid;
width: 23px;
height: 23px;
margin: 0;
place-items: center;
border: 1px solid rgba(255,255,255,.75);
border-radius: 50%;
background: rgba(20,27,23,.82);
color: #fff;
cursor: pointer;
font: 700 16px/1 sans-serif;
padding: 0 0 2px;
}
.paai-preview-remove:hover { background: #8b2d20; }
.paai-consent {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 17px;
color: var(--paai-muted);
font-size: 12px;
line-height: 1.45;
}
.paai-consent input {
width: 17px;
height: 17px;
flex: 0 0 auto;
margin-top: 1px;
accent-color: var(--paai-accent);
}
.paai-consent a {
color: var(--paai-accent);
}
.paai-checkout-summary {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16px;
border-radius: 13px;
background: #eef2ee;
padding: 12px 14px;
}
.paai-checkout-summary span {
color: var(--paai-muted);
font-size: 12px;
font-weight: 750;
text-transform: uppercase;
}
.paai-checkout-summary strong {
color: var(--paai-ink);
font-size: 21px;
}
.paai-form-status {
display: none;
margin-top: 12px;
border-radius: 10px;
font-size: 13px;
padding: 10px 12px;
}
.paai-form-status.is-info,
.paai-form-status.is-error {
display: block;
}
.paai-form-status.is-info { background: #e8f1ec; color: #205c46; }
.paai-form-status.is-error { background: #fbe8e5; color: #8b2d20; }
.paai-submit:disabled {
cursor: wait;
opacity: .65;
}
.paai-payment-note {
display: block;
margin-top: 11px;
color: var(--paai-muted);
font-size: 10px;
line-height: 1.45;
text-align: right;
}
.paai-honeypot {
position: absolute !important;
left: -10000px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
.paai-toast {
position: fixed;
z-index: 1000000;
right: 20px;
bottom: 20px;
display: flex;
width: min(430px, calc(100vw - 40px));
align-items: flex-start;
gap: 10px;
border-radius: 15px;
background: #18211c;
box-shadow: 0 18px 55px rgba(0,0,0,.25);
color: #fff;
font: 600 14px/1.45 system-ui, sans-serif;
padding: 15px;
}
.paai-toast button {
appearance: none;
display: grid;
width: 28px;
min-width: 28px;
height: 28px;
place-items: center;
order: 2;
margin-left: auto;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 50%;
background: rgba(0, 0, 0, .12);
color: inherit;
cursor: pointer;
font: 400 20px/1 Arial, sans-serif;
padding: 0 0 2px;
text-align: center;
transform: none;
}
.paai-toast button:hover { background: rgba(255, 255, 255, .16); }
.paai-toast--success { background: #1d624a; }
.paai-toast--error { background: #8b2d20; }
@media (min-width: 761px) {
.paai-card__media { align-self: stretch; }
.paai-card__body { min-height: 330px; }
}
@media (max-width: 760px) {
.paai-listings {
grid-template-columns: 1fr;
}
.paai-card,
.paai-card.paai-layout-compact,
.paai-card.paai-layout-standard,
.paai-card.paai-layout-featured,
.paai-card.paai-layout-premium,
.paai-card.paai-layout-compact:only-child,
.paai-card.paai-layout-standard:only-child,
.paai-listings[data-count="1"] .paai-card,
.paai-listings[data-count="1"] .paai-card.paai-layout-compact,
.paai-listings[data-count="1"] .paai-card.paai-layout-standard {
grid-template-columns: 1fr;
}
.paai-card__media,
.paai-listings[data-count="1"] .paai-card__media {
min-height: 0;
aspect-ratio: 16 / 10;
}
.paai-zone__header {
align-items: flex-start;
}
.paai-publish-button {
padding: 12px 15px;
white-space: nowrap;
}
.paai-fields--two {
grid-template-columns: 1fr;
gap: 0;
}
.paai-plan-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.paai-modal {
padding: 8px;
}
.paai-modal__panel {
max-height: calc(100vh - 16px);
border-radius: 20px;
}
}
@media (max-width: 520px) {
.paai-zone__header {
display: grid;
}
.paai-publish-button {
width: 100%;
}
.paai-zone__sell {
display: grid;
text-align: center;
}
.paai-card__footer {
align-items: flex-start;
flex-direction: column;
}
.paai-card__cta {
width: 100%;
text-align: center;
}
.paai-card__gallery {
max-width: calc(100% - 102px);
}
.paai-card__thumb {
width: 48px;
height: 48px;
flex-basis: 48px;
}
.paai-card__gallery-arrow {
width: 38px;
height: 38px;
}
.paai-actions {
align-items: stretch;
flex-direction: column-reverse;
}
.paai-actions button {
width: 100%;
}
.paai-plan-picker,
.paai-duration-picker { grid-template-columns: 1fr; }
.paai-ai-helper { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
.paai-card__hero,
.paai-publish-button,
.paai-next,
.paai-submit,
.paai-modal__panel {
animation: none !important;
transition: none !important;
}
}