/**
 * PT Store — Premium Design System
 * Mobile-first · Lightweight · Professional
 *
 * Sections:
 *   1. Variables & Reset
 *   2. Buttons
 *   3. Toast Notifications
 *   4. Store Grid & Filters
 *   5. Product Cards
 *   6. Skeleton Loading
 *   7. Product Detail Page
 *   8. Library
 *   9. Checkout & Receipt
 *  10. Utilities & Animations
 *  11. Responsive
 *  12. Print
 *  13. Accessibility
 */

/* ==========================================================================
   1. VARIABLES & RESET
   ========================================================================== */

:root {
    /* Brand */
    --pt-primary: #2563eb;
    --pt-primary-hover: #1d4ed8;
    --pt-primary-light: #dbeafe;
    --pt-primary-50: #eff6ff;
    --pt-success: #059669;
    --pt-success-light: #d1fae5;
    --pt-danger: #dc2626;
    --pt-danger-light: #fee2e2;
    --pt-warning: #d97706;
    --pt-warning-light: #fef3c7;
    --pt-info: #3730a3;
    --pt-info-light: #e0e7ff;

    /* Neutrals */
    --pt-gray-50: #f8fafc;
    --pt-gray-100: #f1f5f9;
    --pt-gray-200: #e2e8f0;
    --pt-gray-300: #cbd5e1;
    --pt-gray-400: #94a3b8;
    --pt-gray-500: #64748b;
    --pt-gray-600: #475569;
    --pt-gray-700: #334155;
    --pt-gray-800: #1e293b;
    --pt-gray-900: #0f172a;

    /* Surfaces */
    --pt-bg: #ffffff;
    --pt-bg-subtle: var(--pt-gray-50);
    --pt-border: var(--pt-gray-200);
    --pt-border-hover: var(--pt-gray-300);

    /* Radius */
    --pt-radius-sm: 6px;
    --pt-radius: 10px;
    --pt-radius-lg: 14px;
    --pt-radius-xl: 20px;
    --pt-radius-full: 9999px;

    /* Shadows */
    --pt-shadow-xs: 0 1px 2px rgba(0,0,0,.05);
    --pt-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --pt-shadow-md: 0 4px 12px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04);
    --pt-shadow-lg: 0 10px 25px rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.04);
    --pt-shadow-focus: 0 0 0 3px rgba(37, 99, 235, .15);

    /* Transitions */
    --pt-ease: cubic-bezier(.4, 0, .2, 1);
    --pt-duration: .2s;

    /* Typography */
    --pt-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

.pt-store-wrapper,
.pt-library-wrapper,
.pt-product-detail-wrap,
.pt-receipt-wrap {
    line-height: 1.5;
    color: var(--pt-gray-800);
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   2. BUTTONS
   ========================================================================== */

.pt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Padding counts inside the width, so a width:100% button stays inside its
       container instead of overflowing it by the padding. */
    box-sizing: border-box;
    /*
     * Size to the label, not to whatever contains the button.
     *
     * Two separate rules used to decide this width, because neither this rule
     * nor the element itself declared one. student-auth.css also defines a
     * .pt-btn — a full-width form button — and store.css lists it as a
     * dependency, so its width:100% leaked in on every page the store loads.
     * A block theme adds its own: Blocksy stretches every direct child of the
     * post content area to the content width. Either way "Buy ₹10" rendered
     * 750px wide on a desktop post and edge to edge on a phone.
     *
     * Declaring the width here settles it — store.css is last in the cascade —
     * and max-width keeps a long label inside a narrow screen instead of
     * pushing the page sideways. Places that do want a full-width button (the
     * product page and receipt footer on small screens) say so with a more
     * specific selector, so they are unaffected.
     */
    width: auto;
    max-width: 100%;
    padding: 10px 22px;
    border: none;
    border-radius: var(--pt-radius);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--pt-font);
    cursor: pointer;
    transition: all var(--pt-duration) var(--pt-ease);
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}
.pt-btn:active {
    transform: scale(.97);
}
.pt-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

.pt-btn-primary {
    background: var(--pt-primary);
    color: #fff;
    box-shadow: 0 1px 3px rgba(37, 99, 235, .3);
}
.pt-btn-primary:hover {
    background: var(--pt-primary-hover);
    color: #fff;
    box-shadow: 0 3px 8px rgba(37, 99, 235, .35);
    transform: translateY(-1px);
}
.pt-btn-outline {
    background: transparent;
    color: var(--pt-primary);
    border: 1.5px solid var(--pt-primary);
}
.pt-btn-outline:hover {
    background: var(--pt-primary);
    color: #fff;
    transform: translateY(-1px);
}
.pt-btn-buy {
    background: var(--pt-success);
    color: #fff;
    box-shadow: 0 1px 3px rgba(5, 150, 105, .3);
}
.pt-btn-buy:hover {
    background: #047857;
    color: #fff;
    box-shadow: 0 3px 8px rgba(5, 150, 105, .35);
    transform: translateY(-1px);
}
.pt-btn-free {
    background: var(--pt-primary);
    color: #fff;
    box-shadow: 0 1px 3px rgba(37, 99, 235, .3);
}
.pt-btn-free:hover {
    background: var(--pt-primary-hover);
    color: #fff;
}
.pt-btn-owned {
    background: var(--pt-gray-100);
    color: var(--pt-gray-500);
    cursor: default;
    box-shadow: none;
}
.pt-btn-owned:hover {
    transform: none;
    box-shadow: none;
}
.pt-btn-ghost {
    background: transparent;
    color: var(--pt-gray-600);
    padding: 8px 14px;
}
.pt-btn-ghost:hover {
    background: var(--pt-gray-100);
    color: var(--pt-gray-800);
}

.pt-btn-sm,
.pt-btn.pt-btn-sm,
.pt-btn-outline.pt-btn-sm,
.pt-btn-primary.pt-btn-sm {
    padding: 6px 14px;
    font-size: 12px;
    min-width: 72px;
    border-radius: var(--pt-radius-sm);
}
.pt-btn-lg {
    padding: 12px 28px;
    font-size: 15px;
}

/*
 * [pt_buy_button align="…"] — where the button sits in a post.
 *
 * A flex row rather than text-align, so the button stays a flex item sized to
 * its label; "full" is the one case that asks for the column width, and it is
 * more specific than the .pt-btn width: auto above, so it wins.
 */
.pt-buy-wrap {
    display: flex;
}
.pt-buy-wrap--left {
    justify-content: flex-start;
}
.pt-buy-wrap--center {
    justify-content: center;
}
.pt-buy-wrap--right {
    justify-content: flex-end;
}
.pt-buy-wrap--full .pt-btn {
    width: 100%;
}

/* Button loading spinner */
.pt-btn-loading {
    pointer-events: none;
    color: transparent !important;
}
.pt-btn-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pt-spin .6s linear infinite;
}
.pt-btn-outline.pt-btn-loading::after {
    border-color: rgba(37,99,235,.2);
    border-top-color: var(--pt-primary);
}

/* ==========================================================================
   3. TOAST NOTIFICATIONS
   ========================================================================== */

.pt-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.pt-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: var(--pt-radius);
    background: var(--pt-gray-900);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--pt-font);
    box-shadow: var(--pt-shadow-lg);
    pointer-events: auto;
    animation: pt-toast-in .3s var(--pt-ease);
    max-width: 380px;
}
.pt-toast-success { background: #065f46; }
.pt-toast-error   { background: #991b1b; }
.pt-toast-warning { background: #92400e; }
.pt-toast-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}
.pt-toast.pt-toast-out {
    animation: pt-toast-out .25s var(--pt-ease) forwards;
}
@keyframes pt-toast-in {
    from { opacity: 0; transform: translateX(40px) scale(.95); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes pt-toast-out {
    to { opacity: 0; transform: translateX(40px) scale(.95); }
}

/* ==========================================================================
   4. STORE GRID & FILTERS
   ========================================================================== */

.pt-store-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 0;
}

/* Store Header */
.pt-store-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.pt-store-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--pt-gray-900);
    margin: 0;
}
.pt-store-results-count {
    font-size: 14px;
    color: var(--pt-gray-500);
    font-weight: 500;
}

/* Filters */
.pt-store-filters {
    background: var(--pt-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    padding: 16px 20px;
    margin-bottom: 24px;
    transition: box-shadow var(--pt-duration) var(--pt-ease);
}
.pt-store-filters:focus-within {
    box-shadow: var(--pt-shadow-md);
    border-color: var(--pt-border-hover);
}
.pt-store-filters-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
    gap: 10px;
    align-items: center;
}
.pt-store-filter {
    width: 100%;
    padding: 9px 14px;
    border: 1.5px solid var(--pt-border);
    border-radius: var(--pt-radius);
    font-size: 14px;
    font-family: var(--pt-font);
    color: var(--pt-gray-700);
    background: var(--pt-bg);
    min-width: 0;
    transition: border-color var(--pt-duration), box-shadow var(--pt-duration);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    box-sizing: border-box;
}
select.pt-store-filter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.pt-store-filter:focus {
    border-color: var(--pt-primary);
    outline: none;
    box-shadow: var(--pt-shadow-focus);
}
.pt-store-search-wrap {
    position: relative;
    min-width: 0;
    width: 100%;
}
.pt-store-search-wrap input {
    width: 100%;
    padding-left: 36px;
}
.pt-store-search-wrap::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Filter Info Row */
.pt-store-filter-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    flex-wrap: wrap;
    gap: 8px;
}
.pt-store-results-info {
    color: var(--pt-gray-500);
    font-size: 13px;
    font-weight: 500;
}

/* Active Filter Chips */
.pt-store-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pt-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--pt-primary-light);
    color: var(--pt-primary);
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--pt-radius-full);
    cursor: pointer;
    transition: all var(--pt-duration);
    border: none;
    font-family: var(--pt-font);
}
.pt-filter-chip:hover {
    background: var(--pt-primary);
    color: #fff;
}
.pt-filter-chip-x {
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
}
.pt-clear-filters {
    font-size: 12px;
    color: var(--pt-gray-500);
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--pt-font);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.pt-clear-filters:hover {
    color: var(--pt-danger);
}

/* Sort */
.pt-store-sort {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pt-store-sort label {
    font-size: 13px;
    color: var(--pt-gray-500);
    font-weight: 500;
    white-space: nowrap;
}
.pt-store-sort select {
    padding: 6px 28px 6px 10px;
    border: 1.5px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    font-size: 13px;
    font-family: var(--pt-font);
    color: var(--pt-gray-700);
    background: var(--pt-bg);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
}

/* Product Grid */
.pt-store-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ==========================================================================
   5. PRODUCT CARDS
   ========================================================================== */

.pt-product-card {
    background: var(--pt-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    padding: 0;                 /* hero/body/footer own their own padding */
    display: flex;
    flex-direction: column;
    transition: all .25s var(--pt-ease);
    position: relative;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03);
}
.pt-product-card:hover {
    border-color: var(--pt-border-hover);
    box-shadow: var(--pt-shadow-lg);
    transform: translateY(-3px);
}
.pt-product-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ---- HERO (thumbnail image only; no-hero variant when thumbnail missing) ---- */
.pt-product-card-hero {
    position: relative;
    height: 160px;
    border-bottom: 1px solid var(--pt-border);
    background: var(--pt-gray-100);
    overflow: hidden;
}
.pt-product-card-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

/* No-hero variant: card opens directly with the body — tighter, no wasted space.
   Extra right-side padding keeps the status chip from overlapping the mode row. */
.pt-product-card--no-hero .pt-product-card-body {
    padding-top: 18px;
    padding-right: 80px;
}
@media (max-width: 600px) {
    .pt-product-card--no-hero .pt-product-card-body { padding-right: 70px; }
}

/* Single status chip: Owned > Free > Discount. Positioned at card level
   so it sits correctly whether or not a hero is present. */
.pt-card-status-chip {
    position: absolute;
    top: 10px;
    right: 12px;
    padding: 4px 10px;
    border-radius: var(--pt-radius-full, 999px);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.2;
    backdrop-filter: blur(6px);
    background: rgba(255,255,255,.92);
    color: var(--pt-gray-800);
    z-index: 2;
}
.pt-card-status-chip--free {
    background: var(--pt-success);
    color: #fff;
}
.pt-card-status-chip--discount {
    background: var(--pt-danger);
    color: #fff;
}
.pt-card-status-chip--owned {
    background: var(--pt-warning);
    color: #fff;
}

/* ---- BODY ---- */
.pt-product-card-body {
    padding: 14px 20px 12px;
}
.pt-card-mode-row {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--pt-gray-500);
    margin-bottom: 6px;
}
.pt-product-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--pt-gray-900);
    margin: 0 0 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pt-product-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--pt-gray-500);
}
.pt-card-pdf-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 4px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    line-height: 1;
}
.pt-card-pdf-badge svg { display: block; }
.pt-product-card-meta span {
    display: inline-flex;
    align-items: center;
}
.pt-product-card-meta svg {
    display: none;              /* kill any leftover inline icons */
}
.pt-meta-dot {
    color: var(--pt-gray-300);
}

/* ---- FOOTER ---- */
.pt-product-card-footer {
    margin-top: auto;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--pt-gray-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.pt-product-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.pt-product-card-footer .pt-btn,
.pt-product-card-footer .pt-btn-cart-icon,
.pt-product-card-footer a {
    position: relative;
    z-index: 2;
}

/* ---- LEGACY BADGE CLASSES (kept for any admin/library reuse) ---- */
.pt-product-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--pt-radius-sm);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1.4;
}
.pt-badge-exam     { background: var(--pt-primary-light); color: #1e40af; }
.pt-badge-year     { background: var(--pt-info-light);    color: var(--pt-info); }
.pt-badge-mode     { background: var(--pt-gray-100);      color: var(--pt-gray-600); }
.pt-badge-free     { background: var(--pt-success-light); color: #065f46; }
.pt-badge-owned    { background: var(--pt-warning-light); color: #92400e; }
.pt-badge-discount { background: var(--pt-danger-light);  color: var(--pt-danger); }
.pt-badge-refunded { background: #ede9fe;                 color: #6366f1; }

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
    .pt-product-card-hero { height: 140px; }
    .pt-product-card-body { padding: 12px 16px 10px; }
    .pt-product-card-footer { padding: 10px 16px 14px; }
    .pt-card-hero-year { font-size: 26px; }
}
@media (max-width: 600px) {
    .pt-product-card-hero { height: 150px; }
    .pt-product-card-title { font-size: 14px; }
    .pt-product-card-footer { flex-direction: column; align-items: stretch; }
    .pt-product-card-footer .pt-product-price { justify-content: flex-start; }
    .pt-product-card-actions { justify-content: flex-end; width: 100%; }
    .pt-card-status-chip { top: 8px; right: 8px; }
}

/* Price */
.pt-product-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.pt-product-price-current {
    font-size: 18px;
    font-weight: 700;
    color: var(--pt-gray-900);
}
.pt-product-price-mrp {
    font-size: 13px;
    color: var(--pt-gray-400);
    text-decoration: line-through;
}
.pt-product-price-discount {
    font-size: 11px;
    font-weight: 700;
    color: var(--pt-success);
    background: var(--pt-success-light);
    padding: 1px 6px;
    border-radius: var(--pt-radius-full);
}
.pt-product-price-tax {
    font-size: 11px;
    color: var(--pt-gray-400);
    font-weight: 400;
}
.pt-checkout-tax-note {
    margin: 0 20px 14px;
    font-size: 12px;
    color: var(--pt-gray-400);
    text-align: center;
}
.pt-product-price-free {
    font-size: 16px;
    font-weight: 700;
    color: var(--pt-success);
}

/* ==========================================================================
   6. SKELETON LOADING
   ========================================================================== */

.pt-skeleton {
    background: var(--pt-gray-100);
    border-radius: var(--pt-radius-sm);
    position: relative;
    overflow: hidden;
}
.pt-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
    animation: pt-shimmer 1.5s infinite;
}
@keyframes pt-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.pt-skeleton-card {
    background: var(--pt-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    padding: 20px;
}
.pt-skeleton-badge {
    height: 22px;
    width: 60px;
    border-radius: var(--pt-radius-sm);
    display: inline-block;
}
.pt-skeleton-title {
    height: 18px;
    width: 85%;
    margin: 12px 0 6px;
    border-radius: 4px;
}
.pt-skeleton-title-sm {
    height: 14px;
    width: 60%;
    border-radius: 4px;
}
.pt-skeleton-meta {
    height: 14px;
    width: 45%;
    margin: 14px 0;
    border-radius: 4px;
}
.pt-skeleton-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    margin-top: auto;
    border-top: 1px solid var(--pt-gray-100);
}
.pt-skeleton-price {
    height: 22px;
    width: 50px;
    border-radius: 4px;
}
.pt-skeleton-btn {
    height: 34px;
    width: 80px;
    border-radius: var(--pt-radius-sm);
}

/* Spinner (fallback) */
.pt-store-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--pt-gray-400);
}
.pt-store-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--pt-gray-200);
    border-top-color: var(--pt-primary);
    border-radius: 50%;
    margin: 0 auto 12px;
    animation: pt-spin .7s linear infinite;
}
@keyframes pt-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   4b. LOAD MORE & EMPTY STATES
   ========================================================================== */

.pt-store-load-more {
    text-align: center;
    padding: 28px 0;
}

.pt-store-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
}
.pt-store-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: var(--pt-gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pt-store-empty-icon svg {
    width: 28px;
    height: 28px;
    color: var(--pt-gray-400);
}
.pt-store-empty h3 {
    color: var(--pt-gray-700);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px;
}
.pt-store-empty p {
    color: var(--pt-gray-500);
    font-size: 14px;
    margin: 0;
}

/* Login Prompt */
.pt-store-login-prompt {
    text-align: center;
    padding: 50px 20px;
    background: var(--pt-bg-subtle);
    border-radius: var(--pt-radius-lg);
    border: 1px dashed var(--pt-border);
}
.pt-store-login-prompt p {
    color: var(--pt-gray-500);
    margin: 0 0 16px;
    font-size: 15px;
}

/* ==========================================================================
   7. PRODUCT DETAIL PAGE
   ========================================================================== */

.pt-product-detail-wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

/* Breadcrumbs */
.pt-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--pt-gray-500);
    margin-bottom: 24px;
}
.pt-breadcrumbs a {
    color: var(--pt-primary);
    text-decoration: none;
    font-weight: 500;
}
.pt-breadcrumbs a:hover {
    text-decoration: underline;
}
.pt-breadcrumbs-sep {
    color: var(--pt-gray-300);
}

/* Product Description (Content Hub) */
.pt-product-description {
    padding: 8px 0 0;
}
.pt-product-section-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--pt-gray-800);
}


/* Rich-text body — paragraphs, headings, lists, tables, etc. */
.pt-product-description-body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--pt-gray-700);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.pt-product-description-body p { margin: 0 0 12px; }
.pt-product-description-body p:last-child { margin-bottom: 0; }

.pt-product-description-body h2,
.pt-product-description-body h3,
.pt-product-description-body h4,
.pt-product-description-body h5,
.pt-product-description-body h6 {
    margin: 20px 0 8px;
    color: var(--pt-gray-900);
    font-weight: 700;
    line-height: 1.35;
}
.pt-product-description-body h2 { font-size: 17px; }
.pt-product-description-body h3 { font-size: 15px; }
.pt-product-description-body h4 { font-size: 14px; }
.pt-product-description-body h5,
.pt-product-description-body h6 { font-size: 13px; }

.pt-product-description-body ul,
.pt-product-description-body ol { margin: 0 0 12px 22px; padding: 0; }
.pt-product-description-body ul { list-style: disc; }
.pt-product-description-body ol { list-style: decimal; }
.pt-product-description-body li { margin-bottom: 4px; }
.pt-product-description-body li > ul,
.pt-product-description-body li > ol { margin-top: 4px; margin-bottom: 0; }

.pt-product-description-body a {
    color: var(--pt-primary);
    text-decoration: underline;
}
.pt-product-description-body a:hover { color: var(--pt-primary-hover, var(--pt-primary)); }

.pt-product-description-body strong { color: var(--pt-gray-900); font-weight: 700; }
.pt-product-description-body em     { font-style: italic; }
.pt-product-description-body code   {
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 13px;
    background: var(--pt-gray-100);
    padding: 1px 6px;
    border-radius: 4px;
}
.pt-product-description-body pre {
    background: var(--pt-gray-100);
    padding: 10px 12px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0 0 12px;
}
.pt-product-description-body pre code {
    background: transparent;
    padding: 0;
    font-size: 13px;
}
.pt-product-description-body blockquote {
    margin: 12px 0;
    padding: 8px 14px;
    border-left: 3px solid var(--pt-primary);
    color: var(--pt-gray-600);
    background: var(--pt-gray-50, var(--pt-gray-100));
}
.pt-product-description-body hr {
    border: 0;
    border-top: 1px solid var(--pt-border);
    margin: 16px 0;
}

/* Tables — full width, bordered, striped */
.pt-product-description-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 14px;
    font-size: 13px;
    background: #fff;
}
.pt-product-description-body th,
.pt-product-description-body td {
    padding: 8px 12px;
    border: 1px solid var(--pt-border);
    text-align: left;
    vertical-align: top;
}
.pt-product-description-body thead th {
    background: var(--pt-gray-100);
    font-weight: 700;
    color: var(--pt-gray-800);
}
.pt-product-description-body tbody tr:nth-child(even) {
    background: var(--pt-gray-50, #f9fafb);
}

@media (max-width: 600px) {
    .pt-product-description-body table { font-size: 12px; min-width: 480px; }
}

/* Share / Actions */
.pt-product-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
}
.pt-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-full);
    font-size: 12px;
    font-weight: 500;
    color: var(--pt-gray-600);
    background: var(--pt-bg);
    cursor: pointer;
    transition: all var(--pt-duration);
    font-family: var(--pt-font);
}
.pt-share-btn:hover {
    background: var(--pt-gray-100);
    border-color: var(--pt-border-hover);
}
.pt-share-btn svg {
    width: 14px;
    height: 14px;
}

/* Related Papers */
.pt-related-section {
    margin-top: 32px;
    background: #fff;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    padding: 24px 28px;
    box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03);
}
.pt-related-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--pt-gray-800);
    margin: 0 0 18px;
}
.pt-related-section-icon {
    width: 22px;
    height: 22px;
    color: var(--pt-primary, #2271b1);
    flex-shrink: 0;
}

/* Product Not Found */
.pt-product-not-found {
    text-align: center;
    padding: 60px 20px;
}
.pt-product-not-found-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: var(--pt-gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pt-product-not-found h2 {
    font-size: 20px;
    color: var(--pt-gray-700);
    margin: 0 0 8px;
}
.pt-product-not-found p {
    color: var(--pt-gray-500);
    margin: 0 0 20px;
}

/* ==========================================================================
   8. LIBRARY
   ========================================================================== */

.pt-library-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 0;
}

/* Library Header */
.pt-library-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}
.pt-library-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--pt-gray-900);
    margin: 0;
}
.pt-library-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: var(--pt-primary-light);
    color: var(--pt-primary);
    border-radius: var(--pt-radius-full);
    font-size: 13px;
    font-weight: 600;
}

/* Library Controls */
.pt-library-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
input.pt-library-search.pt-input {
    padding-left: 38px !important;
}
.pt-library-search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 400px;
}
.pt-library-search-wrap::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}

/* Library Grid */
.pt-library-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Library Card */
.pt-library-card {
    background: var(--pt-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: all .25s var(--pt-ease);
}
.pt-library-card:hover {
    border-color: var(--pt-border-hover);
    box-shadow: var(--pt-shadow-md);
}
.pt-library-card-header {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.pt-library-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--pt-radius-sm);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.pt-library-badge-exam {
    background: var(--pt-primary-light);
    color: #1e40af;
}
.pt-library-badge-year {
    background: var(--pt-info-light);
    color: var(--pt-info);
}
.pt-library-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--pt-gray-800);
    margin: 0 0 8px;
    line-height: 1.4;
}
.pt-library-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--pt-gray-500);
    margin-bottom: 16px;
}
.pt-library-card-meta svg {
    width: 13px;
    height: 13px;
    opacity: .6;
}
.pt-library-card-actions {
    margin-top: auto;
    display: flex;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--pt-gray-100);
    flex-wrap: wrap;
}

/* Library Empty State */
.pt-library-empty {
    text-align: center;
    padding: 60px 24px;
    background: var(--pt-bg-subtle);
    border: 1px dashed var(--pt-border);
    border-radius: var(--pt-radius-lg);
}
.pt-library-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    background: var(--pt-gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pt-library-empty-icon svg {
    width: 36px;
    height: 36px;
    color: var(--pt-gray-400);
    stroke: var(--pt-gray-400);
}
.pt-library-empty h3 {
    font-size: 18px;
    color: var(--pt-gray-700);
    margin: 0 0 8px;
    font-weight: 600;
}
.pt-library-empty p {
    color: var(--pt-gray-500);
    margin: 0 0 20px;
    font-size: 14px;
}

/* ==========================================================================
   9. CHECKOUT & RECEIPT
   ========================================================================== */

/* Checkout Result */
.pt-checkout-result {
    text-align: center;
    padding: 60px 20px;
    max-width: 500px;
    margin: 0 auto;
}
.pt-checkout-result-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pt-pop .4s var(--pt-ease);
}
.pt-checkout-result-icon.success {
    background: var(--pt-success-light);
}
.pt-checkout-result-icon.error {
    background: var(--pt-danger-light);
}
.pt-checkout-result h2 {
    font-size: 22px;
    margin: 0 0 8px;
}
.pt-checkout-result p {
    color: var(--pt-gray-500);
    margin: 0 0 20px;
}

/* Receipt */
.pt-receipt-wrap {
    max-width: 680px;
    margin: 0 auto;
    padding: 30px 20px 60px;
}
.pt-receipt {
    background: var(--pt-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    overflow: hidden;
}
.pt-receipt-header {
    text-align: center;
    padding: 28px 24px 24px;
    background: var(--pt-bg-subtle);
    border-bottom: 1px solid var(--pt-border);
}
.pt-receipt-status-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pt-pop .4s var(--pt-ease);
}
.pt-receipt-status-icon.success {
    background: var(--pt-success-light);
}
.pt-receipt-status-icon.pending {
    background: var(--pt-warning-light);
}
.pt-receipt-status-icon.failed {
    background: var(--pt-danger-light);
}
.pt-receipt-status-icon.refunded {
    background: #ede9fe;
}
.pt-receipt-status-icon svg {
    width: 28px;
    height: 28px;
}
.pt-receipt-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px;
}
.pt-receipt-title.success  { color: var(--pt-success); }
.pt-receipt-title.pending  { color: var(--pt-warning); }
.pt-receipt-title.failed   { color: var(--pt-danger); }
.pt-receipt-title.refunded { color: #6366f1; }
.pt-receipt-order-id {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pt-gray-500);
    font-size: 14px;
    margin-top: 4px;
}
.pt-receipt-order-id code {
    font-weight: 600;
    color: var(--pt-gray-700);
    background: var(--pt-bg);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 13px;
}

/* Copy Button */
.pt-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--pt-gray-400);
    transition: color var(--pt-duration);
    border-radius: 4px;
}
.pt-copy-btn:hover {
    color: var(--pt-primary);
}
.pt-copy-btn svg {
    width: 14px;
    height: 14px;
}

/* Receipt Body */
.pt-receipt-body {
    padding: 24px;
}
.pt-receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 14px;
}
.pt-receipt-row + .pt-receipt-row {
    border-top: 1px solid var(--pt-gray-100);
}
.pt-receipt-row-label {
    color: var(--pt-gray-500);
}
.pt-receipt-row-value {
    font-weight: 600;
    color: var(--pt-gray-800);
    text-align: right;
}
.pt-receipt-items-title {
    font-size: 11px;
    color: var(--pt-gray-400);
    margin: 20px 0 8px;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 700;
}
.pt-receipt-total {
    border-top: 2px solid var(--pt-gray-200) !important;
    margin-top: 8px;
    padding-top: 14px !important;
}
.pt-receipt-total .pt-receipt-row-label {
    font-weight: 700;
    color: var(--pt-gray-800);
    font-size: 15px;
}
.pt-receipt-total .pt-receipt-row-value {
    font-size: 20px;
    color: var(--pt-gray-900);
}

/* Receipt Footer */
.pt-receipt-footer {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px 24px 24px;
    border-top: 1px solid var(--pt-border);
    background: var(--pt-bg-subtle);
}

/* ==========================================================================
   9b. DELIVERY PREFERENCE
   ========================================================================== */

/* Receipt page — full section */
.pt-delivery-pref-section {
    padding: 20px 24px;
    border-top: 1px solid var(--pt-border);
}
.pt-delivery-pref-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--pt-gray-800);
    margin: 0 0 4px;
}
.pt-delivery-pref-title svg { color: var(--pt-gray-400); }
.pt-delivery-pref-desc {
    font-size: 13px;
    color: var(--pt-gray-500);
    margin: 0 0 14px;
}

/* Channel selector buttons */
.pt-delivery-channels {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.pt-delivery-channel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 20px;
    border: 2px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    background: var(--pt-bg);
    cursor: pointer;
    transition: all var(--pt-duration) var(--pt-ease);
    font-family: var(--pt-font);
    position: relative;
    min-width: 100px;
}
.pt-delivery-channel:hover:not(:disabled) {
    border-color: var(--pt-border-hover);
    background: var(--pt-bg-subtle);
}
.pt-delivery-channel.active {
    border-color: var(--pt-primary);
    background: var(--pt-primary-light);
}
.pt-delivery-channel:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.pt-delivery-channel-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pt-delivery-channel-icon svg { color: var(--pt-gray-500); }
.pt-delivery-channel.active .pt-delivery-channel-icon svg { color: var(--pt-primary); }
.pt-delivery-channel-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-gray-700);
}
.pt-delivery-channel-detail {
    font-size: 11px;
    color: var(--pt-gray-400);
}
.pt-delivery-channel-link-hint {
    font-size: 10px;
    color: var(--pt-warning);
    font-weight: 600;
}
.pt-delivery-channel-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    background: var(--pt-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pt-delivery-channel-check svg { color: #fff; }

/* Library page — inline bar */
.pt-delivery-pref-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--pt-bg-subtle);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.pt-delivery-pref-bar-left {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--pt-gray-600);
    white-space: nowrap;
}
.pt-delivery-pref-bar-left svg { color: var(--pt-gray-400); }
.pt-delivery-channels-inline {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.pt-delivery-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    border: 1.5px solid var(--pt-border);
    border-radius: var(--pt-radius-full);
    background: var(--pt-bg);
    font-size: 13px;
    font-weight: 500;
    color: var(--pt-gray-600);
    cursor: pointer;
    transition: all var(--pt-duration);
    font-family: var(--pt-font);
}
.pt-delivery-chip:hover:not(:disabled) {
    border-color: var(--pt-border-hover);
    background: var(--pt-gray-100);
}
.pt-delivery-chip.active {
    background: var(--pt-primary);
    color: #fff;
    border-color: var(--pt-primary);
}
.pt-delivery-chip:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.pt-delivery-link-btn {
    border-style: dashed;
    color: var(--pt-primary);
    font-weight: 600;
}
.pt-delivery-link-btn:hover {
    background: var(--pt-primary-light);
    border-color: var(--pt-primary);
}

/* Resend button area */
.pt-delivery-resend {
    text-align: left;
}

/* ==========================================================================
   9c. CHECKOUT PAGE
   ========================================================================== */

.pt-checkout-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 30px 20px 60px;
}
.pt-checkout {
    animation: pt-fade-in .3s var(--pt-ease);
}
.pt-checkout-heading {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 24px;
    color: var(--pt-gray-900);
}

/* Layout: form left, summary right */
.pt-checkout-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    align-items: flex-start;
}

/* Form section */
.pt-checkout-form-section {
    min-width: 0;
}
.pt-checkout-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.pt-checkout-section {
    background: var(--pt-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    padding: 20px;
}
.pt-checkout-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--pt-gray-800);
    margin: 0 0 16px;
}
.pt-checkout-section-title svg {
    color: var(--pt-gray-400);
    flex-shrink: 0;
}

/* Login hint */
.pt-checkout-login-hint {
    font-size: 13px;
    color: var(--pt-gray-500);
    margin-bottom: 16px;
    padding: 10px 14px;
    background: var(--pt-primary-50);
    border-radius: var(--pt-radius);
    border: 1px solid var(--pt-primary-light);
}
.pt-checkout-login-hint a {
    color: var(--pt-primary);
    font-weight: 600;
    text-decoration: none;
}
.pt-checkout-login-hint a:hover {
    text-decoration: underline;
}

/* Form groups */
.pt-form-group {
    margin-bottom: 16px;
}
.pt-form-group:last-child {
    margin-bottom: 0;
}
.pt-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-gray-700);
    margin-bottom: 6px;
}
.pt-required {
    color: var(--pt-danger);
}
.pt-form-group input[type="text"],
.pt-form-group input[type="email"],
.pt-form-group input[type="tel"] {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-family: var(--pt-font);
    border: 1.5px solid var(--pt-border);
    border-radius: var(--pt-radius);
    background: var(--pt-bg);
    color: var(--pt-gray-900);
    transition: border-color var(--pt-duration), box-shadow var(--pt-duration);
    box-sizing: border-box;
}
.pt-form-group input:focus {
    outline: none;
    border-color: var(--pt-primary);
    box-shadow: 0 0 0 3px var(--pt-primary-light);
}
.pt-form-group input[readonly] {
    background: var(--pt-bg-subtle);
    color: var(--pt-gray-500);
    cursor: not-allowed;
}
.pt-form-group small {
    display: block;
    font-size: 12px;
    color: var(--pt-gray-400);
    margin-top: 4px;
}

/* Payment gateway selector */
.pt-checkout-gateways {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pt-checkout-gateway-option {
    display: block;
    cursor: pointer;
}
.pt-checkout-gateway-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.pt-checkout-gateway-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 2px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    background: var(--pt-bg);
    transition: all var(--pt-duration);
}
.pt-checkout-gateway-option input:checked + .pt-checkout-gateway-card {
    border-color: var(--pt-primary);
    background: var(--pt-primary-50);
}
.pt-checkout-gateway-card:hover {
    border-color: var(--pt-border-hover);
}
.pt-checkout-gateway-info strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--pt-gray-800);
    margin-bottom: 2px;
}
.pt-checkout-gateway-info span {
    font-size: 12px;
    color: var(--pt-gray-500);
}

/* Submit button */
.pt-checkout-submit-btn {
    width: 100%;
    font-size: 16px;
    padding: 14px 24px;
}
.pt-checkout-submit-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* Order summary sidebar */
.pt-checkout-summary-section {
    position: sticky;
    top: 30px;
}
.pt-checkout-summary {
    background: var(--pt-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    overflow: hidden;
}
.pt-checkout-summary-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pt-gray-800);
    margin: 0;
    padding: 18px 20px;
    border-bottom: 1px solid var(--pt-border);
    background: var(--pt-bg-subtle);
}

/* Product card inside summary */
.pt-checkout-product {
    padding: 18px 20px;
}
.pt-checkout-product-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.pt-checkout-product-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--pt-gray-900);
    margin: 0 0 10px;
    line-height: 1.4;
}
.pt-checkout-product-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--pt-gray-500);
}
.pt-checkout-product-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Summary total row */
.pt-checkout-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    font-size: 14px;
}
.pt-checkout-summary-total {
    border-top: 1px solid var(--pt-border);
    font-weight: 700;
    font-size: 16px;
    color: var(--pt-gray-900);
}
.pt-checkout-summary-price {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Discount badge */
.pt-checkout-discount-badge {
    margin: 0 20px 14px;
    padding: 8px 14px;
    background: #d1fae5;
    color: #065f46;
    border-radius: var(--pt-radius);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

/* Secure note */
.pt-checkout-secure-note {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    padding: 12px 20px;
    border-top: 1px solid var(--pt-border);
    font-size: 12px;
    color: var(--pt-gray-400);
    background: var(--pt-bg-subtle);
}
.pt-checkout-secure-note svg {
    flex-shrink: 0;
    color: var(--pt-gray-400);
}

/* Receipt download section */
.pt-receipt-downloads {
    padding: 20px 24px;
    border-top: 1px solid var(--pt-border);
}
.pt-receipt-downloads-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--pt-gray-800);
    margin: 0 0 12px;
}
.pt-receipt-downloads-title svg {
    color: var(--pt-gray-400);
}
.pt-receipt-download-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--pt-bg-subtle);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius);
    margin-bottom: 8px;
}
.pt-receipt-download-item:last-child {
    margin-bottom: 0;
}
.pt-receipt-download-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.pt-receipt-download-info svg {
    flex-shrink: 0;
    color: var(--pt-gray-400);
}
.pt-receipt-download-info span {
    font-size: 13px;
    font-weight: 500;
    color: var(--pt-gray-700);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pt-receipt-download-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--pt-gray-700);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   10. UTILITIES & ANIMATIONS
   ========================================================================== */

@keyframes pt-pop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes pt-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pt-fade-in {
    animation: pt-fade-in .3s var(--pt-ease);
}

/* Scroll to top button */
.pt-scroll-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pt-gray-800);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--pt-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: all .25s var(--pt-ease);
    z-index: 999;
}
.pt-scroll-top.visible {
    opacity: 1;
    visibility: visible;
}
.pt-scroll-top:hover {
    background: var(--pt-primary);
    transform: translateY(-2px);
}
.pt-scroll-top svg {
    width: 18px;
    height: 18px;
}

/* Divider */
.pt-divider {
    border: none;
    border-top: 1px solid var(--pt-border);
    margin: 20px 0;
}

/* Transaction ID mono */
.pt-mono {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 12px;
    letter-spacing: .2px;
}

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
    .pt-store-grid,
    .pt-library-grid { grid-template-columns: repeat(2, 1fr); }
    .pt-store-filters-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .pt-store-search-wrap { grid-column: 1 / -1; }
    .pt-checkout-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .pt-checkout-summary-section {
        position: static;
        order: -1;
    }
}

@media (max-width: 600px) {
    .pt-store-grid,
    .pt-library-grid { grid-template-columns: 1fr; }

    .pt-store-filters-row { grid-template-columns: 1fr; }
    .pt-store-search-wrap { grid-column: auto; }
    .pt-store-header { flex-direction: column; align-items: flex-start; }
    .pt-store-filter-info { flex-direction: column; }


    .pt-checkout-wrap { padding: 20px 16px 40px; }
    .pt-checkout-heading { font-size: 20px; }
    .pt-checkout-section { padding: 16px; }
    .pt-checkout-summary-title { padding: 14px 16px; }
    .pt-checkout-product { padding: 14px 16px; }
    .pt-checkout-summary-row { padding: 12px 16px; }
    .pt-checkout-secure-note { padding: 10px 16px; }

    .pt-receipt-footer { flex-direction: column; }
    .pt-receipt-footer .pt-btn { width: 100%; }

    .pt-delivery-channels { flex-direction: column; }
    .pt-delivery-channel { flex-direction: row; min-width: 0; padding: 12px 16px; }
    .pt-delivery-pref-bar { flex-direction: column; align-items: flex-start; }

    .pt-library-header { flex-direction: column; align-items: flex-start; }
    .pt-library-controls { flex-direction: column; }
    .pt-library-search-wrap { max-width: 100%; }

    .pt-toast-container { top: 10px; right: 10px; left: 10px; }
    .pt-toast { max-width: 100%; }
}

/* ==========================================================================
   12. PRINT
   ========================================================================== */

@media print {
    .pt-receipt-footer,
    .pt-receipt-downloads,
    .pt-delivery-pref-section,
    .pt-delivery-pref-bar,
    .pt-scroll-top,
    .pt-toast-container { display: none !important; }

    .pt-receipt-wrap { padding: 0; }
    .pt-receipt {
        border: none;
        box-shadow: none;
    }
    .pt-receipt-header {
        background: none;
        border-bottom: 2px solid #000;
    }
    .pt-receipt-status-icon { display: none; }
    .pt-receipt-title { color: #000 !important; }
    .pt-receipt-total { border-top: 2px solid #000 !important; }
}

/* ==========================================================================
   13. ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

.pt-btn:focus-visible,
.pt-store-filter:focus-visible,
.pt-share-btn:focus-visible,
.pt-copy-btn:focus-visible,
.pt-filter-chip:focus-visible,
.pt-checkout-gateway-option input:focus-visible + .pt-checkout-gateway-card {
    outline: 2px solid var(--pt-primary);
    outline-offset: 2px;
}

/* Visually hidden (sr-only) */
.pt-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ================================================================
   11. TOUCH FEEDBACK
   ================================================================ */

/* Active states for buttons */
.pt-btn-buy:active,
.pt-btn-free:active {
    transform: scale(0.96);
}
.pt-card:active {
    transform: scale(0.985);
}
.pt-filter-chip:active {
    transform: scale(0.95);
}

/* Prevent sticky hover on touch devices */
@media (hover: none) {
    .pt-card:hover {
        transform: none;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }
    .pt-btn-buy:hover,
    .pt-btn-free:hover {
        filter: none;
    }
}

/* ==========================================================================
   15. GATEWAY SELECTOR MODAL
   ========================================================================== */

.pt-gateway-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: pt-fade-overlay .2s ease;
}
@keyframes pt-fade-overlay {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.pt-gateway-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: pt-slide-up .25s ease;
    overflow: hidden;
}
@keyframes pt-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pt-gateway-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--pt-border);
}
.pt-gateway-header h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--pt-text);
    margin: 0;
}
.pt-gateway-close {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--pt-muted);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.pt-gateway-close:hover { color: var(--pt-text); }

.pt-gateway-options {
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pt-gateway-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1.5px solid var(--pt-border);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: all .15s;
    text-align: left;
    width: 100%;
}
.pt-gateway-option:hover {
    border-color: var(--pt-primary);
    background: var(--pt-primary-50);
}
.pt-gw-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--pt-primary-light);
    color: var(--pt-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pt-gw-info {
    flex: 1;
    min-width: 0;
}
.pt-gw-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--pt-text);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pt-gw-desc {
    font-size: 12px;
    color: var(--pt-muted);
    margin-top: 2px;
}
.pt-gw-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.pt-gw-badge-instant {
    background: #d1fae5;
    color: #065f46;
}
.pt-gw-badge-manual {
    background: #fef3c7;
    color: #92400e;
}
.pt-gw-arrow {
    flex-shrink: 0;
    color: var(--pt-muted);
}

/* ==========================================================================
   16. MANUAL UPI FLOW MODAL
   ========================================================================== */

.pt-upi-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: pt-fade-overlay .2s ease;
}
/*
 * The modal is the scroll container, not the overlay. Scrolling the overlay
 * took the header and the primary button off screen on a phone, so the buyer
 * met a QR code, three detail rows and a paragraph of rules before finding
 * anything to press. Now the amount stays pinned at the top, the action stays
 * pinned at the bottom, and only the middle moves.
 */
.pt-upi-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 440px;
    max-height: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    animation: pt-slide-up .25s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.pt-upi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--pt-border);
    flex-shrink: 0;
}
.pt-upi-header h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--pt-text);
    margin: 0;
}
.pt-upi-header .pt-upi-close {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--pt-muted);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    min-height: 32px;
    min-width: 32px;
}

.pt-upi-step {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}
.pt-upi-step.pt-upi-hidden { display: none; }
/* Inside the modal the proof form is the flex column, so its footer pins too.
   The receipt page renders the same form as a plain block; leave that alone. */
.pt-upi-modal .pt-upi-proof-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}
.pt-upi-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px;
    flex: 1;
    min-height: 0;
}
.pt-upi-footer {
    flex-shrink: 0;
    padding: 12px 20px;
    border-top: 1px solid var(--pt-border);
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pt-upi-footer .pt-btn { width: 100%; }

/* Amount: pinned, because a static payee QR carries no amount and the buyer
   types it in by hand. */
.pt-upi-amount-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--pt-primary-50);
    border-bottom: 1px solid var(--pt-primary-light);
    padding: 12px 20px;
    flex-shrink: 0;
}
.pt-upi-amount-bar span {
    font-size: 13px;
    color: var(--pt-muted);
    margin-right: auto;
}
.pt-upi-amount-bar strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--pt-primary);
}
.pt-upi-amount-bar--plain {
    background: var(--pt-bg);
    border-bottom-color: var(--pt-border);
}
.pt-upi-amount-bar--plain strong {
    font-size: 15px;
    font-family: var(--pt-mono);
    color: var(--pt-text);
}

.pt-upi-product-name {
    font-size: 13px;
    color: var(--pt-muted);
    margin: 0 0 14px;
    text-align: center;
}

.pt-upi-steps {
    margin: 0 0 16px;
    padding-left: 22px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--pt-text);
}
.pt-upi-steps li { margin-bottom: 4px; }

.pt-upi-qr-block {
    text-align: center;
    margin-bottom: 16px;
}
.pt-upi-qr {
    width: 190px;
    max-width: 100%;
    border-radius: 12px;
    border: 1px solid var(--pt-border);
}
.pt-upi-qr-save {
    /* flex, not inline-flex: beside the QR it read as part of the image. */
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 10px auto 0;
    padding: 8px 16px;
    min-height: 40px;
    border: 1px solid var(--pt-border);
    border-radius: 8px;
    background: #fff;
    color: var(--pt-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.pt-upi-qr-save:hover {
    border-color: var(--pt-primary);
    color: var(--pt-primary);
    text-decoration: none;
}
.pt-upi-qr-note {
    font-size: 12px;
    color: var(--pt-muted);
    margin: 10px 0 0;
    line-height: 1.5;
}
.pt-upi-qr-hint {
    font-size: 11.5px;
    color: var(--pt-muted);
    margin: 4px 0 0;
}
.pt-upi-later {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--pt-border);
}

.pt-upi-details {
    border: 1px solid var(--pt-border);
    border-radius: 10px;
    padding: 4px 14px;
    margin-bottom: 8px;
}
.pt-upi-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--pt-border);
}
.pt-upi-detail:last-child { border-bottom: none; }
.pt-upi-detail-label {
    font-size: 12px;
    color: var(--pt-muted);
    flex-shrink: 0;
}
.pt-upi-detail-value {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--pt-text);
    margin-left: auto;
    min-width: 0;
}
.pt-upi-detail-value code {
    font-family: var(--pt-mono);
    background: var(--pt-bg);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 13px;
    user-select: all;
    overflow-wrap: anywhere;
}
.pt-copy-btn {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--pt-muted);
    transition: color .15s;
    flex-shrink: 0;
    line-height: 0;
}
.pt-copy-btn:hover { color: var(--pt-primary); }
.pt-copy-btn.pt-copied { color: var(--pt-success); }
.pt-copy-btn.pt-copy-failed { color: var(--pt-danger); }

.pt-upi-hint {
    font-size: 12px;
    color: var(--pt-muted);
    margin: 0 0 14px;
    line-height: 1.5;
}
.pt-upi-note-manual {
    font-size: 12.5px;
    color: var(--pt-muted);
    margin: 0;
    line-height: 1.6;
}
.pt-upi-optional {
    font-weight: 400;
    color: var(--pt-muted);
}

.pt-upi-instructions {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #92400e;
    margin-bottom: 14px;
    line-height: 1.55;
}

/* Step 3 — what happens next, instead of a toast and a vanished modal. */
.pt-upi-done-body {
    text-align: center;
    padding-top: 28px;
    padding-bottom: 24px;
}
.pt-upi-done-tick {
    width: 62px;
    height: 62px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pt-upi-done-body h4 {
    font-size: 17px;
    font-weight: 700;
    color: var(--pt-text);
    margin: 0 0 6px;
}
.pt-upi-done-body p {
    font-size: 13.5px;
    color: var(--pt-muted);
    margin: 0 0 8px;
    line-height: 1.6;
}
.pt-upi-done-order {
    font-family: var(--pt-mono);
    font-size: 13px;
}

.pt-upi-next-btn {
    width: 100%;
    margin-top: 4px;
}

/* Proof form */
.pt-upi-proof-form,
.pt-receipt-manual-proof-form form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pt-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pt-form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-text);
}
.pt-required {
    color: #dc2626;
}
.pt-form-group input[type="text"],
.pt-form-group textarea {
    padding: 10px 12px;
    border: 1.5px solid var(--pt-border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color .15s;
}
.pt-form-group input[type="text"]:focus,
.pt-form-group textarea:focus {
    border-color: var(--pt-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.pt-form-group small {
    font-size: 11px;
    color: var(--pt-muted);
}

/* File drop zone */
.pt-upi-file-drop {
    position: relative;
    border: 2px dashed var(--pt-border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .15s;
}
.pt-upi-file-drop:hover {
    border-color: var(--pt-primary);
}
.pt-upi-file-drop input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.pt-upi-file-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px;
    color: var(--pt-muted);
    text-align: center;
}
.pt-upi-file-label span {
    font-size: 13px;
}
.pt-upi-file-label small {
    font-size: 11px;
}
.pt-upi-file-preview {
    position: relative;
    padding: 8px;
}
.pt-upi-file-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 6px;
    display: block;
    margin: 0 auto;
}
.pt-upi-file-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.pt-upi-submit-btn {
    width: 100%;
}
.pt-upi-back-btn {
    width: 100%;
    background: transparent;
    color: var(--pt-muted);
}

/* ==========================================================================
   17. PENDING APPROVAL BUTTON
   ========================================================================== */

.pt-btn-pending {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    cursor: default;
    font-weight: 600;
    font-size: 12px;
}

/* ==========================================================================
   18. RECEIPT — MANUAL UPI SECTIONS
   ========================================================================== */

.pt-receipt-manual-section {
    padding: 20px 24px;
    border-bottom: 1px solid var(--pt-border);
}
.pt-receipt-manual-amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--pt-primary-50);
    border: 1px solid var(--pt-primary-light);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.pt-receipt-manual-amount span {
    font-size: 13px;
    color: var(--pt-muted);
}
.pt-receipt-manual-amount strong {
    font-size: 20px;
    font-weight: 700;
    color: var(--pt-primary);
}
.pt-receipt-manual-info {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}
.pt-receipt-manual-qr {
    max-width: 140px;
    border-radius: 10px;
    border: 1px solid var(--pt-border);
}
.pt-receipt-manual-details {
    flex: 1;
}
.pt-receipt-manual-instructions {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #92400e;
    margin-bottom: 16px;
    line-height: 1.5;
}
.pt-receipt-manual-proof-form {
    margin-top: 16px;
}
.pt-receipt-manual-proof-form h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--pt-text);
}
.pt-receipt-manual-status-msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 10px;
    margin-bottom: 14px;
}
.pt-receipt-manual-review .pt-receipt-manual-status-msg {
    background: #fffbeb;
    border: 1px solid #fde68a;
}
.pt-receipt-manual-rejected .pt-receipt-manual-status-msg {
    background: #fef2f2;
    border: 1px solid #fecaca;
}
.pt-receipt-manual-status-msg p {
    margin: 0;
    font-size: 14px;
    color: var(--pt-text);
    line-height: 1.5;
}
.pt-receipt-manual-status-msg svg {
    flex-shrink: 0;
    margin-top: 2px;
}
.pt-receipt-manual-retry {
    font-size: 13px;
    color: var(--pt-muted);
    margin-top: 12px;
    line-height: 1.5;
}
.pt-receipt-manual-retry a {
    color: var(--pt-primary);
    text-decoration: none;
}
.pt-receipt-manual-retry a:hover {
    text-decoration: underline;
}

/* Open UPI App button */
.pt-btn-upi-open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px;
    min-height: 48px;
    background: #5f259f;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s;
    margin-bottom: 14px;
}
.pt-btn-upi-open:hover {
    background: #4a1d7a;
    color: #fff;
    text-decoration: none;
}
/*
 * Hide the UPI app button where there is no UPI app to open.
 *
 * This was keyed on a 769px viewport, which is not the same question. A phone
 * set to "Request desktop site" reports 980px and lost the one button that
 * works there — the QR cannot be scanned by the screen showing it, so that
 * left no way to pay at all. A fine pointer with hover is a mouse, and a
 * machine with a mouse is the one that has no UPI app.
 */
@media (hover: hover) and (pointer: fine) {
    .pt-btn-upi-open {
        display: none;
    }
}

/* ==========================================================================
   19. SETTINGS SUB-TABS
   ========================================================================== */

.pt-store-subtabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 16px;
}
.pt-store-subtab {
    padding: 8px 16px;
    cursor: pointer;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    color: #50575e;
    font-weight: 500;
    transition: all .15s;
}
.pt-store-subtab:hover {
    color: var(--pt-primary);
}
.pt-store-subtab.active {
    border-bottom-color: var(--pt-primary);
    color: var(--pt-primary);
    font-weight: 600;
}

/* ==========================================================================
   14. CART PAGE
   ========================================================================== */

/* Wrap */
.pt-cart-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    min-height: 50vh;
}
.pt-cart-container {
    width: 100%;
}

/* Breadcrumbs (reuse existing) */
.pt-cart-heading {
    font-size: 24px;
    font-weight: 700;
    color: var(--pt-gray-900, #111827);
    margin: 0 0 24px;
}

/* Loading state */
.pt-cart-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--pt-gray-500, #6b7280);
}
.pt-cart-loading .pt-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--pt-gray-200, #e5e7eb);
    border-top-color: var(--pt-primary);
    border-radius: 50%;
    animation: pt-spin 0.7s linear infinite;
    margin-bottom: 12px;
}

/* Empty cart */
.pt-cart-empty {
    text-align: center;
    padding: 60px 20px;
}
.pt-cart-empty-icon {
    color: var(--pt-gray-300, #d1d5db);
    margin-bottom: 16px;
}
.pt-cart-empty h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--pt-gray-800, #1f2937);
    margin: 0 0 8px;
}
.pt-cart-empty p {
    color: var(--pt-gray-500, #6b7280);
    margin: 0 0 20px;
    font-size: 14px;
}

/* Cart layout (2 columns) */
.pt-cart-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    align-items: start;
}

/* Items section */
.pt-cart-items-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pt-gray-200, #e5e7eb);
}
.pt-cart-items-header span {
    font-size: 14px;
    font-weight: 600;
    color: var(--pt-gray-700, #374151);
}

/* Cart item */
.pt-cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--pt-gray-100, #f3f4f6);
}
.pt-cart-item:last-child {
    border-bottom: none;
}
.pt-cart-item-info {
    flex: 1;
    min-width: 0;
}
.pt-cart-item-badges {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.pt-cart-item-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--pt-gray-900, #111827);
    margin: 0 0 6px;
    line-height: 1.4;
}
.pt-cart-item-prices {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pt-cart-item-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--pt-gray-900, #111827);
}
.pt-cart-item-mrp {
    font-size: 13px;
    color: var(--pt-gray-400, #9ca3af);
    text-decoration: line-through;
}

/* Remove button */
.pt-cart-remove-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--pt-gray-400, #9ca3af);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.pt-cart-remove-btn:hover {
    background: var(--pt-error-50, #fef2f2);
    color: var(--pt-error, #dc2626);
}

/* Error state */
.pt-cart-error {
    text-align: center;
    padding: 40px 20px;
    color: var(--pt-gray-500, #6b7280);
}

/* Summary section (right sidebar) */
.pt-cart-summary {
    background: var(--pt-gray-50, #f9fafb);
    border: 1px solid var(--pt-gray-200, #e5e7eb);
    border-radius: 12px;
    padding: 24px;
    position: sticky;
    top: 100px;
}
.pt-cart-summary-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--pt-gray-900, #111827);
    margin: 0 0 16px;
}
.pt-cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: var(--pt-gray-600, #4b5563);
}
.pt-cart-summary-total {
    border-top: 2px solid var(--pt-gray-200, #e5e7eb);
    margin-top: 8px;
    padding-top: 12px;
    font-weight: 700;
    font-size: 16px;
    color: var(--pt-gray-900, #111827);
}
.pt-cart-total-price {
    font-size: 20px;
    font-weight: 800;
    color: var(--pt-primary);
}
.pt-cart-tax-note {
    font-size: 12px;
    color: var(--pt-gray-400, #9ca3af);
    text-align: right;
    padding-top: 4px;
}

/* Checkout button */
.pt-cart-checkout-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 20px;
    text-decoration: none;
}
.pt-cart-no-checkout {
    text-align: center;
    color: var(--pt-gray-400, #9ca3af);
    font-size: 13px;
    margin-top: 16px;
}

/* Continue shopping */
.pt-cart-continue {
    text-align: center;
    margin-top: 12px;
}
.pt-cart-continue a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

/* Add to Cart button (store grid + detail page) */
.pt-add-to-cart-btn {
    position: relative;
    z-index: 2;
}
.pt-add-to-cart-btn.pt-btn-added {
    background: var(--pt-success, #059669) !important;
    border-color: var(--pt-success, #059669) !important;
    color: #fff !important;
}

/* Cart icon button (compact, for store grid) */
.pt-btn-cart-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--pt-gray-200, #e5e7eb);
    background: #fff;
    color: var(--pt-gray-600, #4b5563);
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}
.pt-btn-cart-icon:hover {
    border-color: var(--pt-primary);
    color: var(--pt-primary);
    background: var(--pt-primary-50, #eff6ff);
}
.pt-btn-cart-icon.pt-btn-loading {
    opacity: 0.6;
    pointer-events: none;
}
.pt-btn-cart-icon.pt-btn-added {
    background: var(--pt-success, #059669) !important;
    border-color: var(--pt-success, #059669) !important;
    color: #fff !important;
}

/* Persistent "already in cart" state — store card (icon) + buy-box (full button) */
.pt-btn-cart-icon.pt-btn-cart-added {
    background: var(--pt-success, #059669);
    border-color: var(--pt-success, #059669);
    color: #fff;
    cursor: not-allowed;
    opacity: 1;
}
.pt-btn-cart-icon.pt-btn-cart-added:hover {
    background: var(--pt-success, #059669);
    border-color: var(--pt-success, #059669);
    color: #fff;
}
.pt-btn.pt-btn-cart-added {
    background: var(--pt-success, #059669);
    border-color: var(--pt-success, #059669);
    color: #fff;
    cursor: not-allowed;
    opacity: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: none;
}
.pt-btn.pt-btn-cart-added:hover {
    background: var(--pt-success, #059669);
    color: #fff;
    transform: none;
    box-shadow: none;
}

/* Cart badge (header) */
.pt-cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--pt-error, #dc2626);
    border-radius: 9px;
    position: absolute;
    top: -6px;
    right: -6px;
    line-height: 1;
}

/* Cart items in checkout summary */
.pt-checkout-cart-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--pt-gray-100, #f3f4f6);
}
.pt-checkout-cart-item:last-of-type {
    border-bottom: none;
    margin-bottom: 8px;
}
.pt-checkout-cart-item-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.pt-checkout-cart-item-price {
    font-weight: 600;
    font-size: 14px;
    color: var(--pt-gray-800, #1f2937);
    white-space: nowrap;
    flex-shrink: 0;
}
.pt-checkout-cart-item .pt-checkout-product-title {
    font-size: 14px;
}
.pt-checkout-cart-item .pt-checkout-product-badges {
    margin-bottom: 4px;
}

/* Cart responsive */
@media (max-width: 900px) {
    .pt-cart-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .pt-cart-summary {
        position: static;
    }
}
@media (max-width: 600px) {
    .pt-cart-wrap {
        padding: 16px 12px 32px;
    }
    .pt-cart-heading {
        font-size: 20px;
    }
    .pt-cart-item {
        gap: 12px;
    }
    .pt-cart-summary {
        padding: 16px;
    }
}

/* Mobile: UPI modal — a full-height sheet, so the pinned amount and the
   pinned action sit at the two edges of the screen rather than mid-page. */
@media (max-width: 480px) {
    .pt-upi-overlay {
        padding: 0;
        align-items: stretch;
    }
    .pt-upi-modal {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }
    .pt-upi-scroll { padding: 14px 16px; }
    .pt-upi-footer,
    .pt-upi-amount-bar { padding-left: 16px; padding-right: 16px; }
    /* The QR cannot be scanned by the phone showing it — keep it available for
       a second device, but give the space to the app button above it. */
    .pt-upi-qr { width: 150px; }
    .pt-upi-detail {
        flex-wrap: wrap;
        gap: 4px 10px;
    }
    .pt-receipt-manual-info {
        flex-direction: column;
        align-items: center;
    }
    .pt-gateway-modal {
        max-width: 100%;
        border-radius: 12px;
    }
}

/* ======================================================================
   PDF PREVIEW MODAL
   ====================================================================== */

.pt-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pt-preview-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}
.pt-preview-modal-content {
    position: relative;
    width: 90%;
    max-width: 820px;
    max-height: 92vh;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    animation: ptPreviewSlideIn 0.25s ease-out;
}
@keyframes ptPreviewSlideIn {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.pt-preview-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}
.pt-preview-modal-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}
.pt-preview-page-info {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}
.pt-preview-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #94a3b8;
    padding: 0 4px;
    transition: color 0.15s;
}
.pt-preview-modal-close:hover {
    color: #ef4444;
}
.pt-preview-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    text-align: center;
    background: #f1f5f9;
    min-height: 300px;
}
.pt-preview-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #64748b;
    font-size: 15px;
    font-weight: 500;
}
.pt-preview-modal-body canvas {
    max-width: 100%;
    height: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    background: #fff;
}
.pt-preview-modal-footer {
    padding: 14px 20px;
    border-top: 1px solid #e2e8f0;
    background: #fff;
}
.pt-preview-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.pt-preview-page-dropdown {
    padding: 5px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    background: #f8fafc;
    cursor: pointer;
    min-width: 110px;
}
.pt-preview-cta {
    margin: 10px 0 0 0;
    text-align: center;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
}
/* Preview modal responsive */
@media (max-width: 640px) {
    .pt-preview-modal-content {
        width: 98%;
        max-height: 95vh;
        border-radius: 12px;
    }
    .pt-preview-modal-body {
        padding: 12px;
    }
    .pt-preview-controls {
        gap: 8px;
    }
    .pt-preview-page-dropdown {
        min-width: 90px;
    }
}

/* ===========================================================================
   BUNDLE CARDS — Store Grid & Shortcode
   =========================================================================== */

.pt-bundles-section {
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--pt-border, #e2e8f0);
}

.pt-bundles-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}
.pt-bundles-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pt-text, #1e293b);
    margin: 0;
}
.pt-bundles-subtitle {
    font-size: 0.85rem;
    color: var(--pt-text-muted, #64748b);
}

.pt-bundles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* Bundle card enhancements (extends .pt-product-card) */
.pt-bundle-card {
    border: 1.5px solid var(--pt-primary-light, #dbeafe);
    background: linear-gradient(135deg, #fafbff 0%, #f0f4ff 100%);
}
.pt-bundle-card:hover {
    border-color: var(--pt-primary, #3b82f6);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.12);
}

.pt-badge-bundle {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    font-weight: 600;
}
.pt-badge-items {
    background: #f1f5f9 !important;
    color: #475569 !important;
}

.pt-bundle-card-desc {
    font-size: 0.82rem;
    color: var(--pt-text-muted, #64748b);
    margin: 0 0 10px;
    line-height: 1.45;
}

.pt-bundle-card-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.7);
    border-radius: 6px;
    border: 1px solid var(--pt-border, #e2e8f0);
}

.pt-bundle-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
}
.pt-bundle-item-type {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--pt-primary, #3b82f6);
    background: var(--pt-primary-light, #dbeafe);
    padding: 1px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}
.pt-bundle-item-title {
    color: var(--pt-text, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pt-bundle-item-more {
    font-size: 0.75rem;
    color: var(--pt-text-muted, #64748b);
    font-weight: 500;
    padding-top: 2px;
}

/* Responsive: bundles grid */
@media (max-width: 640px) {
    .pt-bundles-grid {
        grid-template-columns: 1fr;
    }
    .pt-bundles-header {
        flex-direction: column;
        gap: 4px;
    }
}

/* ===========================================================================
   PRICING PAGE — Subscription Plans
   =========================================================================== */

.pt-pricing-page {
    font-family: var(--pt-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}
.pt-pricing-header {
    text-align: center;
    margin-bottom: 40px;
}
.pt-pricing-header h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--pt-text, #1e293b);
    margin: 0 0 8px;
}
.pt-pricing-header p {
    font-size: 1.05rem;
    color: var(--pt-text-muted, #64748b);
    margin: 0;
}

.pt-pricing-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--pt-text-muted, #64748b);
    font-size: 1rem;
}

.pt-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 48px;
}

.pt-pricing-card {
    position: relative;
    background: #fff;
    border: 1.5px solid var(--pt-border, #e2e8f0);
    border-radius: 16px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.pt-pricing-card:hover {
    border-color: var(--pt-primary, #3b82f6);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.1);
}
.pt-pricing-card-active {
    border-color: #22c55e;
    background: linear-gradient(135deg, #f0fdf4 0%, #fafff7 100%);
}

.pt-pricing-save-badge {
    position: absolute;
    top: -12px;
    right: 16px;
    background: linear-gradient(135deg, #f97316, #ef4444);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

.pt-pricing-current-badge {
    position: absolute;
    top: -12px;
    left: 16px;
    background: #22c55e;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
}

.pt-pricing-card-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pt-text, #1e293b);
    margin: 0 0 6px;
}

.pt-pricing-card-desc {
    font-size: 0.85rem;
    color: var(--pt-text-muted, #64748b);
    margin: 0 0 16px;
    line-height: 1.5;
}

.pt-pricing-card-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}
.pt-pricing-amount {
    font-size: 2rem;
    font-weight: 800;
    color: var(--pt-text, #1e293b);
}
.pt-pricing-mrp {
    font-size: 1rem;
    color: var(--pt-text-muted, #94a3b8);
    text-decoration: line-through;
}
.pt-pricing-duration {
    font-size: 0.85rem;
    color: var(--pt-text-muted, #64748b);
}

.pt-pricing-card-type {
    margin-bottom: 16px;
}
.pt-pricing-type-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pt-pricing-type-all {
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
    color: #6366f1;
}
.pt-pricing-type-exam {
    background: #fef3c7;
    color: #92400e;
}
.pt-pricing-exams {
    font-size: 0.78rem;
    color: var(--pt-text-muted, #64748b);
    margin-top: 4px;
}

.pt-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    flex: 1;
}
.pt-pricing-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.88rem;
    color: var(--pt-text, #334155);
    border-bottom: 1px solid var(--pt-border-light, #f1f5f9);
}
.pt-pricing-features li:last-child {
    border-bottom: none;
}
.pt-pricing-features li svg {
    flex-shrink: 0;
}

.pt-pricing-card-action {
    margin-top: auto;
    padding-top: 8px;
}
.pt-pricing-card-action .pt-btn {
    width: 100%;
    justify-content: center;
}

/* Subscription history table */
.pt-pricing-history {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--pt-border, #e2e8f0);
}
.pt-pricing-history h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--pt-text, #1e293b);
}
.pt-pricing-history-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--pt-border, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
}
.pt-pricing-history-table th {
    background: #f8fafc;
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--pt-text-muted, #64748b);
    border-bottom: 1px solid var(--pt-border, #e2e8f0);
}
.pt-pricing-history-table td {
    padding: 10px 14px;
    font-size: 0.88rem;
    border-bottom: 1px solid #f1f5f9;
    color: var(--pt-text, #334155);
}
.pt-pricing-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}
.pt-sub-status-active {
    background: #dcfce7;
    color: #166534;
}
.pt-sub-status-expired {
    background: #fee2e2;
    color: #991b1b;
}
.pt-sub-status-cancelled {
    background: #f1f5f9;
    color: #475569;
}

/* Pricing page responsive */
@media (max-width: 640px) {
    .pt-pricing-header h1 {
        font-size: 1.5rem;
    }
    .pt-pricing-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .pt-pricing-card {
        padding: 20px 16px;
    }
    .pt-pricing-amount {
        font-size: 1.6rem;
    }
    .pt-pricing-history-table {
        font-size: 0.82rem;
    }
}

/* =========================================================
   PAY & GET — the one-page purchase
   =========================================================
   Built for a phone held in one hand on a patchy connection. Everything is a
   single column at every width: the page is a sequence of four things to do,
   and putting any two of them side by side turns a list into a puzzle. */

.pt-pay-wrap {
    max-width: 560px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

.pt-pay-card {
    background: var(--pt-bg-card, #fff);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg, 14px);
    padding: 22px 18px 26px;
    box-shadow: var(--pt-shadow-sm);
}

/* ---- header ---- */
.pt-pay-head {
    text-align: center;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--pt-border);
}
.pt-pay-title {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.45;
    font-weight: 700;
    color: var(--pt-text, #1e293b);
}
.pt-pay-amount {
    font-size: 30px;
    font-weight: 800;
    color: var(--pt-success, #059669);
}

/* ---- the four steps, stated before anything is asked ---- */
.pt-pay-steps {
    margin: 0 0 22px;
    padding: 16px 16px 16px 38px;
    background: var(--pt-primary-50, #eff6ff);
    border: 1px solid var(--pt-primary-light, #dbeafe);
    border-radius: var(--pt-radius, 10px);
    font-size: 14px;
    color: var(--pt-text, #1e293b);
}
.pt-pay-steps li { margin-bottom: 10px; line-height: 1.6; }
.pt-pay-steps li:last-child { margin-bottom: 0; }
.pt-pay-steps li span {
    font-size: 13px;
    color: var(--pt-text-lt, #64748b);
}

/* ---- numbered blocks ---- */
.pt-pay-block {
    padding: 18px 0;
    border-bottom: 1px solid var(--pt-border);
}
.pt-pay-block:last-of-type { border-bottom: 0; }

.pt-pay-block-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--pt-text, #1e293b);
}
.pt-pay-block-label span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--pt-primary, #2563eb);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

/* ---- QR ---- */
.pt-pay-qr {
    text-align: center;
    margin-bottom: 14px;
}
.pt-pay-qr img {
    width: 220px;
    max-width: 100%;
    height: auto;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius, 10px);
}

.pt-pay-upi-open {
    display: flex;
    width: 100%;
    margin-bottom: 14px;
    text-decoration: none;
}
/* A machine with a mouse has no UPI app to open, so the link would dead-end.
   Asking about the pointer beats asking about the width: a phone set to
   "Request desktop site" reports 980px and still has the app. */
@media (hover: hover) and (pointer: fine) {
    .pt-pay-upi-open { display: none; }
}

.pt-pay-upi-id {
    font-size: 13px;
    color: var(--pt-text-lt, #64748b);
}
.pt-pay-copy-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.pt-pay-copy-row code {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 9px 12px;
    background: var(--pt-gray-50, #f8fafc);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm, 6px);
    font-size: 14px;
    color: var(--pt-text, #1e293b);
}
.pt-pay-extra-note {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--pt-text-lt, #64748b);
}

/* ---- screenshot picker ----
   A tap target the size of a button, because the real <input type=file> is
   hidden and its own control is unstyleable and tiny on Android. */
.pt-pay-file {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 16px;
    border: 2px dashed var(--pt-border-hover, #cbd5e1);
    border-radius: var(--pt-radius, 10px);
    background: var(--pt-gray-50, #f8fafc);
    font-size: 15px;
    font-weight: 600;
    color: var(--pt-text-md, #475569);
    cursor: pointer;
}
.pt-pay-file-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pt-pay-file--chosen {
    border-style: solid;
    border-color: var(--pt-success, #059669);
    background: var(--pt-success-light, #d1fae5);
    color: #065f46;
}

/* ---- contact ---- */
.pt-pay-field {
    display: block;
    margin-bottom: 12px;
}
.pt-pay-field span {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pt-text-md, #475569);
}
.pt-pay-field input {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius, 10px);
    /* 16px or Safari zooms the page on focus and the buyer loses their place. */
    font-size: 16px;
    color: var(--pt-text, #1e293b);
    background: var(--pt-bg-card, #fff);
}
.pt-pay-field input:focus {
    outline: none;
    border-color: var(--pt-primary, #2563eb);
    box-shadow: 0 0 0 3px var(--pt-primary-light, #dbeafe);
}
.pt-pay-or {
    margin: 6px 0 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--pt-text-muted, #94a3b8);
}
.pt-pay-hint {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--pt-text-lt, #64748b);
}
.pt-pay-hint--strong {
    margin: 0 0 14px;
    font-weight: 600;
    color: var(--pt-text-md, #475569);
}

/* ---- submit ---- */
.pt-pay-error {
    margin: 16px 0 0;
    padding: 12px 14px;
    background: var(--pt-danger-light, #fee2e2);
    border: 1px solid #fecaca;
    border-radius: var(--pt-radius, 10px);
    font-size: 14px;
    line-height: 1.6;
    color: #991b1b;
}
.pt-pay-submit {
    width: 100%;
    margin-top: 18px;
    padding: 15px 22px;
    font-size: 16px;
}
.pt-pay-foot {
    margin: 12px 0 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.7;
    color: var(--pt-text-lt, #64748b);
}

/* =========================================================
   CONFIRMATION
   ========================================================= */

.pt-pay-done { text-align: center; }

.pt-pay-done-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--pt-success-light, #d1fae5);
    color: var(--pt-success, #059669);
}
.pt-pay-done-title {
    margin: 0 0 10px;
    font-size: 21px;
    font-weight: 800;
    color: var(--pt-text, #1e293b);
}
.pt-pay-done-sub {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--pt-text-md, #475569);
}

.pt-pay-summary {
    margin-bottom: 22px;
    padding: 14px 16px;
    background: var(--pt-gray-50, #f8fafc);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius, 10px);
    text-align: left;
}
.pt-pay-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 5px 0;
    font-size: 14px;
    color: var(--pt-text-lt, #64748b);
}
.pt-pay-summary-row strong {
    text-align: right;
    overflow-wrap: anywhere;
    color: var(--pt-text, #1e293b);
}

/* ---- what to do next ---- */
.pt-pay-next {
    margin-bottom: 18px;
    padding: 18px 16px;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius, 10px);
    text-align: left;
}
.pt-pay-next--tg {
    border-color: #99d6f5;
    background: #eef9ff;
}
.pt-pay-next-title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--pt-text, #1e293b);
}
.pt-pay-next-body {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--pt-text-md, #475569);
    overflow-wrap: anywhere;
}
.pt-pay-next-steps {
    margin: 0 0 14px;
    padding-left: 22px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--pt-text-md, #475569);
}
.pt-pay-next-note {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.7;
    font-weight: 600;
    color: #0b5f86;
}
.pt-pay-next .pt-btn {
    display: flex;
    width: 100%;
    text-decoration: none;
}

/* Telegram's own blue: the button has to look like the app it opens. */
.pt-btn-tg {
    gap: 8px;
    background: #229ed9;
    border: 1px solid #229ed9;
    color: #fff;
}
.pt-btn-tg:hover,
.pt-btn-tg:focus { background: #1c88bb; border-color: #1c88bb; color: #fff; }

.pt-pay-patience {
    padding: 14px 16px;
    background: var(--pt-warning-light, #fef3c7);
    border: 1px solid #fde68a;
    border-radius: var(--pt-radius, 10px);
    font-size: 13px;
    line-height: 1.8;
    color: #92400e;
    text-align: left;
}
.pt-pay-back {
    display: inline-block;
    margin-top: 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pt-primary, #2563eb);
}

.pt-pay-blocked { text-align: center; }
.pt-pay-blocked .pt-btn { margin-top: 8px; text-decoration: none; }

@media (max-width: 420px) {
    .pt-pay-wrap { padding: 16px 12px 40px; }
    .pt-pay-card { padding: 18px 14px 22px; }
    .pt-pay-amount { font-size: 26px; }
    .pt-pay-steps { padding-left: 32px; }
}

/* An approved order seen again: the buttons are the point of the page now, so
   they stack full-width instead of sitting inside a paragraph of reassurance. */
.pt-pay-next--ready {
    border-color: #a7f3d0;
    background: #f0fdf4;
}
.pt-pay-next--ready .pt-btn {
    margin-bottom: 8px;
}
.pt-pay-next--ready .pt-btn:last-child {
    margin-bottom: 0;
}
.pt-pay-done-tick--failed {
    background: var(--pt-danger-light, #fee2e2);
    color: var(--pt-danger, #dc2626);
}


/* ==========================================================================
   7b. PRODUCT DETAIL PAGE — the shop front for one paper
   --------------------------------------------------------------------------
   Two columns on a desktop: what he is buying on the left, what it costs and
   what it contains on the right. The page used to be one narrow column with
   the cover sunk into the middle of it, so half the screen was empty and the
   price sat below the fold.

   Two rules run through all of it. One label is said once -- the kind of paper
   was previously printed three times over. And only something that can be
   pressed is drawn like something that can be pressed: the facts below were a
   row of bordered pills that read as a row of buttons.
   ========================================================================== */

.pt-product-detail-wrap {
    max-width: 1120px;
}

.pt-pdp {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--pt-border);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15,23,42,.05), 0 8px 24px -18px rgba(15,23,42,.25);
}

/*
 * Nothing on the left to look at, so the page does not reserve a column for
 * it. This sits after .pt-pdp deliberately: both are one class deep, so the
 * later of the two is the one that decides, and an override written above
 * would quietly lose.
 */
.pt-product-detail-wrap--narrow {
    max-width: 840px;
}
.pt-pdp--nocover {
    grid-template-columns: minmax(0, 1fr);
}


/* ---- left: the thing itself ---- */
.pt-pdp-media {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pt-pdp-cover {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    max-height: 460px;
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid var(--pt-border);
    border-radius: 12px;
}
.pt-pdp-cover-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* A test has no cover to show, so the column is given something of its own
   rather than a hole where a picture should be. */
.pt-pdp-cover--plain {
    aspect-ratio: 4 / 3;
    max-height: 260px;
    background: linear-gradient(160deg, #f8fafc 0%, #eef2f7 100%);
}
.pt-pdp-cover-art {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding: 0 16px;
}
.pt-pdp-cover-art svg {
    width: 54px;
    height: 54px;
    color: #94a3b8;
}
/* ---- right: what it is, what it costs ---- */
.pt-pdp-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.pt-pdp-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pt-pdp-badge {
    padding: 4px 9px;
    border-radius: 5px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.4;
}
.pt-pdp-badge--official { background: #ecfdf5; color: #047857; }
.pt-pdp-badge--free     { background: #eff6ff; color: #1d4ed8; }
.pt-pdp-badge--owned {
    background: #f0fdf4;
    color: #15803d;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
}
a.pt-pdp-badge--owned:hover {
    background: #dcfce7;
    color: #166534;
    text-decoration: none;
}
a.pt-pdp-badge--owned:focus-visible {
    outline: 2px solid #16a34a;
    outline-offset: 2px;
}

.pt-pdp-share {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 1px solid var(--pt-border);
    border-radius: 8px;
    background: #fff;
    color: var(--pt-gray-600, #475569);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.pt-pdp-share:hover { background: #f8fafc; color: #1f2d3d; }
.pt-pdp-share svg { width: 15px; height: 15px; }

.pt-pdp-title {
    margin: 14px 0 6px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pt-gray-900, #0f172a);
}
.pt-pdp-sub {
    margin: 0 0 20px;
    font-size: 14px;
    color: #64748b;
}

.pt-pdp-buy {
    padding: 18px;
    border: 1px solid var(--pt-border);
    border-radius: 12px;
    background: #fff;
}
.pt-pdp-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}
.pt-pdp-price-now {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: #0f172a;
}
.pt-pdp-price-now--free { color: #047857; }
.pt-pdp-price-mrp {
    font-size: 16px;
    color: #94a3b8;
    text-decoration: line-through;
}
.pt-pdp-price-off {
    padding: 3px 8px;
    border-radius: 5px;
    background: #ecfdf5;
    color: #047857;
    font-size: 12px;
    font-weight: 700;
}
.pt-pdp-price-tax {
    flex: 1 0 100%;
    font-size: 12px;
    color: #94a3b8;
}
/*
 * The two actions, sized like a shop's.
 *
 * A button is as wide as it needs to be to be pressed easily and no wider: a
 * card 600px across with a 600px button in it looks like a mistake. So they are
 * held to a comfortable measure on a desktop and go full width on a phone,
 * where the thumb wants the whole line. The main one is taller and heavier than
 * the one beside it, which is how a reader can tell them apart without reading
 * either.
 */
.pt-pdp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    margin-top: 16px;
}
/* Side by side where there is room: look, then buy, in reading order and in
   one line of the card rather than stacked down the middle of it. */
.pt-pdp-actions .pt-btn {
    flex: 1 1 200px;
    max-width: 320px;
}
.pt-pdp-assure {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.pt-pdp-assure li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
}
.pt-pdp-assure svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: #059669;
}

/* Facts: a quiet label with the number under it. Nothing here is pressable,
   so nothing here is drawn as a button. */
.pt-pdp-facts {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--pt-border);
    border-radius: 10px;
    overflow: hidden;
}
/*
 * The lines between the facts are drawn by the cells themselves, and the last
 * of them are clipped away by the box. Drawing them as a coloured gap instead
 * left the unused end of the last row showing as a grey block.
 *
 * They sit in a wrapping row rather than a grid for the same reason: a grid
 * keeps its columns on the last row too, so six facts in a row of five left an
 * empty bordered cell at the end. Growing the last row's facts to fill the
 * line cannot leave one.
 */
.pt-pdp-fact {
    flex: 1 1 126px;
    padding: 12px 14px;
    margin: 0 -1px -1px 0;
    border-right: 1px solid var(--pt-border);
    border-bottom: 1px solid var(--pt-border);
    background: #fff;
}
.pt-pdp-fact dt {
    margin: 0 0 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #94a3b8;
}
.pt-pdp-fact dd {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

/* ---- sections below the fold ---- */
.pt-pdp-section,
.pt-product-detail-wrap .pt-product-description {
    margin-top: 28px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--pt-border);
    border-radius: 14px;
}
.pt-pdp-section-title,
.pt-product-detail-wrap .pt-product-section-title {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
    color: var(--pt-gray-900, #0f172a);
}
.pt-product-detail-wrap .pt-related-section {
    margin-top: 28px;
}

@media (max-width: 899px) {
    .pt-pdp {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 18px;
        border-radius: 12px;
    }
    .pt-pdp-media {
        position: static;
    }
    .pt-pdp-cover {
        aspect-ratio: 4 / 3;
        max-height: 300px;
    }

    .pt-pdp-title { font-size: 21px; }
    .pt-pdp-price-now { font-size: 26px; }
    /*
     * A thumb wants the whole line, and one thing under the other. The basis
     * has to be cleared with the direction: in a column it is read as a height,
     * so buttons that grow sideways on a desktop grow 200px TALL here.
     */
    .pt-pdp-actions { flex-direction: column; }
    .pt-pdp-actions .pt-btn {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
    }
}


@media (max-width: 480px) {
    .pt-pdp { padding: 14px; }
    /* Three nested paddings eat a small screen; the innermost gives way. */
    .pt-pdp-buy { padding: 14px; }
    .pt-pdp-section,
    .pt-product-detail-wrap .pt-product-description { padding: 18px 16px; }
    .pt-pdp-fact { flex-basis: 104px; }
}

/* ==========================================================================
   Buttons used by the product page
   --------------------------------------------------------------------------
   One thing to press per screen, and it is the same colour every time it is
   the thing to press.

   That colour is teal, picked by the owner from six shown side by side. It is
   not the brand's green -- green was already the whole page, the ticks, the
   discount and the badges, so the button carrying the sale disappeared into it
   -- but it is close enough to the brand to belong, and deep enough that white
   text on it measures 4.6:1, past what small bold text needs. (The shade shown
   to him, #0d9488, only reaches 3.7:1 with white; this is the same colour a
   step deeper so the label reads.)

   The sample button is the same shape in outline, in the same teal, lighter.
   Two jobs, two weights, one colour family, nothing shouting.
   ========================================================================== */
.pt-btn-cta {
    justify-content: center;
    min-height: 48px;
    padding: 13px 24px;
    background: #0d8478;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    border: 1px solid #0b7268;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(13,132,120,.24);
}
.pt-btn-cta:hover {
    background: #0f766e;
    border-color: #115e59;
    color: #fff;
    box-shadow: 0 4px 12px rgba(13,132,120,.28);
    transform: translateY(-1px);
}
.pt-btn-cta:focus-visible {
    outline: 3px solid rgba(13,148,136,.45);
    outline-offset: 2px;
}
.pt-btn-soft {
    justify-content: center;
    min-height: 44px;
    padding: 11px 20px;
    background: #fff;
    color: #0f766e;
    font-size: 14px;
    font-weight: 700;
    border: 1.5px solid #0d8478;
    border-radius: 8px;
}
.pt-btn-soft:hover {
    background: #f0fdfa;
    border-color: #0f766e;
    color: #0f766e;
}
.pt-btn-soft:focus-visible {
    outline: 3px solid rgba(13,148,136,.3);
    outline-offset: 2px;
}
.pt-btn-soft svg {
    flex-shrink: 0;
}


/* PR 2 — reusable single Access Method gate. */
.pt-access-method-modal[hidden] { display: none !important; }
.pt-access-method-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 18px;
}
.pt-access-method-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .58);
}
.pt-access-method-modal__card {
    position: relative;
    width: min(430px, 100%);
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #fff;
    padding: 22px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, .22);
}
.pt-access-method-modal__card h2 {
    margin: 0 32px 7px 0;
    font-size: 21px;
    line-height: 1.3;
}
.pt-access-method-modal__copy {
    margin: 0 0 15px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.55;
}
.pt-access-method-modal__close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    font-size: 22px;
    cursor: pointer;
}
.pt-access-method-modal__field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 9px;
}
.pt-access-method-modal__field input {
    min-width: 0;
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 11px 12px;
    background: #fff;
}
.pt-access-method-modal__primary,
.pt-access-method-modal__check {
    width: 100%;
}
.pt-access-method-modal__check { margin-top: 8px; }
.pt-access-method-modal__choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}
.pt-access-method-choice {
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #fff;
    padding: 14px 10px;
    color: #172033;
    cursor: pointer;
}
.pt-access-method-choice strong,
.pt-access-method-choice span {
    display: block;
}
.pt-access-method-choice span {
    margin-top: 4px;
    color: #15803d;
    font-size: 11px;
    font-weight: 700;
}
.pt-access-method-modal__message {
    min-height: 18px;
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.45;
}
.pt-access-method-modal__message.is-error { color: #b91c1c; }
.pt-access-method-modal__message.is-success { color: #166534; }
@media (max-width: 520px) {
    .pt-access-method-modal__field,
    .pt-access-method-modal__choices {
        grid-template-columns: 1fr;
    }
}