/* XPlay Ads – Public Styles */
:root {
    --xplay-primary: #6c63ff;
    --xplay-stripe: #635bff;
    --xplay-paypal: #003087;
    --xplay-success: #27ae60;
    --xplay-danger: #e74c3c;
    --xplay-warn: #f39c12;
    --xplay-border: #dde3ec;
    --xplay-radius: 8px;
}

.xplay-wrap { max-width: 720px; margin: 0 auto; font-family: inherit; }

/* Form */
.xplay-heading { font-size: 1.6em; margin-bottom: .25em; }
.xplay-subheading { color: #666; margin-bottom: 1.5em; }

.xplay-field { margin-bottom: 1.25rem; }
.xplay-field label { display: block; font-weight: 600; margin-bottom: .4rem; }
.xplay-field label span { color: var(--xplay-danger); }
.xplay-field input[type="text"],
.xplay-field input[type="email"],
.xplay-field input[type="url"],
.xplay-field select,
.xplay-field textarea {
    width: 100%; padding: .65rem .9rem;
    border: 1.5px solid var(--xplay-border);
    border-radius: var(--xplay-radius);
    font-size: 1rem; transition: border-color .2s;
    box-sizing: border-box;
}
.xplay-field input:focus, .xplay-field select:focus { border-color: var(--xplay-primary); outline: none; }
.xplay-hint { font-size: .82em; color: #888; margin-top: .3rem; }

/* Banner preview */
#xplay-banner-preview { margin-top: .5rem; }
#xplay-banner-preview img { max-width: 200px; max-height: 100px; border-radius: 4px; border: 1px solid var(--xplay-border); }

/* Slot info chip */
#xplay-slot-info { margin-top: .5rem; font-size: .85em; color: var(--xplay-primary); font-weight: 600; }

/* Buttons */
.xplay-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .75rem 1.5rem; border: none; border-radius: var(--xplay-radius);
    font-size: 1rem; font-weight: 600; cursor: pointer; transition: opacity .15s, transform .1s;
    text-decoration: none;
}
.xplay-btn:hover { opacity: .87; transform: translateY(-1px); }
.xplay-btn:active { transform: translateY(0); }
.xplay-btn--primary { background: var(--xplay-primary); color: #fff; }
.xplay-btn--stripe { background: var(--xplay-stripe); color: #fff; }
.xplay-btn--paypal { background: var(--xplay-paypal); color: #fff; }
.xplay-btn--ghost { background: transparent; color: #555; border: 1.5px solid var(--xplay-border); }
.xplay-btn--small { padding: .4rem .9rem; font-size: .85rem; }
.xplay-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Notices */
.xplay-notice { padding: 1rem 1.25rem; border-radius: var(--xplay-radius); margin-bottom: 1rem; font-weight: 500; }
.xplay-notice--success { background: #d4edda; color: #155724; border-left: 4px solid var(--xplay-success); }
.xplay-notice--error   { background: #f8d7da; color: #721c24; border-left: 4px solid var(--xplay-danger); }
.xplay-notice--info    { background: #d1ecf1; color: #0c5460; border-left: 4px solid #17a2b8; }

/* Preview step */
.xplay-preview-container {
    border: 2px dashed var(--xplay-border); border-radius: var(--xplay-radius);
    padding: 1.5rem; text-align: center; margin: 1.5rem 0; background: #f9fafc;
}
.xplay-preview-label { font-size: .8em; font-weight: 600; text-transform: uppercase; color: #888; margin-bottom: .75rem; }
#xplay-preview-slot img { max-width: 100%; border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,.1); }

/* Payment box */
.xplay-payment-box {
    background: #fff; border: 1.5px solid var(--xplay-border); border-radius: var(--xplay-radius);
    padding: 1.5rem; margin: 1.5rem 0;
}
.xplay-payment-box h3 { margin-top: 0; }
.xplay-payment-methods { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }

/* Placeholder */
.xplay-ad-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: #f1f4f9; border: 2px dashed #ccd;
    border-radius: 4px; font-size: .85em; color: #888;
}
.xplay-ad-placeholder a { color: var(--xplay-primary); text-decoration: none; font-weight: 600; }

/* Dashboard */
.xplay-ads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin-bottom: 2.5rem; }
.xplay-ad-card {
    border: 1.5px solid var(--xplay-border); border-radius: var(--xplay-radius);
    overflow: hidden; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.xplay-ad-card--active { border-color: #b2dfdb; }
.xplay-ad-card--expired { opacity: .75; }
.xplay-ad-card__banner { background: #f5f7fa; text-align: center; padding: 1rem; min-height: 80px; display: flex; align-items: center; justify-content: center; }
.xplay-ad-card__info { padding: .9rem 1rem; }
.xplay-ad-card__slot { font-weight: 600; font-size: .9em; margin-bottom: .3rem; }
.xplay-ad-card__dates { font-size: .82em; color: #666; margin: .3rem 0; }
.xplay-ad-card__stats { display: flex; gap: .75rem; font-size: .83em; color: #555; margin-top: .5rem; }
.xplay-ad-card__actions { padding: .75rem 1rem; border-top: 1px solid var(--xplay-border); }

/* Status badges */
.xplay-status { display: inline-block; padding: .2em .6em; border-radius: 99px; font-size: .78em; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.xplay-status--active          { background: #d4edda; color: #155724; }
.xplay-status--pending_payment { background: #fff3cd; color: #856404; }
.xplay-status--expired         { background: #e2e3e5; color: #383d41; }
.xplay-status--rejected        { background: #f8d7da; color: #721c24; }
.xplay-status--completed       { background: #d4edda; color: #155724; }

/* Table */
.xplay-table { width: 100%; border-collapse: collapse; font-size: .9em; }
.xplay-table th, .xplay-table td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--xplay-border); }
.xplay-table thead th { background: #f5f7fa; font-weight: 700; }

@media (max-width: 600px) {
    .xplay-payment-methods { flex-direction: column; }
    .xplay-btn { width: 100%; }
}

/* ── Price summary box ─────────────────────────────────────────────────────── */
.xplay-price-summary {
    background: #f5f7ff;
    border: 1.5px solid #d0d4f7;
    border-radius: var(--xplay-radius);
    padding: 1rem 1.25rem;
    margin: 1rem 0 1.5rem;
}
.xplay-price-summary--payment {
    background: #f0f4ff;
    margin-bottom: 1.25rem;
}
.xplay-price-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .35rem 0;
    font-size: .92em;
    border-bottom: 1px solid #e0e4f5;
    color: #444;
}
.xplay-price-summary__row:last-child { border-bottom: none; }
.xplay-price-summary__total {
    font-size: 1.1em;
    font-weight: 700;
    color: #222;
    padding-top: .6rem;
    margin-top: .25rem;
}
.xplay-price-summary__total span:last-child {
    color: var(--xplay-primary);
    font-size: 1.2em;
}

/* ── Slot mockup preview ───────────────────────────────────────────────────── */
.xplay-mockup {
    border: 2px solid var(--xplay-border);
    border-radius: var(--xplay-radius);
    overflow: hidden;
    background: #f0f2f7;
    margin: 1.5rem 0;
}

/* Shared skeleton pieces */
.xplay-mockup__bar {
    display: flex; align-items: center; justify-content: space-between;
    background: #fff; padding: .6rem 1rem;
    border-bottom: 1px solid var(--xplay-border);
}
.xplay-mockup__logo {
    width: 80px; height: 14px; background: #d0d4e0; border-radius: 3px;
}
.xplay-mockup__nav { display: flex; gap: 8px; }
.xplay-mockup__nav span { width: 36px; height: 10px; background: #dde1ec; border-radius: 3px; }

.xplay-mockup__text-block {
    height: 10px; background: #dde1ec; border-radius: 3px; margin: 8px 1rem;
}
.xplay-mockup__text-block--short { width: 60%; }

.xplay-mockup__content-row { padding: .75rem 0; }

/* Slot highlight area */
.xplay-mockup__slot-area { padding: .5rem 1rem; background: #eef0fb; }
.xplay-mockup__slot-area--full { text-align: center; }
.xplay-mockup__slot-label {
    font-size: .72em; font-weight: 700; text-transform: uppercase;
    color: var(--xplay-primary); letter-spacing: .04em;
    margin-bottom: .4rem;
}

/* Ad frame */
.xplay-mockup__ad-frame {
    display: inline-block; margin: 0 auto;
    border: 2px dashed var(--xplay-primary);
    border-radius: 4px; overflow: hidden; background: #fff;
    max-width: 100%;
}
.xplay-mockup__ad-frame img {
    display: block; width: 100%; height: auto;
    max-height: 200px; object-fit: contain;
}

/* Sidebar layout */
.xplay-mockup__layout--sidebar .xplay-mockup__body-row {
    display: flex; gap: 0;
}
.xplay-mockup__main-content { flex: 1; padding: .5rem 0; }
.xplay-mockup__sidebar-col {
    width: 220px; min-width: 180px; flex-shrink: 0;
    border-left: 1px solid var(--xplay-border);
    padding: .75rem .75rem;
    background: #eef0fb;
}

/* CTA section */
.xplay-preview-cta {
    text-align: center; padding: 1.5rem 1rem;
    border-top: 1.5px solid var(--xplay-border);
    background: #fff; border-radius: 0 0 var(--xplay-radius) var(--xplay-radius);
}
.xplay-preview-cta p { margin: 0 0 1rem; color: #555; }
.xplay-preview-cta .xplay-btn { margin: .4rem; }
.xplay-btn--large { padding: 1rem 2rem; font-size: 1.05rem; }

/* Delete button style */
.xplay-btn--danger { background: #fef2f2; color: #b91c1c; border: 1.5px solid #fca5a5; }
.xplay-btn--danger:hover { background: #fee2e2; }

/* Active note */
.xplay-ad-card__active-note { font-size: .8em; color: #27ae60; font-weight: 600; }

/* Card actions spacing */
.xplay-ad-card__actions { padding: .75rem 1rem; border-top: 1px solid var(--xplay-border); display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }