/* ============================================================
   Photo Membership Manager – Frontend Styles v1.2
   Centering & layout fixes:
   • Universal box-sizing so padding never causes overflow
   • Removed float:left from legend (was breaking fieldset flow)
   • min-width:0 on all flex children (prevents flex blowout)
   • overflow:hidden on fieldsets and rows (contains floats)
   • Explicit width:100% on form, fieldsets, rows
   • Theme-reset on fieldset border/padding/margin
   ============================================================ */

/* ── 1. Universal box-sizing reset (scoped to plugin only) ── */
.pmm-wrap,
.pmm-wrap *,
.pmm-wrap *::before,
.pmm-wrap *::after {
    box-sizing: border-box;
}

/* ── 2. CSS custom properties ── */
.pmm-wrap {
    --pmm-primary:      #1a73e8;
    --pmm-primary-dk:   #1558b0;
    --pmm-success-bg:   #d4edda;
    --pmm-success-bd:   #27ae60;
    --pmm-success-tx:   #155724;
    --pmm-error-bg:     #fde8e8;
    --pmm-error-bd:     #e74c3c;
    --pmm-error-tx:     #7b1c1c;
    --pmm-border:       #d0d7de;
    --pmm-card:         #ffffff;
    --pmm-text:         #24292f;
    --pmm-muted:        #6e7781;
    --pmm-radius:       8px;
    --pmm-shadow:       0 2px 12px rgba(0,0,0,.08);
}

/* ── 3. Outer wrapper — centered, max-width, never overflows ── */
.pmm-wrap {
    display: block;
    width: 100%;
    max-width: 900px;
    margin: 2rem auto;
    padding: 0 1.25rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--pmm-text);
    overflow: hidden;
}

/* ── 4. Title ── */
.pmm-title {
    display: block;
    width: 100%;
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 1.5rem;
    color: var(--pmm-primary);
}
.pmm-required-note {
    display: block;
    width: 100%;
    font-size: .85rem;
    color: var(--pmm-muted);
    margin: 0 0 1rem;
    text-align: right;
}

/* ── 5. Notices ── */
.pmm-notice {
    display: block;
    width: 100%;
    padding: .9rem 1.2rem;
    border-radius: var(--pmm-radius);
    margin: 0 0 1.5rem;
    font-size: .95rem;
    line-height: 1.55;
}
.pmm-notice--success {
    background: var(--pmm-success-bg);
    border-left: 4px solid var(--pmm-success-bd);
    color: var(--pmm-success-tx);
}
.pmm-notice--error {
    background: var(--pmm-error-bg);
    border-left: 4px solid var(--pmm-error-bd);
    color: var(--pmm-error-tx);
}

/* ── 6. Form — fills the wrapper, stacks sections ── */
.pmm-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

/* ── 7. Fieldsets — theme-neutral reset + card style ── */
.pmm-fieldset {
    display: block;
    width: 100%;
    /* No top padding — the legend header bar provides that space */
    margin: 0;
    padding: 0 0 1.5rem;
    border: 1px solid var(--pmm-border);
    border-radius: var(--pmm-radius);
    background: var(--pmm-card);
    box-shadow: var(--pmm-shadow);
    overflow: hidden;
    min-width: 0;
}

/* ── 8. Legend — rendered as a full-width header bar inside the card ── */
/*
 * Native <legend> sits on the top border and is hard to style consistently.
 * Solution: pull it wide (negative side margins cancel the fieldset padding),
 * give it its own background + bottom border, and use generous padding so
 * the number title is clearly inside the box — never touching the border.
 */
.pmm-fieldset legend {
    display: block;
    /* Stretch edge-to-edge inside the fieldset */
    width: calc(100% + 2px);   /* +2px covers the 1px border on each side */
    margin: -1px -1px 1.25rem; /* pull up flush with top border, then gap below */
    padding: .85rem 1.5rem;
    /* Header bar appearance */
    background: linear-gradient(135deg, #eef4fd 0%, #f4f8ff 100%);
    border-bottom: 2px solid var(--pmm-primary);
    border-radius: var(--pmm-radius) var(--pmm-radius) 0 0;
    /* Typography */
    font-size: 1rem;
    font-weight: 700;
    color: var(--pmm-primary);
    letter-spacing: .01em;
    /* Layout reset — undo any theme interference */
    float: none;
    position: static;
    box-sizing: border-box;
}

/* Fields inside fieldset need their own horizontal padding now */
.pmm-fieldset .pmm-row,
.pmm-fieldset .pmm-field,
.pmm-fieldset .pmm-checkbox-grid,
.pmm-fieldset .pmm-checkbox-grid--lg,
.pmm-fieldset .pmm-sub-heading,
.pmm-fieldset .pmm-hint,
.pmm-fieldset .pmm-field--checkbox,
.pmm-fieldset .pmm-select-full {
    padding-left:  1.5rem;
    padding-right: 1.5rem;
}
/* Rows already have gap; avoid double-padding their children */
.pmm-fieldset .pmm-row > .pmm-field {
    padding-left:  0;
    padding-right: 0;
}
/* The row itself carries the outer padding */
.pmm-fieldset .pmm-row {
    margin-top: .5rem;
}

/* ── 9. Row layouts ── */
.pmm-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    margin-top: .75rem;
}
.pmm-row--2 > .pmm-field {
    flex: 1 1 calc(50% - .5rem);
    min-width: 200px;
    max-width: 100%;
}
.pmm-row--3 > .pmm-field {
    flex: 1 1 calc(33.333% - .7rem);
    min-width: 150px;
    max-width: 100%;
}

/* ── 10. Individual fields ── */
.pmm-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}
.pmm-field label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--pmm-text);
    margin: 0;
}

/* ── 11. All input controls ── */
.pmm-field input[type="text"],
.pmm-field input[type="email"],
.pmm-field input[type="password"],
.pmm-field input[type="tel"],
.pmm-field input[type="url"],
.pmm-field select,
.pmm-field textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: .55rem .75rem;
    margin: 0;
    border: 1px solid var(--pmm-border);
    border-radius: 6px;
    font-size: .95rem;
    font-family: inherit;
    line-height: 1.4;
    background: #fff;
    color: var(--pmm-text);
    transition: border-color .2s, box-shadow .2s;
}
.pmm-field input:focus,
.pmm-field select:focus,
.pmm-field textarea:focus {
    outline: none;
    border-color: var(--pmm-primary);
    box-shadow: 0 0 0 3px rgba(26,115,232,.18);
}
.pmm-field textarea {
    resize: vertical;
    min-height: 88px;
}
.pmm-select-full {
    max-width: 440px;
    width: 100%;
}

/* ── 12. Password strength bar ── */
.pmm-pwd-strength {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #e8e8e8;
    overflow: hidden;
    margin-top: 5px;
}
.pmm-pwd-strength span {
    display: block;
    height: 100%;
    width: 0;
    transition: width .3s ease, background .3s ease;
}

/* ── 13. Hints & required star ── */
.pmm-hint {
    display: block;
    font-size: .78rem;
    color: var(--pmm-muted);
    margin: 0;
}
.pmm-req { color: var(--pmm-error-bd); }

/* ── 14. File inputs ── */
.pmm-field--file input[type="file"] {
    display: block;
    width: 100%;
    padding: .35rem 0;
    background: transparent;
    border: none;
    box-shadow: none;
}
.pmm-file-preview-wrap {
    display: block;
    width: 100%;
}
.pmm-file-preview-wrap img {
    display: block;
    max-width: 120px;
    max-height: 120px;
    margin-top: 6px;
    border-radius: 6px;
    border: 1px solid var(--pmm-border);
}

/* ── 15. Inline checkbox (age confirmation) ── */
.pmm-field--checkbox {
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
}
.pmm-field--checkbox label {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-weight: 400;
    cursor: pointer;
    flex-wrap: wrap;
}
/* Override the 100%-width rule for checkboxes */
.pmm-field--checkbox input[type="checkbox"],
.pmm-checkbox-label input[type="checkbox"] {
    display: inline-block;
    width: auto;
    max-width: none;
    flex-shrink: 0;
    margin-top: .2rem;
    padding: 0;
    border: none;
    box-shadow: none;
}

/* ── 16. Checkbox grids (languages, equipment, themes) ── */
.pmm-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: .55rem 1rem;
    width: 100%;
    margin-top: .6rem;
}
.pmm-checkbox-grid--lg {
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.pmm-checkbox-label {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .9rem;
    cursor: pointer;
    min-width: 0;
}

/* ── 17. Sub-heading ── */
.pmm-sub-heading {
    display: block;
    width: 100%;
    margin: 1rem 0 .5rem;
    font-size: .83rem;
    color: var(--pmm-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── 18. Honeypot ── */
.pmm-hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ── 19. Submit ── */
.pmm-submit-row {
    display: block;
    width: 100%;
    text-align: center;
    padding: .5rem 0 1rem;
}
.pmm-btn {
    display: inline-block;
    padding: .75rem 2.75rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
    transition: background .2s, box-shadow .2s, transform .15s;
}
.pmm-btn--primary { background: var(--pmm-primary); color: #fff; }
.pmm-btn--primary:hover {
    background: var(--pmm-primary-dk);
    box-shadow: 0 4px 12px rgba(26,115,232,.35);
    transform: translateY(-1px);
}
.pmm-btn--primary:focus {
    outline: 3px solid rgba(26,115,232,.45);
    outline-offset: 2px;
}
.pmm-btn--primary:active { transform: translateY(0); }

/* ── 20. Responsive ── */
@media (max-width: 680px) {
    .pmm-wrap { padding: 0 .85rem; }
    .pmm-row--2 > .pmm-field,
    .pmm-row--3 > .pmm-field { flex: 1 1 100%; min-width: 0; }
    .pmm-fieldset { padding: 1.1rem 1rem 1.2rem; }
}
@media (max-width: 480px) {
    .pmm-title { font-size: 1.35rem; }
    .pmm-checkbox-grid,
    .pmm-checkbox-grid--lg { grid-template-columns: 1fr 1fr; }
    .pmm-btn { width: 100%; padding: .8rem 1rem; }
}
@media (max-width: 360px) {
    .pmm-checkbox-grid,
    .pmm-checkbox-grid--lg { grid-template-columns: 1fr; }
}

/* ── Responsive overrides for header-bar legend padding ── */
@media (max-width: 680px) {
    .pmm-fieldset { padding-bottom: 1.1rem; }
    .pmm-fieldset legend {
        padding: .7rem 1rem;
        margin-bottom: 1rem;
    }
    .pmm-fieldset .pmm-row,
    .pmm-fieldset .pmm-field,
    .pmm-fieldset .pmm-checkbox-grid,
    .pmm-fieldset .pmm-checkbox-grid--lg,
    .pmm-fieldset .pmm-sub-heading,
    .pmm-fieldset .pmm-field--checkbox,
    .pmm-fieldset .pmm-select-full {
        padding-left:  1rem;
        padding-right: 1rem;
    }
}

/* ============================================================
   Thank You Page — [photo_membership_thankyou]
   ============================================================ */

.pmm-thankyou-wrap {
    text-align: center;
    padding: 2rem 1.25rem 3rem;
}

/* ── Animated checkmark SVG ── */
.pmm-ty-icon {
    margin: 0 auto 1.5rem;
    width: 90px;
    height: 90px;
}
.pmm-ty-icon svg { width: 100%; height: 100%; }

.pmm-ty-circle {
    stroke-dasharray: 226;
    stroke-dashoffset: 226;
    animation: pmm-draw-circle .6s ease forwards;
}
.pmm-ty-check {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: pmm-draw-check .4s ease .55s forwards;
}
@keyframes pmm-draw-circle {
    to { stroke-dashoffset: 0; }
}
@keyframes pmm-draw-check {
    to { stroke-dashoffset: 0; }
}

/* ── Heading & handle ── */
.pmm-ty-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--pmm-primary);
    margin: 0 0 .5rem;
}
.pmm-ty-handle {
    font-size: 1.15rem;
    color: var(--pmm-text);
    margin: 0 0 1.75rem;
}

/* ── Main card ── */
.pmm-ty-card {
    background: linear-gradient(135deg, #eef4fd 0%, #f4f8ff 100%);
    border: 1px solid #c8d8f5;
    border-left: 5px solid var(--pmm-primary);
    border-radius: var(--pmm-radius);
    padding: 1.75rem 2rem;
    margin: 0 auto 2rem;
    max-width: 600px;
    text-align: left;
    box-shadow: var(--pmm-shadow);
}
.pmm-ty-card-icon {
    font-size: 2.5rem;
    margin-bottom: .75rem;
    line-height: 1;
}
.pmm-ty-card-heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pmm-primary);
    margin: 0 0 .75rem;
}
.pmm-ty-card-body {
    font-size: .95rem;
    color: var(--pmm-text);
    line-height: 1.65;
    margin: 0 0 .6rem;
}
.pmm-ty-card-body:last-child { margin-bottom: 0; }

/* ── What happens next — step list ── */
.pmm-ty-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 520px;
    margin: 0 auto 2.25rem;
    text-align: left;
}
.pmm-ty-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.pmm-ty-step-num {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--pmm-primary);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .1rem;
}
.pmm-ty-step-text {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.pmm-ty-step-text strong {
    font-size: .95rem;
    color: var(--pmm-text);
}
.pmm-ty-step-text span {
    font-size: .85rem;
    color: var(--pmm-muted);
    line-height: 1.4;
}

/* ── Back button ── */
.pmm-ty-action { margin-top: .5rem; }

/* ── Responsive ── */
@media (max-width: 480px) {
    .pmm-ty-title     { font-size: 1.5rem; }
    .pmm-ty-card      { padding: 1.25rem 1rem; }
    .pmm-ty-steps     { padding: 0 .25rem; }
}