/* ================================================
   BJP POSTER STUDIO — style.css v5
   ================================================ */
:root {
  --saffron:       #FF6B00;
  --saffron-light: #FF9933;
  --saffron-dark:  #CC4400;
  --gold:          #FFD700;
  --green-india:   #138808;
  --navy:          #080c1f;
  --navy-mid:      #0f1530;
  --navy-card:     #131a3a;
  --navy-border:   #1e2a55;
  --text-1:        #f2f5ff;
  --text-2:        #8a95be;
  --text-3:        #505880;
  --danger:        #ff4a4a;
  --ai-color:      #a855f7;
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --shadow: 0 4px 32px rgba(0,0,0,0.45);
  --t: 0.2s cubic-bezier(0.4,0,0.2,1);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--navy); color: var(--text-1);
  min-height: 100vh; overflow-x: hidden;
}
body::before {
  content:''; position:fixed; inset:0;
  background-image: linear-gradient(rgba(255,107,0,.03)1px,transparent 1px),linear-gradient(90deg,rgba(255,107,0,.03)1px,transparent 1px);
  background-size:50px 50px; pointer-events:none; z-index:0;
}
body>*{position:relative;z-index:1;}

/* HEADER */
.app-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 28px;
  background:rgba(19,26,58,.92); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--navy-border);
  position:sticky; top:0; z-index:300;
}
.header-brand{display:flex;align-items:center;gap:14px;}
.lotus-anim{font-size:1.9rem;animation:lotus-pulse 2.8s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(255,153,51,.7));}
@keyframes lotus-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.1);filter:drop-shadow(0 0 20px rgba(255,153,51,1));}}
.brand-title{font-size:1.3rem;font-weight:800;background:linear-gradient(90deg,#FF9933,#FFD700);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.brand-sub{font-size:.68rem;color:var(--text-2);letter-spacing:.05em;}
.header-actions{display:flex;gap:10px;}

/* LAYOUT */
.app-layout{display:grid;grid-template-columns:380px 1fr;min-height:calc(100vh - 57px);}

/* CONTROLS */
.controls-panel{
  background:var(--navy-mid); border-right:1px solid var(--navy-border);
  padding:18px 16px; display:flex; flex-direction:column; gap:12px;
  overflow-y:auto; max-height:calc(100vh - 57px);
}
.section-card{
  background:var(--navy-card); border:1px solid var(--navy-border);
  border-radius:var(--r-md); padding:14px; display:flex; flex-direction:column; gap:10px;
  transition:border-color var(--t);
}
.section-card:hover{border-color:rgba(255,107,0,.25);}
.section-header{display:flex;align-items:center;gap:10px;}
.section-icon{font-size:1.05rem;}
.section-title{font-size:.9rem;font-weight:700;}
.hint-text{font-size:.72rem;color:var(--text-3);}

/* UPLOADS */
.upload-zone{
  border:2px dashed var(--navy-border); border-radius:var(--r-md);
  min-height:100px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; transition:all var(--t); overflow:hidden;
}
.upload-zone:hover{border-color:var(--saffron-light);background:rgba(255,107,0,.04);}
.upload-zone.dragover{border-color:var(--saffron);background:rgba(255,107,0,.10);}
.upload-zone.small-zone{min-height:72px;}
.upload-inner{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px;}
.upl-icon{font-size:1.6rem;}
.upload-inner p{font-size:.78rem;color:var(--text-2);text-align:center;}
.upl-hint{font-size:.68rem;color:var(--text-3);}
.thumb-preview{width:100%;max-height:130px;object-fit:cover;border-radius:var(--r-sm);display:block;}
.logo-thumb{max-height:70px;object-fit:contain;background:rgba(255,255,255,.05);padding:6px;}
.upload-actions{display:flex;gap:8px;}

/* FORM */
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-group label{font-size:.7rem;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:.06em;}
input[type="text"],input[type="date"],select,textarea{
  width:100%; background:var(--navy); border:1px solid var(--navy-border);
  color:var(--text-1); border-radius:var(--r-sm); padding:8px 12px;
  font-size:.875rem; font-family:'Inter',sans-serif; outline:none; resize:none;
  transition:border-color var(--t),box-shadow var(--t);
}
input:focus,select:focus,textarea:focus{border-color:var(--saffron-light);box-shadow:0 0 0 3px rgba(255,153,51,.15);}
select option{background:var(--navy-card);}
.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
input[type="color"]{width:100%;height:36px;padding:2px 4px;border-radius:var(--r-sm);cursor:pointer;background:var(--navy);border:1px solid var(--navy-border);}
input[type="range"]{width:100%;accent-color:var(--saffron-light);}
.color-fallback{display:flex;flex-direction:column;gap:6px;}
.color-fallback label{font-size:.7rem;font-weight:600;color:var(--text-2);text-transform:uppercase;}
.color-row{display:flex;gap:8px;}
.color-row input[type="color"]{flex:1;}
.color-row select{flex:2;}
.val-label{float:right;font-size:.72rem;font-weight:400;color:var(--saffron-light);}
.logo-controls{display:flex;flex-direction:column;gap:8px;}
.logo-controls label{font-size:.7rem;font-weight:600;color:var(--text-2);text-transform:uppercase;}
.checkbox-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.checkbox-row label{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--text-2);text-transform:none;letter-spacing:0;cursor:pointer;}
.checkbox-row input[type="checkbox"]{accent-color:var(--saffron-light);}
.slogan-row{display:flex;gap:8px;}
.slogan-row select{flex:1;}
.divider-label{text-align:center;font-size:.68rem;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;position:relative;}
.divider-label::before,.divider-label::after{content:'';position:absolute;top:50%;width:28%;height:1px;background:var(--navy-border);}
.divider-label::before{left:0;} .divider-label::after{right:0;}
.bg-removal-section{display:flex;flex-direction:column;gap:8px;}
.ai-status{font-size:.78rem;color:#a855f7;text-align:center;display:none;padding:4px 8px;background:rgba(168,85,247,.08);border-radius:var(--r-sm);}
.tolerance-row{display:flex;flex-direction:column;gap:4px;}
.tolerance-row label{font-size:.7rem;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:.06em;}

/* =====================================================
   RICH TEXT EDITOR
   ===================================================== */
.rich-wrap{
  border:1px solid var(--navy-border); border-radius:var(--r-md);
  overflow:hidden; transition:border-color var(--t),box-shadow var(--t);
}
.rich-wrap:focus-within{border-color:var(--saffron-light);box-shadow:0 0 0 3px rgba(255,153,51,.15);}

.rtoolbar{
  display:flex; align-items:center; gap:3px; padding:5px 8px;
  background:rgba(255,255,255,.04); border-bottom:1px solid var(--navy-border);
  flex-wrap:wrap; min-height:36px;
}
.rtb-group{
  display:flex; align-items:center; gap:2px;
  padding-right:6px; border-right:1px solid var(--navy-border); margin-right:2px;
}
.rtb-group:last-child{border-right:none;padding-right:0;margin-right:0;}

.rtb{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:24px; padding:0 5px;
  border:1px solid transparent; border-radius:5px;
  background:transparent; color:var(--text-2);
  font-size:.78rem; font-family:'Inter',sans-serif;
  cursor:pointer; transition:all var(--t); user-select:none;
}
.rtb:hover{background:rgba(255,107,0,.12);color:var(--saffron-light);border-color:rgba(255,107,0,.25);}
.rtb.is-active{background:rgba(255,107,0,.2);color:var(--saffron-light);border-color:rgba(255,107,0,.4);}

.rtb-fsize,.rtb-ffamily{
  background:var(--navy); border:1px solid var(--navy-border);
  color:var(--text-2); border-radius:5px; padding:2px 4px;
  font-size:.72rem; font-family:'Inter',sans-serif;
  cursor:pointer; height:24px; outline:none; max-width:80px;
}
.rtb-fsize{max-width:48px;}
.rtb-fsize:focus,.rtb-ffamily:focus{border-color:var(--saffron-light);color:var(--text-1);}

/* Inline color picker inside toolbar */
.rtb-color{
  width:26px; height:24px; padding:1px 2px;
  border-radius:5px; cursor:pointer;
  background:var(--navy); border:1px solid var(--navy-border);
}

.rich-editor{
  min-height:40px; padding:9px 12px;
  background:var(--navy); color:var(--text-1);
  font-size:.875rem; font-family:'Inter',sans-serif;
  outline:none; line-height:1.5; word-break:break-word;
}
.rich-editor-tall{min-height:80px;}
.rich-editor:empty::before{content:attr(data-placeholder);color:var(--text-3);pointer-events:none;white-space:pre-line;}
.rich-editor b,.rich-editor strong{font-weight:700;}
.rich-editor i,.rich-editor em{font-style:italic;}
.rich-editor u{text-decoration:underline;}

/* BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:9px 16px;
  border-radius:var(--r-sm);font-size:.855rem;font-weight:600;cursor:pointer;border:none;
  transition:all var(--t);font-family:'Inter',sans-serif;white-space:nowrap;
}
.btn-sm{padding:6px 11px;font-size:.76rem;}
.btn-full{width:100%;justify-content:center;}
.btn-primary{background:linear-gradient(135deg,var(--saffron),var(--saffron-dark));color:#fff;box-shadow:0 4px 14px rgba(255,107,0,.35);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(255,107,0,.55);}
.btn-secondary{background:rgba(255,153,51,.12);color:var(--saffron-light);border:1px solid rgba(255,153,51,.3);}
.btn-secondary:hover{background:rgba(255,153,51,.22);}
.btn-outline{background:transparent;color:var(--text-2);border:1px solid var(--navy-border);}
.btn-outline:hover{border-color:var(--saffron-light);color:var(--saffron-light);}
.btn-ghost{background:transparent;color:var(--text-2);}
.btn-ghost:hover{background:rgba(255,255,255,.06);color:var(--text-1);}
.btn-danger{background:rgba(255,74,74,.12);color:var(--danger);border:1px solid rgba(255,74,74,.3);}
.btn-danger:hover{background:rgba(255,74,74,.25);}
.btn-ai{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;box-shadow:0 4px 14px rgba(168,85,247,.35);}
.btn-ai:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(168,85,247,.55);}
.btn-ai:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.btn-icon{padding:7px 9px;background:rgba(255,153,51,.1);color:var(--saffron-light);border:1px solid rgba(255,153,51,.25);border-radius:var(--r-sm);}

/* PREVIEW */
.preview-panel{display:flex;flex-direction:column;align-items:center;padding:24px 20px;gap:18px;overflow-y:auto;max-height:calc(100vh - 57px);}
.preview-topbar{display:flex;align-items:center;gap:14px;width:100%;max-width:680px;}
.panel-title{font-size:1rem;font-weight:700;}
.date-badge{background:linear-gradient(135deg,var(--saffron),var(--green-india));color:#fff;font-size:.67rem;font-weight:700;padding:3px 11px;border-radius:20px;text-transform:uppercase;letter-spacing:.07em;}
.canvas-wrapper{background:rgba(255,255,255,.03);border:1px solid var(--navy-border);border-radius:var(--r-lg);padding:14px;box-shadow:var(--shadow),0 0 40px rgba(255,107,0,.1);transition:box-shadow var(--t);width:100%;max-width:680px;}
.canvas-wrapper:hover{box-shadow:var(--shadow),0 0 60px rgba(255,107,0,.25);}
#poster-canvas{display:block;border-radius:var(--r-md);width:100%;height:auto;max-height:calc(100vh - 250px);object-fit:contain;}
.download-bar{display:flex;gap:10px;width:100%;max-width:680px;flex-wrap:wrap;}
.download-bar .btn{flex:1;justify-content:center;min-width:110px;}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(10px);z-index:500;display:flex;align-items:center;justify-content:center;animation:fadeIn .18s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal{background:var(--navy-card);border:1px solid var(--navy-border);border-radius:var(--r-xl);width:92%;max-width:540px;box-shadow:0 20px 60px rgba(0,0,0,.65);animation:slideUp .22s cubic-bezier(.34,1.56,.64,1);}
@keyframes slideUp{from{opacity:0;transform:translateY(24px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px;border-bottom:1px solid var(--navy-border);}
.modal-header h3{font-size:1rem;font-weight:700;}
.modal-close{background:none;border:none;color:var(--text-3);font-size:1.1rem;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all var(--t);}
.modal-close:hover{background:rgba(255,255,255,.08);color:var(--text-1);}
.modal-body{padding:18px 22px;max-height:420px;overflow-y:auto;}
.slogan-add-form{display:flex;gap:10px;margin-bottom:16px;}
.slogan-add-form input{flex:1;background:var(--navy);border:1px solid var(--navy-border);border-radius:var(--r-sm);color:var(--text-1);padding:8px 12px;font-family:'Inter',sans-serif;font-size:.875rem;outline:none;}
.slogan-add-form input:focus{border-color:var(--saffron-light);}
#slogan-list-container{display:flex;flex-direction:column;gap:8px;}
.slogan-item{display:flex;align-items:center;gap:10px;background:var(--navy);border:1px solid var(--navy-border);border-radius:var(--r-sm);padding:8px 12px;transition:border-color var(--t);}
.slogan-item:hover{border-color:rgba(255,153,51,.3);}
.slogan-item-text{flex:1;font-size:.84rem;}
.slogan-item-del{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:1rem;padding:3px 6px;border-radius:4px;transition:all var(--t);}
.slogan-item-del:hover{color:var(--danger);background:rgba(255,74,74,.1);}
.modal-footer{display:flex;align-items:center;justify-content:space-between;padding:14px 22px 18px;border-top:1px solid var(--navy-border);}

/* MISC */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--navy-border);border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--text-3);}
@keyframes spin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
.spinner{display:inline-block;animation:spin 1s linear infinite;}

/* RESPONSIVE */
@media(max-width:960px){.app-layout{grid-template-columns:1fr;}.controls-panel{max-height:none;border-right:none;border-bottom:1px solid var(--navy-border);}.preview-panel{max-height:none;padding:16px;}}
@media(max-width:560px){.app-header{padding:10px 14px;}.color-grid{grid-template-columns:1fr;}.download-bar{flex-direction:column;}}