/* ==========================================================================
   Mystic Reading AI — Frontend
   ========================================================================== */

:root {
    --mra-bg:           #0d0b18;
    --mra-card:         #1a1530;
    --mra-card-2:       #221c3a;
    --mra-border:       #2d2550;
    --mra-primary:      #7c3aed;
    --mra-primary-d:    #5b21b6;
    --mra-secondary:    #4f46e5;
    --mra-gold:         #f59e0b;
    --mra-gold-light:   #fbbf24;
    --mra-text:         #f0e6ff;
    --mra-text-2:       #c4b8e0;
    --mra-text-muted:   #9d8ec4;
    --mra-text-faint:   #6b5f8c;
    --mra-success:      #34d399;
    --mra-error:        #f87171;
    --mra-radius:       16px;
    --mra-radius-sm:    10px;
    --mra-shadow:       0 24px 64px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3);
    --mra-glow:         0 0 40px rgba(124,58,237,0.25);
    --mra-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ==========================================================================
   Form wrapper
   ========================================================================== */

.mra-form-wrapper {
    max-width:     560px;
    margin:        40px auto;
    background:    var(--mra-card);
    border:        1px solid var(--mra-border);
    border-radius: var(--mra-radius);
    box-shadow:    var(--mra-shadow), var(--mra-glow);
    overflow:      hidden;
    font-family:   var(--mra-font);
}

/* Header */
.mra-form-header {
    background:    linear-gradient(135deg, #1a0533 0%, #0a1628 100%);
    padding:       40px 40px 32px;
    text-align:    center;
    border-bottom: 1px solid var(--mra-border);
}

.mra-form-stars {
    font-size:      20px;
    letter-spacing: 0.2em;
    color:          var(--mra-gold);
    margin-bottom:  16px;
}

.mra-form-title {
    margin:         0 0 12px;
    font-size:      26px;
    font-weight:    800;
    color:          var(--mra-text);
    letter-spacing: 0.01em;
    line-height:    1.2;
}

.mra-form-subtitle {
    margin:      0;
    font-size:   15px;
    color:       var(--mra-text-muted);
    line-height: 1.65;
}

/* Form body */
.mra-form {
    padding: 36px 40px;
}

/* Field */
.mra-form-field {
    margin-bottom: 24px;
}

.mra-form-field label {
    display:        block;
    font-size:      13px;
    font-weight:    600;
    color:          var(--mra-text-2);
    margin-bottom:  8px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mra-required {
    color:        var(--mra-primary);
    margin-left:  4px;
}

.mra-form-field input[type="text"],
.mra-form-field input[type="email"],
.mra-form-field input[type="date"],
.mra-form-field select {
    width:         100%;
    padding:       13px 16px;
    background:    #0f0c1e;
    border:        2px solid var(--mra-border);
    border-radius: var(--mra-radius-sm);
    color:         var(--mra-text);
    font-size:     15px;
    font-family:   var(--mra-font);
    outline:       none;
    box-sizing:    border-box;
    transition:    border-color 0.2s ease, box-shadow 0.2s ease;
    appearance:    none;
}

.mra-form-field input:focus,
.mra-form-field select:focus {
    border-color: var(--mra-primary);
    box-shadow:   0 0 0 3px rgba(124,58,237,0.18);
}

.mra-form-field select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239d8ec4' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 14px center;
    background-size:     18px;
    padding-right:       42px;
    cursor:              pointer;
}

.mra-form-field select option {
    background: #1a1530;
    color:      var(--mra-text);
}

.mra-field-hint {
    display:    block;
    font-size:  12px;
    color:      var(--mra-text-faint);
    margin-top: 5px;
}

.mra-field-error {
    display:    block;
    font-size:  12px;
    color:      var(--mra-error);
    margin-top: 5px;
    min-height: 16px;
}

/* Alert */
.mra-alert {
    padding:       14px 18px;
    border-radius: var(--mra-radius-sm);
    font-size:     14px;
    line-height:   1.5;
    margin-bottom: 20px;
}

.mra-alert-error {
    background: rgba(248,113,113,0.1);
    border:     1px solid rgba(248,113,113,0.35);
    color:      var(--mra-error);
}

/* Submit button */
.mra-submit-btn {
    width:          100%;
    padding:        16px;
    background:     linear-gradient(135deg, var(--mra-primary), var(--mra-secondary));
    color:          #fff;
    border:         none;
    border-radius:  var(--mra-radius-sm);
    font-size:      17px;
    font-weight:    700;
    font-family:    var(--mra-font);
    cursor:         pointer;
    letter-spacing: 0.02em;
    box-shadow:     0 8px 28px rgba(124,58,237,0.4);
    transition:     transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
    margin-bottom:  20px;
}

.mra-submit-btn:hover:not(:disabled) {
    transform:  translateY(-1px);
    box-shadow: 0 12px 36px rgba(124,58,237,0.5);
}

.mra-submit-btn:active { transform: scale(0.98); }

.mra-submit-btn:disabled {
    opacity: 0.6;
    cursor:  not-allowed;
}

.mra-form-disclaimer {
    text-align:  center;
    font-size:   12px;
    color:       var(--mra-text-faint);
    line-height: 1.6;
    margin:      0;
}

/* ==========================================================================
   Spinner
   ========================================================================== */

.mra-spinner {
    display:      inline-block;
    width:        18px;
    height:       18px;
    border:       2px solid rgba(255,255,255,0.3);
    border-top:   2px solid #fff;
    border-radius:50%;
    animation:    mra-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

.mra-spinner-large {
    width:  40px;
    height: 40px;
    border-width: 3px;
    margin: 0 auto 16px;
    display: block;
}

@keyframes mra-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Reading wrapper
   ========================================================================== */

.mra-reading-wrapper {
    max-width:   760px;
    margin:      0 auto;
    font-family: var(--mra-font);
    color:       var(--mra-text);
    line-height: 1.75;
}

.mra-reading-stars {
    text-align:     center;
    font-size:      18px;
    letter-spacing: 0.25em;
    color:          var(--mra-gold);
    margin-bottom:  32px;
}

/* Sections */
.mra-section {
    background:    var(--mra-card);
    border:        1px solid var(--mra-border);
    border-radius: var(--mra-radius);
    padding:       32px 36px;
    margin-bottom: 28px;
    box-shadow:    var(--mra-shadow);
}

.mra-section-label {
    font-size:      11px;
    font-weight:    700;
    color:          var(--mra-primary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom:  18px;
    padding-bottom: 12px;
    border-bottom:  1px solid var(--mra-border);
}

.mra-unlocked-label {
    color:      var(--mra-gold);
    text-align: center;
    font-size:  13px;
}

/* Summary content */
.mra-summary-content {
    font-size:   17px;
    color:       var(--mra-text-2);
    line-height: 1.8;
}

.mra-summary-content p { margin: 0 0 16px; }
.mra-summary-content p:last-child { margin-bottom: 0; }
.mra-summary-content strong { color: var(--mra-text); }
.mra-summary-content h3 { color: var(--mra-text); font-size: 18px; margin: 24px 0 10px; }

/* Full analysis content */
.mra-full-analysis-content {
    font-size:   16px;
    color:       var(--mra-text-2);
    line-height: 1.85;
}

.mra-full-analysis-content h3 {
    font-size:      20px;
    font-weight:    700;
    color:          var(--mra-text);
    margin:         32px 0 14px;
    padding-bottom: 8px;
    border-bottom:  1px solid var(--mra-border);
}

.mra-full-analysis-content h3:first-child { margin-top: 0; }

.mra-full-analysis-content p {
    margin: 0 0 18px;
}

.mra-full-analysis-content strong {
    color: var(--mra-text);
}

/* ==========================================================================
   Payment CTA
   ========================================================================== */

.mra-payment-cta {
    background:    linear-gradient(135deg, #1a0533 0%, #0f1a3a 100%);
    border:        1px solid rgba(124,58,237,0.45);
    border-radius: var(--mra-radius);
    padding:       40px 36px;
    margin-bottom: 28px;
    text-align:    center;
    box-shadow:    0 8px 40px rgba(124,58,237,0.2);
}

.mra-cta-stars {
    font-size:      18px;
    letter-spacing: 0.2em;
    color:          var(--mra-gold);
    margin-bottom:  20px;
}

.mra-cta-title {
    margin:         0 0 16px;
    font-size:      24px;
    font-weight:    800;
    color:          var(--mra-text);
    line-height:    1.25;
}

.mra-cta-desc {
    margin:      0 0 28px;
    font-size:   15px;
    color:       var(--mra-text-muted);
    line-height: 1.7;
    max-width:   520px;
    margin-left: auto;
    margin-right:auto;
}

.mra-features {
    display:         flex;
    flex-wrap:       wrap;
    gap:             8px;
    justify-content: center;
    margin-bottom:   32px;
}

.mra-feature-pill {
    background:    rgba(124,58,237,0.15);
    border:        1px solid rgba(124,58,237,0.35);
    color:         var(--mra-text-2);
    padding:       6px 14px;
    border-radius: 20px;
    font-size:     13px;
    font-weight:   500;
}

/* Pay button */
.mra-pay-btn {
    display:        inline-flex;
    align-items:    center;
    justify-content:center;
    padding:        18px 48px;
    background:     linear-gradient(135deg, var(--mra-gold), #d97706);
    color:          #1a0533;
    border:         none;
    border-radius:  50px;
    font-size:      18px;
    font-weight:    800;
    font-family:    var(--mra-font);
    cursor:         pointer;
    letter-spacing: 0.02em;
    box-shadow:     0 8px 32px rgba(245,158,11,0.45);
    transition:     transform 0.15s ease, box-shadow 0.15s ease;
    margin-bottom:  16px;
}

.mra-pay-btn:hover:not(:disabled) {
    transform:  translateY(-2px);
    box-shadow: 0 14px 40px rgba(245,158,11,0.6);
}

.mra-pay-btn:active  { transform: scale(0.98); }
.mra-pay-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.mra-secure-note {
    font-size: 12px;
    color:     var(--mra-text-faint);
    margin:    0;
}

/* ==========================================================================
   Share block
   ========================================================================== */

.mra-share-block {
    margin-bottom:   28px;
    text-align:      center;
}

.mra-share-title {
    font-size:      13px;
    font-weight:    600;
    color:          var(--mra-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin:         0 0 16px;
}

.mra-share-buttons {
    display:         flex;
    flex-wrap:       wrap;
    gap:             8px;
    justify-content: center;
}

.mra-share-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       9px 16px;
    border-radius: 8px;
    font-size:     13px;
    font-weight:   600;
    font-family:   var(--mra-font);
    text-decoration: none;
    border:        1px solid var(--mra-border);
    background:    var(--mra-card-2);
    color:         var(--mra-text-2);
    cursor:        pointer;
    transition:    background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.mra-share-btn:hover {
    background:   var(--mra-card);
    border-color: var(--mra-primary);
    color:        var(--mra-text);
    transform:    translateY(-1px);
}

.mra-share-btn svg {
    width:     16px;
    height:    16px;
    flex-shrink:0;
}

.mra-share-facebook  { color: #e7f0ff; }
.mra-share-twitter   { color: #e7eeff; }
.mra-share-whatsapp  { color: #dcfff0; }
.mra-share-telegram  { color: #d6f0ff; }
.mra-share-linkedin  { color: #d6eaff; }

.mra-share-copy {
    background: var(--mra-card-2);
    color:      var(--mra-text-2);
}

/* ==========================================================================
   Disclaimer
   ========================================================================== */

.mra-disclaimer {
    text-align:  center;
    font-size:   12px;
    color:       var(--mra-text-faint);
    line-height: 1.7;
    margin:      32px 0 0;
    padding:     20px;
    border-top:  1px solid var(--mra-border);
}

/* ==========================================================================
   Payment overlay
   ========================================================================== */

.mra-payment-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(13,11,24,0.92);
    z-index:    99999;
    display:    flex;
    align-items:    center;
    justify-content:center;
    backdrop-filter: blur(4px);
}

.mra-payment-overlay-inner {
    text-align: center;
    color:      var(--mra-text);
    font-size:  17px;
}

/* ==========================================================================
   Reading list — [mystic_reading_list] shortcode
   ========================================================================== */

.mra-list-wrapper {
    font-family: var(--mra-font);
    color:       var(--mra-text);
}

/* Grid */
.mra-list-grid {
    display:               grid;
    gap:                   24px;
    grid-template-columns: repeat(3, 1fr);
}

.mra-list-cols-1 .mra-list-grid { grid-template-columns: 1fr; }
.mra-list-cols-2 .mra-list-grid { grid-template-columns: repeat(2, 1fr); }
.mra-list-cols-3 .mra-list-grid { grid-template-columns: repeat(3, 1fr); }
.mra-list-cols-4 .mra-list-grid { grid-template-columns: repeat(4, 1fr); }

/* Card */
.mra-list-card {
    background:    var(--mra-card);
    border:        1px solid var(--mra-border);
    border-radius: var(--mra-radius);
    overflow:      hidden;
    display:       flex;
    flex-direction:column;
    transition:    transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow:    0 4px 20px rgba(0,0,0,0.35);
}

.mra-list-card:hover {
    transform:  translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 24px rgba(124,58,237,0.18);
}

/* Card with portrait thumbnail */
.mra-list-card-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--mra-bg);
}

.mra-list-card-thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.3s ease;
}

.mra-list-card:hover .mra-list-card-thumb img {
    transform: scale(1.04);
}

.mra-list-card-sign {
    position:   absolute;
    bottom:     10px;
    right:      12px;
    font-size:  22px;
    filter:     drop-shadow(0 2px 6px rgba(0,0,0,0.7));
}

/* Decorative header for cards without portrait */
.mra-list-card-header {
    background:      linear-gradient(135deg, #1a0533 0%, #0a1628 100%);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         32px 16px;
    border-bottom:   1px solid var(--mra-border);
}

.mra-list-card-sign-large {
    font-size:  52px;
    line-height:1;
    filter:     drop-shadow(0 0 16px rgba(124,58,237,0.6));
}

/* Card body */
.mra-list-card-body {
    padding:        20px 22px 24px;
    display:        flex;
    flex-direction: column;
    flex:           1;
    gap:            10px;
}

.mra-list-card-meta {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
}

.mra-list-card-flag { font-size: 16px; }

.mra-list-card-date {
    font-size:   12px;
    color:       var(--mra-text-faint);
    margin-right:auto;
}

/* Badges */
.mra-list-badge {
    display:        inline-block;
    padding:        2px 10px;
    border-radius:  20px;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.04em;
}

.mra-list-badge-gold  { background: rgba(245,158,11,0.18); color: #f59e0b; border: 1px solid rgba(245,158,11,0.35); }
.mra-list-badge-green { background: rgba(52,211,153,0.15);  color: #34d399; border: 1px solid rgba(52,211,153,0.3); }
.mra-list-badge-lock  { background: rgba(157,142,196,0.12); color: var(--mra-text-muted); border: 1px solid var(--mra-border); }

/* Title */
.mra-list-card-title {
    margin:      0;
    font-size:   16px;
    font-weight: 700;
    line-height: 1.3;
    color:       var(--mra-text);
}

.mra-list-card-title a {
    color:           inherit;
    text-decoration: none;
    transition:      color 0.15s ease;
}

.mra-list-card-title a:hover { color: var(--mra-primary); }

/* Excerpt */
.mra-list-card-excerpt {
    margin:      0;
    font-size:   14px;
    color:       var(--mra-text-muted);
    line-height: 1.65;
    flex:        1;
}

/* CTA link */
.mra-list-card-btn {
    display:         inline-block;
    margin-top:      auto;
    padding:         10px 20px;
    background:      linear-gradient(135deg, var(--mra-primary), var(--mra-secondary));
    color:           #fff;
    border-radius:   8px;
    font-size:       13px;
    font-weight:     700;
    text-decoration: none;
    text-align:      center;
    transition:      opacity 0.15s ease, transform 0.15s ease;
    letter-spacing:  0.02em;
}

.mra-list-card-btn:hover {
    opacity:   0.88;
    transform: translateY(-1px);
    color:     #fff;
}

/* Pagination */
.mra-list-pagination {
    display:         flex;
    flex-wrap:       wrap;
    gap:             8px;
    justify-content: center;
    margin-top:      40px;
}

.mra-list-page-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    background:      var(--mra-card);
    border:          1px solid var(--mra-border);
    border-radius:   8px;
    color:           var(--mra-text-muted);
    text-decoration: none;
    font-size:       14px;
    font-weight:     600;
    transition:      background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mra-list-page-btn:hover,
.mra-list-page-current {
    background:   var(--mra-primary);
    border-color: var(--mra-primary);
    color:        #fff;
}

/* Empty state */
.mra-list-empty {
    text-align: center;
    padding:    60px 20px;
    color:      var(--mra-text-muted);
}

.mra-list-empty-icon {
    font-size:     40px;
    color:         var(--mra-text-faint);
    margin-bottom: 12px;
}

/* Responsive */
@media (max-width: 900px) {
    .mra-list-cols-3 .mra-list-grid,
    .mra-list-cols-4 .mra-list-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 580px) {
    .mra-list-grid { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   Mystic Portrait section
   ========================================================================== */

.mra-portrait-section {
    margin-bottom: 28px;
}

/* Purchase CTA */
.mra-portrait-cta {
    background:    linear-gradient(135deg, #1a0533 0%, #0a1628 100%);
    border:        1px solid rgba(245,158,11,0.35);
    border-radius: var(--mra-radius);
    padding:       0;
    box-shadow:    0 8px 40px rgba(245,158,11,0.1);
    overflow:      hidden;
}

.mra-portrait-cta-inner {
    padding:    40px 36px;
    text-align: center;
}

.mra-portrait-icon {
    font-size:     52px;
    line-height:   1;
    margin-bottom: 16px;
    filter:        drop-shadow(0 4px 12px rgba(245,158,11,0.4));
}

.mra-portrait-title {
    margin:         0 0 14px;
    font-size:      24px;
    font-weight:    800;
    color:          var(--mra-text);
    line-height:    1.25;
}

.mra-portrait-desc {
    margin:      0 0 24px;
    font-size:   15px;
    color:       var(--mra-text-muted);
    line-height: 1.7;
    max-width:   520px;
    margin-left: auto;
    margin-right:auto;
}

.mra-portrait-features {
    list-style:    none;
    margin:        0 0 32px;
    padding:       0;
    display:       inline-block;
    text-align:    left;
}

.mra-portrait-features li {
    font-size:     14px;
    color:         var(--mra-text-2);
    padding:       5px 0;
    line-height:   1.5;
}

/* Portrait pay button — matches the reading pay button style but gold variant */
.mra-portrait-btn {
    display:        inline-flex;
    align-items:    center;
    justify-content:center;
    padding:        18px 48px;
    background:     linear-gradient(135deg, #f59e0b, #d97706);
    color:          #1a0533;
    border:         none;
    border-radius:  50px;
    font-size:      17px;
    font-weight:    800;
    font-family:    var(--mra-font);
    cursor:         pointer;
    letter-spacing: 0.02em;
    box-shadow:     0 8px 32px rgba(245,158,11,0.45);
    transition:     transform 0.15s ease, box-shadow 0.15s ease;
    margin-bottom:  14px;
}

.mra-portrait-btn:hover:not(:disabled) {
    transform:  translateY(-2px);
    box-shadow: 0 14px 40px rgba(245,158,11,0.65);
}

.mra-portrait-btn:active   { transform: scale(0.98); }
.mra-portrait-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Generating state */
.mra-portrait-generating {
    background:    var(--mra-card);
    border:        1px solid var(--mra-border);
    border-radius: var(--mra-radius);
    padding:       52px 36px;
    text-align:    center;
    color:         var(--mra-text-muted);
    font-size:     15px;
}

.mra-portrait-generating p { margin: 0; }

/* Generated image display */
.mra-portrait-result {
    background:    var(--mra-card);
    border:        1px solid var(--mra-border);
    border-radius: var(--mra-radius);
    overflow:      hidden;
    box-shadow:    var(--mra-shadow), 0 0 48px rgba(245,158,11,0.12);
}

.mra-portrait-label {
    font-size:      13px;
    font-weight:    700;
    color:          var(--mra-gold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin:         24px 24px 16px;
    padding-bottom: 12px;
    border-bottom:  1px solid var(--mra-border);
}

.mra-portrait-image-wrapper {
    padding:    0 24px 0;
    text-align: center;
}

.mra-portrait-img {
    width:         100%;
    max-width:     600px;
    height:        auto;
    border-radius: var(--mra-radius-sm);
    display:       block;
    margin:        0 auto;
    box-shadow:    0 8px 40px rgba(0,0,0,0.6);
}

.mra-portrait-caption {
    font-size:   12px;
    color:       var(--mra-text-faint);
    text-align:  center;
    padding:     16px 24px 24px;
    margin:      0;
    line-height: 1.6;
}

/* ==========================================================================
   Portrait re-generation section
   ========================================================================== */

.mra-regen-section {
    margin-top:    24px;
    background:    linear-gradient(135deg, #120824 0%, #0a1628 100%);
    border:        1px solid rgba(124,58,237,0.3);
    border-radius: var(--mra-radius);
    overflow:      hidden;
}

.mra-regen-inner {
    padding:    36px;
    text-align: center;
}

.mra-regen-icon {
    font-size:     44px;
    line-height:   1;
    margin-bottom: 14px;
    filter:        drop-shadow(0 4px 12px rgba(124,58,237,0.5));
}

.mra-regen-title {
    margin:         0 0 12px;
    font-size:      20px;
    font-weight:    800;
    color:          var(--mra-text);
    letter-spacing: 0.01em;
}

.mra-regen-desc {
    margin:      0 0 20px;
    font-size:   14px;
    color:       var(--mra-text-muted);
    line-height: 1.7;
    max-width:   520px;
    margin-left: auto;
    margin-right:auto;
}

.mra-regen-textarea {
    width:         100%;
    padding:       14px 16px;
    background:    rgba(15,12,30,0.7);
    border:        1px solid var(--mra-border);
    border-radius: var(--mra-radius-sm);
    color:         var(--mra-text);
    font-size:     14px;
    font-family:   var(--mra-font);
    line-height:   1.6;
    resize:        vertical;
    outline:       none;
    box-sizing:    border-box;
    transition:    border-color 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 8px;
    min-height:    100px;
}

.mra-regen-textarea:focus {
    border-color: var(--mra-primary);
    box-shadow:   0 0 0 3px rgba(124,58,237,0.18);
}

.mra-regen-textarea::placeholder {
    color: var(--mra-text-faint);
}

.mra-regen-hint {
    font-size:     12px;
    color:         var(--mra-text-faint);
    margin:        0 0 20px;
    font-style:    italic;
}

/* Re-generate button */
.mra-regen-btn {
    display:        inline-flex;
    align-items:    center;
    justify-content:center;
    padding:        16px 40px;
    background:     linear-gradient(135deg, var(--mra-primary), var(--mra-secondary));
    color:          #fff;
    border:         none;
    border-radius:  50px;
    font-size:      16px;
    font-weight:    800;
    font-family:    var(--mra-font);
    cursor:         pointer;
    letter-spacing: 0.02em;
    box-shadow:     0 8px 32px rgba(124,58,237,0.45);
    transition:     transform 0.15s ease, box-shadow 0.15s ease;
    margin-bottom:  14px;
}

.mra-regen-btn:hover:not(:disabled) {
    transform:  translateY(-2px);
    box-shadow: 0 14px 40px rgba(124,58,237,0.65);
}

.mra-regen-btn:active   { transform: scale(0.98); }
.mra-regen-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Generating state */
.mra-regen-generating {
    background:    rgba(124,58,237,0.06);
    border:        1px solid rgba(124,58,237,0.2);
    border-radius: var(--mra-radius);
    padding:       44px 32px;
    margin-top:    24px;
    text-align:    center;
    color:         var(--mra-text-muted);
    font-size:     15px;
}

.mra-regen-generating p { margin: 0; }

@media (max-width: 640px) {
    .mra-regen-inner { padding: 24px 18px; }
    .mra-regen-btn   { width: 100%; justify-content: center; padding: 16px 24px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
    .mra-form-wrapper { margin: 16px; }
    .mra-form-header  { padding: 28px 24px 22px; }
    .mra-form         { padding: 24px; }
    .mra-form-title   { font-size: 20px; }

    .mra-section            { padding: 24px 20px; }
    .mra-payment-cta        { padding: 28px 20px; }
    .mra-cta-title          { font-size: 20px; }
    .mra-pay-btn            { width: 100%; justify-content: center; }

    .mra-portrait-cta-inner { padding: 28px 20px; }
    .mra-portrait-title     { font-size: 20px; }
    .mra-portrait-btn       { width: 100%; justify-content: center; }
    .mra-portrait-features  { text-align: left; width: 100%; }

    .mra-share-btn span { display: none; }
    .mra-share-btn      { padding: 10px 12px; }
    .mra-share-btn svg  { width: 20px; height: 20px; }

    .mra-full-analysis-content h3 { font-size: 17px; }
}