/* ==========================================================================
Forever Memories — Frontend Editor
========================================================================== */


/* ---- CSS Variables ---- */
.fm-editor {
--fm-primary:       #0b3e66;
--fm-accent:        #6cb34b;
--fm-danger:        #c0392b;
--fm-border:        #dde1e7;
--fm-bg:            #f7f8fa;
--fm-bg-white:      #ffffff;
--fm-text:          #1a1a2e;
--fm-text-muted:    #6b7280;
--fm-radius:        8px;
--fm-radius-sm:     4px;
--fm-shadow:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
--fm-shadow-md:     0 4px 12px rgba(0,0,0,.10);
--fm-transition:    150ms ease;
font-family:        inherit;
color:              var(--fm-text);
max-width:          860px;
margin:             0 auto;
}


/* ==========================================================================
Toast
========================================================================== */


.fm-editor__toast {
position:        fixed;
bottom:          24px;
right:           24px;
z-index:         99999;
padding:         12px 20px;
border-radius:   var(--fm-radius);
font-size:       14px;
font-weight:     500;
line-height:     1.4;
box-shadow:      var(--fm-shadow-md);
opacity:         0;
transform:       translateY(8px);
pointer-events:  none;
transition:      opacity var(--fm-transition), transform var(--fm-transition);
max-width:       320px;
}


.fm-editor__toast.is-visible {
opacity:    1;
transform:  translateY(0);
}


.fm-editor__toast.is-success {
background: var(--fm-accent);
color:      #fff;
}


.fm-editor__toast.is-error {
background: var(--fm-danger);
color:      #fff;
}


/* ==========================================================================
Tabs
========================================================================== */


.fm-editor__tabs {
display:        flex;
flex-wrap:      wrap;
gap:            4px;
border-bottom:  2px solid var(--fm-border);
margin-bottom:  28px;
padding-bottom: 0;
}


.fm-editor__tab {
padding:          10px 18px;
font-size:        14px;
font-weight:      500;
color:            var(--fm-text-muted);
background:       transparent;
border:           none;
border-bottom:    2px solid transparent;
margin-bottom:    -2px;
cursor:           pointer;
border-radius:    var(--fm-radius-sm) var(--fm-radius-sm) 0 0;
transition:       color var(--fm-transition), border-color var(--fm-transition);
white-space:      nowrap;
}


.fm-editor__tab:hover {
color: var(--fm-primary);
}


.fm-editor__tab.is-active {
color:        var(--fm-primary);
border-color: var(--fm-primary);
font-weight:  600;
}


/* ==========================================================================
Panels
========================================================================== */


.fm-editor__panel {
display: none;
}


.fm-editor__panel.is-active {
display: block;
}


.fm-editor__panel-title {
font-size:     20px;
font-weight:   700;
color:         var(--fm-primary);
margin:        0 0 24px;
padding:       0;
border:        none;
background:    none;
}


/* ==========================================================================
Fields
========================================================================== */


.fm-editor__field {
margin-bottom: 20px;
}


.fm-editor__field label,
.fm-editor__field > label {
display:       block;
font-size:     13px;
font-weight:   600;
color:         var(--fm-text);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: .04em;
}


.fm-editor__field input[type="text"],
.fm-editor__field input[type="url"],
.fm-editor__field input[type="date"],
.fm-editor__field input[type="email"],
.fm-editor__field textarea,
.fm-editor__field select {
width:         100%;
padding:       10px 14px;
font-size:     15px;
color:         var(--fm-text);
background:    var(--fm-bg-white);
border:        1px solid var(--fm-border);
border-radius: var(--fm-radius);
box-shadow:    var(--fm-shadow);
transition:    border-color var(--fm-transition), box-shadow var(--fm-transition);
box-sizing:    border-box;
appearance:    none;
}


.fm-editor__field input:focus,
.fm-editor__field textarea:focus,
.fm-editor__field select:focus {
outline:      none;
border-color: var(--fm-primary);
box-shadow:   0 0 0 3px rgba(11,62,102,.12);
}


.fm-editor__field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}


@media ( max-width: 600px ) {
.fm-editor__field-row {
grid-template-columns: 1fr;
}
}


.fm-editor__help {
font-size:   13px;
color:       var(--fm-text-muted);
margin:      6px 0 0;
line-height: 1.5;
}


/* ==========================================================================
Actions Bar
========================================================================== */


.fm-editor__actions {
display:     flex;
gap:         12px;
flex-wrap:   wrap;
margin-top:  28px;
padding-top: 20px;
border-top:  1px solid var(--fm-border);
}


/* ==========================================================================
Buttons
========================================================================== */


.fm-btn {
display:        inline-flex;
align-items:    center;
justify-content: center;
gap:            6px;
padding:        10px 20px;
font-size:      14px;
font-weight:    600;
border-radius:  var(--fm-radius);
border:         1px solid transparent;
cursor:         pointer;
transition:     background var(--fm-transition), color var(--fm-transition),
border-color var(--fm-transition), box-shadow var(--fm-transition);
white-space:    nowrap;
text-decoration: none;
}


.fm-btn--primary {
background: var(--fm-primary);
color:      #fff;
border-color: var(--fm-primary);
}


.fm-btn--primary:hover {
background:   #0d4f82;
border-color: #0d4f82;
}


.fm-btn--secondary {
background:   var(--fm-bg);
color:        var(--fm-primary);
border-color: var(--fm-border);
}


.fm-btn--secondary:hover {
background:   #eef1f5;
border-color: #c5cdd8;
}


.fm-btn--ghost {
background:   transparent;
color:        var(--fm-text-muted);
border-color: transparent;
}


.fm-btn--ghost:hover {
color:      var(--fm-danger);
background: rgba(192,57,43,.06);
}


.fm-btn:disabled {
opacity: .5;
cursor:  not-allowed;
}


.fm-btn--sm {
padding: 0.4rem 0.9rem;
font-size: 0.85rem;
}


/* ==========================================================================
Main Photo
========================================================================== */


.fm-editor__photo-wrap {
display:     flex;
align-items: center;
gap:         16px;
flex-wrap:   wrap;
}


.fm-editor__photo-preview {
width:         80px;
height:        80px;
border-radius: var(--fm-radius);
border:        1px solid var(--fm-border);
overflow:      hidden;
background:    var(--fm-bg);
flex-shrink:   0;
display:       flex;
align-items:   center;
justify-content: center;
}


.fm-editor__photo-preview img {
width:      100%;
height:     100%;
object-fit: cover;
display:    block;
}


.fm-editor__photo-remove {
display: none; /* shown via JS when photo is set */
}


/* ==========================================================================
Gallery Grid
========================================================================== */


.fm-editor__gallery-limit {
font-size:     14px;
color:         var(--fm-text-muted);
margin-bottom: 16px;
}


.fm-editor__upgrade-link {
color:           var(--fm-accent);
text-decoration: none;
font-weight:     600;
margin-left:     8px;
}


.fm-editor__upgrade-link:hover {
text-decoration: underline;
}


.fm-editor__gallery-grid {
display:               grid;
grid-template-columns: repeat( auto-fill, minmax( 120px, 1fr ) );
gap:                   12px;
list-style:            none;
margin:                0 0 20px;
padding:               0;
}


.fm-editor__gallery-item {
position:      relative;
border-radius: var(--fm-radius);
overflow:      hidden;
aspect-ratio:  1;
background:    var(--fm-bg);
border:        1px solid var(--fm-border);
box-shadow:    var(--fm-shadow);
}


.fm-editor__gallery-item img {
width:      100%;
height:     100%;
object-fit: cover;
display:    block;
}


.fm-editor__gallery-remove {
position:      absolute;
top:           4px;
right:         4px;
width:         24px;
height:        24px;
border-radius: 50%;
background:    rgba(0,0,0,.55);
color:         #fff;
border:        none;
font-size:     16px;
line-height:   1;
cursor:        pointer;
display:       flex;
align-items:   center;
justify-content: center;
opacity:       0;
transition:    opacity var(--fm-transition);
padding:       0;
}


.fm-editor__gallery-item:hover .fm-editor__gallery-remove {
opacity: 1;
}


.fm-editor__gallery-drag {
position:  absolute;
bottom:    4px;
left:      4px;
color:     rgba(255,255,255,.8);
font-size: 16px;
cursor:    grab;
opacity:   0;
transition: opacity var(--fm-transition);
line-height: 1;
}


.fm-editor__gallery-item:hover .fm-editor__gallery-drag {
opacity: 1;
}


.fm-editor__gallery-placeholder {
border:        2px dashed var(--fm-accent);
border-radius: var(--fm-radius);
background:    rgba(108,179,75,.06);
}


/* ==========================================================================
Badges
========================================================================== */


.fm-editor__badge-grid {
display:               grid;
grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
gap:                   10px;
margin-bottom:         20px;
}


.fm-editor__badge-option {
display:       flex;
align-items:   center;
gap:           10px;
padding:       12px 14px;
border:        1px solid var(--fm-border);
border-radius: var(--fm-radius);
cursor:        pointer;
background:    var(--fm-bg-white);
transition:    border-color var(--fm-transition), background var(--fm-transition),
box-shadow var(--fm-transition);
}


.fm-editor__badge-option:hover {
border-color: var(--fm-primary);
background:   rgba(11,62,102,.03);
}


.fm-editor__badge-option.is-selected {
border-color: var(--fm-accent);
background:   rgba(108,179,75,.08);
box-shadow:   0 0 0 2px rgba(108,179,75,.25);
}


.fm-editor__badge-option.is-disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}


.fm-editor__badge-option input[type="checkbox"] {
width:        16px;
height:       16px;
accent-color: var(--fm-accent);
flex-shrink:  0;
cursor:       pointer;
}


.fm-editor__badge-label {
font-size:   14px;
font-weight: 500;
color:       var(--fm-text);
line-height: 1.3;
}


.fm-editor__badge-note {
display: block;
font-size: 0.75rem;
color: #9ca3af;
margin-top: 2px;
}


/* ==========================================================================
External Links
========================================================================== */


.fm-editor__links-list {
display:        flex;
flex-direction: column;
gap:            10px;
margin-bottom:  16px;
}


.fm-editor__link-row {
display:     grid;
grid-template-columns: 1fr 2fr auto;
gap:         10px;
align-items: center;
}


.fm-editor__link-row input[type="text"],
.fm-editor__link-row input[type="url"] {
padding:       9px 12px;
font-size:     14px;
color:         var(--fm-text);
background:    var(--fm-bg-white);
border:        1px solid var(--fm-border);
border-radius: var(--fm-radius);
box-shadow:    var(--fm-shadow);
transition:    border-color var(--fm-transition);
box-sizing:    border-box;
width:         100%;
}


.fm-editor__link-row input:focus {
outline:      none;
border-color: var(--fm-primary);
box-shadow:   0 0 0 3px rgba(11,62,102,.12);
}


/* ==========================================================================
Settings — Radio Group
========================================================================== */


.fm-editor__radio-group {
display:        flex;
flex-direction: column;
gap:            10px;
}


.fm-editor__radio {
display:       flex;
align-items:   flex-start;
gap:           12px;
padding:       14px 16px;
border:        1px solid var(--fm-border);
border-radius: var(--fm-radius);
cursor:        pointer;
background:    var(--fm-bg-white);
transition:    border-color var(--fm-transition), background var(--fm-transition);
}


.fm-editor__radio:hover {
border-color: var(--fm-primary);
background:   rgba(11,62,102,.02);
}


.fm-editor__radio input[type="radio"] {
margin-top:   3px;
accent-color: var(--fm-primary);
flex-shrink:  0;
cursor:       pointer;
}


.fm-editor__radio input[type="radio"]:checked ~ span strong {
color: var(--fm-primary);
}


.fm-editor__radio span strong {
display:     block;
font-size:   15px;
font-weight: 600;
color:       var(--fm-text);
line-height: 1.3;
}


.fm-editor__radio span small {
display:     block;
font-size:   13px;
color:       var(--fm-text-muted);
margin-top:  2px;
line-height: 1.4;
}


/* ==========================================================================
Settings — Slug
========================================================================== */


.fm-editor__slug-wrap {
display:       flex;
align-items:   center;
border:        1px solid var(--fm-border);
border-radius: var(--fm-radius);
overflow:      hidden;
background:    var(--fm-bg-white);
box-shadow:    var(--fm-shadow);
}


.fm-editor__slug-prefix {
padding:     10px 12px;
font-size:   14px;
color:       var(--fm-text-muted);
background:  var(--fm-bg);
border-right: 1px solid var(--fm-border);
white-space: nowrap;
flex-shrink: 0;
}


.fm-editor__slug-wrap input[type="text"] {
border:        none;
box-shadow:    none;
border-radius: 0;
padding:       10px 12px;
font-size:     14px;
flex:          1;
min-width:     0;
}


.fm-editor__slug-wrap input[type="text"]:focus {
outline:    none;
box-shadow: none;
}


/* ==========================================================================
Settings — Permalink
========================================================================== */


.fm-editor__permalink {
display:         inline-block;
font-size:       14px;
color:           var(--fm-primary);
text-decoration: none;
word-break:      break-all;
padding:         8px 12px;
background:      var(--fm-bg);
border-radius:   var(--fm-radius);
border:          1px solid var(--fm-border);
}


.fm-editor__permalink:hover {
text-decoration: underline;
background:      rgba(11,62,102,.04);
}


/* ==========================================================================
Upgrades Panel
========================================================================== */


.fm-upgrades__tier-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
background: #f7f8fa;
border: 1px solid #e2e5ea;
border-radius: 10px;
padding: 1.25rem 1.5rem;
margin-bottom: 1.75rem;
flex-wrap: wrap;
}


.fm-upgrades__tier-info {
display: flex;
align-items: center;
gap: 0.75rem;
}


.fm-upgrades__tier-label {
font-size: 0.875rem;
color: #6c757d;
font-weight: 500;
}


.fm-upgrades__tier-badge {
display: inline-block;
padding: 0.3rem 0.85rem;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}


.fm-upgrades__tier-badge--basic    { background: #e9ecef; color: #495057; }
.fm-upgrades__tier-badge--standard { background: #dbeafe; color: #1d4ed8; }
.fm-upgrades__tier-badge--premium  { background: #fef3c7; color: #92400e; }


.fm-upgrades__tier-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}


.fm-upgrades__tier-maxed {
font-size: 0.9rem;
color: #6c757d;
margin: 0;
}


.fm-upgrades__features {
display: flex;
flex-direction: column;
gap: 1rem;
}


.fm-upgrades__feature-card {
display: flex;
align-items: center;
gap: 1rem;
background: #fff;
border: 1px solid #e2e5ea;
border-radius: 10px;
padding: 1.25rem 1.5rem;
transition: border-color 0.15s;
}


.fm-upgrades__feature-card--unlocked {
border-color: #6cb34b;
background: #f6fbf3;
}


.fm-upgrades__feature-icon {
font-size: 1.75rem;
flex-shrink: 0;
width: 2.5rem;
text-align: center;
}


.fm-upgrades__feature-body {
flex: 1;
min-width: 0;
}


.fm-upgrades__feature-name {
display: block;
font-size: 0.95rem;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 0.25rem;
}


.fm-upgrades__feature-desc {
font-size: 0.85rem;
color: #6c757d;
margin: 0;
line-height: 1.5;
}


.fm-upgrades__feature-action {
flex-shrink: 0;
}


.fm-upgrades__unlocked-badge {
font-size: 0.85rem;
font-weight: 600;
color: #6cb34b;
white-space: nowrap;
}


.fm-upgrades__not-configured {
font-size: 0.85rem;
color: #adb5bd;
}


/* ==========================================================================
Error State
========================================================================== */


.fm-editor-error {
padding:       20px 24px;
background:    #fef2f2;
color:         var(--fm-danger);
border:        1px solid #fecaca;
border-radius: var(--fm-radius);
font-size:     15px;
font-weight:   500;
text-align:    center;
}


/* ==========================================================================
TinyMCE Override (keep it inside the editor container)
========================================================================== */


.fm-editor .mce-tinymce {
border:        1px solid var(--fm-border) !important;
border-radius: var(--fm-radius) !important;
box-shadow:    var(--fm-shadow) !important;
}


.fm-editor .mce-toolbar-grp {
background:    var(--fm-bg) !important;
border-bottom: 1px solid var(--fm-border) !important;
}


.fm-editor .mce-edit-area iframe {
min-height: 200px;
}


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


@media ( max-width: 600px ) {
.fm-editor {
padding: 0 12px;
}



.fm-editor__tabs {
	gap: 2px;
}


.fm-editor__tab {
	padding:   8px 12px;
	font-size: 13px;
}


.fm-editor__panel-title {
	font-size: 18px;
}


.fm-editor__gallery-grid {
	grid-template-columns: repeat( auto-fill, minmax( 90px, 1fr ) );
	gap: 8px;
}


.fm-editor__badge-grid {
	grid-template-columns: 1fr;
}


.fm-editor__photo-wrap {
	flex-direction: column;
	align-items:    flex-start;
}


.fm-editor__slug-wrap {
	flex-direction: column;
}


.fm-editor__slug-prefix {
	border-right:  none;
	border-bottom: 1px solid var(--fm-border);
	width:         100%;
	box-sizing:    border-box;
}


.fm-editor__link-row {
	grid-template-columns: 1fr;
}


.fm-editor__actions {
	flex-direction: column;
}


.fm-editor__actions .fm-btn {
	width: 100%;
}




}