/* =====================================================================
   SassyProductions aMember theme - GLOBAL
   S226, Sep 2026. REPLACES the earlier site.css (S216 + S216b appends).
   ---------------------------------------------------------------------
   Those were scoped per page class - .am-page-signup, then .am-page-cc -
   which left every page nobody had reached yet on the stock light theme.
   The member area, login, profile, payment history and the rest all
   still looked like default aMember.
   
   This styles the whole install instead. One aMember serves every site
   here and they all share the SassyProductions header, so a consistent
   dark theme everywhere is the honest result rather than a patchwork.

   Palette matches SassyFlix: gold #c9a84c, heading #f5f1ec.
   Structured so a single :root block controls the lot - change the
   variables to reskin, not the rules.
   ===================================================================== */

:root {
    --sf-gold:      #c9a84c;
    --sf-gold-dk:   #b3923d;
    --sf-gold-soft: rgba(201, 168, 76, 0.12);
    --sf-red:       #8d2f2c;
    --sf-heading:   #f5f1ec;
    --sf-body:      #d6d3cd;
    --sf-muted:     #8d8a85;
    --sf-bg:        #0a0a0a;
    --sf-surface:   #141414;
    --sf-surface-2: #1c1c1c;
    --sf-line:      rgba(255, 255, 255, 0.08);
    --sf-ok:        #86efac;
    --sf-err:       #ffb3ae;
}

/* ---------------------------------------------------------- structure */

body,
.am-layout,
.am-body,
.am-main,
.am-body-content-wrapper,
.am-body-content,
.am-body-content-top,
.am-body-content-content {
    background: var(--sf-bg) !important;
    color: var(--sf-body) !important;
    box-shadow: none !important;
    border-color: var(--sf-line) !important;
}

/* The logo upload lives in Default Theme's config, which a custom theme
   does not inherit. Swap the img source directly instead. */
.am-header-content-logo {
    content: url('/amember/data/public/6a9a0a2d9fc29.png');
}

.am-header-content-logo {
    float: none;           
    margin-right: 1em;    
    width: 100%;
    height: auto;
}

.am-header,
.am-header-line,
.am-header-content-wrapper,
.am-header-content {
    background: var(--sf-bg) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.am-header-logo-wrapper {
    text-align: center;
}

.am-header-content-logo {
    max-width: 100%;
    height: auto;
}

/* ------------------------------------------------------------ type */

h1, h2, h3, h4, legend, legend span {
    color: var(--sf-heading) !important;
}

/* aMember gives h1 and legend a coloured bar. Keep it - it gives the
   page structure - but in the house red rather than stock blue. */
.am-body-content-top h1,
.am-form legend {
    background: var(--sf-red) !important;
    padding: 0.6rem 1rem;
    border-radius: 4px;
}

a {
    color: var(--sf-gold);
}

a:hover {
    color: var(--sf-gold-dk);
}

p, li, td, label, .comment, .am-element-title {
    color: var(--sf-body) !important;
}

.comment,
.am-list-subscriptions-date,
.am-list-subscriptions-desc {
    color: var(--sf-muted) !important;
}

.required {
    color: var(--sf-gold) !important;
}

/* ----------------------------------------------------------- panels */

.am-form form,
.am-receipt,
.am-widget,
.am-info,
.am-blocks,
.am-block {
    background: var(--sf-surface) !important;
    border: 1px solid var(--sf-line) !important;
    border-radius: 14px;
    color: var(--sf-body) !important;
}

.am-form form,
.am-receipt,
.am-widget {
    padding: 1.5rem;
}

.am-form fieldset {
    background: transparent !important;
    border: 1px solid var(--sf-line) !important;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0 0.5rem;
}

div.am-row {
    background: transparent !important;
    border: 0 !important;
    padding: 0.55rem 0;
}

/* ----------------------------------------------------------- tables */

table,
.am-receipt-table,
.am-grid,
.am-grid table {
    background: transparent !important;
    border-collapse: collapse;
    color: var(--sf-body) !important;
    width: 100%;
}

th,
.am-receipt-am-row-head th,
.am-grid th {
    background: transparent !important;
    color: var(--sf-muted) !important;
    border-bottom: 1px solid var(--sf-line) !important;
    text-align: left;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.5rem 0.4rem;
}

td,
.am-grid td {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sf-line) !important;
    padding: 0.55rem 0.4rem;
}

tr:hover td {
    background: rgba(255, 255, 255, 0.02) !important;
}

.am-receipt-final-price,
.am-receipt-total strong,
strong {
    color: var(--sf-heading) !important;
}

.am-receipt-row-delimiter td {
    border: 0 !important;
    border-top: 1px solid var(--sf-line) !important;
    padding: 0 !important;
}

/* ----------------------------------------------------------- inputs */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--sf-line) !important;
    border-radius: 8px !important;
    color: var(--sf-heading) !important;
    padding: 0.6rem 0.75rem !important;
    box-shadow: none !important;
}

select option {
    background: var(--sf-surface);
    color: var(--sf-heading);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--sf-gold) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--sf-gold-soft) !important;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--sf-gold);
}

.am-el-wide {
    width: 100%;
}

/* ---------------------------------------------------------- buttons */

input[type="submit"],
input[type="button"],
button,
.am-cta-pay,
.am-cta-cancel,
.am-button {
    background: var(--sf-gold) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #0a0a0a !important;
    font-weight: 700 !important;
    padding: 0.8rem 1.6rem !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer;
}

input[type="submit"]:hover,
button:hover,
.am-button:hover {
    filter: brightness(1.1);
}

/* -------------------------------------------------------------- tabs */

.am-tabs-wrapper,
.am-tabs-narrow-wrapper {
    background: transparent !important;
}

.am-tabs,
.am-tabs-narrow {
    background: transparent !important;
    border-bottom: 1px solid var(--sf-line) !important;
    padding-left: 0;
}

.am-tabs li,
.am-tabs-narrow li {
    background: transparent !important;
    border: 0 !important;
}

.am-tabs li a,
.am-tabs-narrow li a {
    background: transparent !important;
    border: 0 !important;
    color: var(--sf-body) !important;
    padding: 0.7rem 1.1rem;
    display: inline-block;
}

.am-tabs li a:hover,
.am-tabs-narrow li a:hover {
    color: var(--sf-gold) !important;
}

.am-tabs li.active a,
.am-tabs-narrow li.active a {
    color: var(--sf-gold) !important;
    border-bottom: 2px solid var(--sf-gold) !important;
}

/* Dropdown children under a tab. */
.am-tabs li ul,
.am-tabs-narrow li ul {
    background: var(--sf-surface-2) !important;
    border: 1px solid var(--sf-line) !important;
    border-radius: 8px;
}

/* ------------------------------------------------------- identity bar */

.am-account-toolbar,
.am-account-toolbar-items {
    background: transparent !important;
    color: var(--sf-muted) !important;
}

.am-user-identity-block {
    color: var(--sf-muted) !important;
}

.am-user-identity-block_login {
    color: var(--sf-body) !important;
}

/* ------------------------------------------------- messages and state */

.am-info,
.am-flash-content,
.am-login-required {
    background: var(--sf-surface) !important;
    border: 1px solid var(--sf-gold-soft) !important;
    color: var(--sf-body) !important;
}

.am-thanks-status-success,
.am-success {
    color: var(--sf-ok) !important;
    font-weight: 600;
}

span.am-error,
.am-error,
.am-errors,
.error {
    color: var(--sf-err) !important;
    font-size: 0.85rem;
}

input.am-error,
select.am-error {
    border-color: rgba(214, 41, 31, 0.55) !important;
}

.am-popup,
.cancel-subscription-popup,
.ui-dialog,
.ui-dialog-content {
    background: var(--sf-surface) !important;
    border: 1px solid var(--sf-line) !important;
    color: var(--sf-body) !important;
}

.ui-dialog-titlebar {
    background: var(--sf-surface-2) !important;
    border: 0 !important;
    color: var(--sf-heading) !important;
}

/* ------------------------------------------------------------- footer */

.am-footer,
.am-footer-content-wrapper,
.am-footer-content,
.am-footer-text {
    background: var(--sf-bg) !important;
    border-top: 1px solid var(--sf-line) !important;
    color: var(--sf-muted) !important;
    box-shadow: none !important;
}

/* aMember's own attribution. Removing it is permitted on a licensed
   install - check your licence if unsure. */
.am-credits {
    display: none !important;
}

/* --------------------------------------------------------- responsive */

@media (max-width: 640px) {
    .am-form form,
    .am-receipt,
    .am-widget {
        padding: 1rem;
        border-radius: 10px;
    }

    .am-body-content-top h1 {
        font-size: 1.35rem;
        padding: 0.5rem 0.75rem;
    }
}

/* aMember's own popup chrome. The body was covered by .am-popup, but the
   header is a separate element with its own light background - class names
   taken from the rendered markup rather than assumed. */
.am-popup-header {
    background: var(--sf-surface-2) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sf-line) !important;
    border-radius: 8px 8px 0 0;
    padding: 0.9rem 1.1rem !important;
}

.am-popup-title {
    color: var(--sf-heading) !important;
    font-weight: 600;
    font-size: 14px;
}

.am-popup-close-icon,
.am-popup-close {
    color: var(--sf-muted) !important;
}

.am-popup-close-icon:hover {
    color: var(--sf-gold) !important;
}

.am-popup-content {
    background: var(--sf-surface) !important;
    color: var(--sf-body) !important;
}

/* The dimmed backdrop behind the popup. */
#mask,
.am-flash-mask {
    background: rgba(0, 0, 0, 0.7) !important;
}