@keyframes wpsttspin { to { transform: rotate(360deg); } }

:root{
  --wpstt-primary:#1565c0;
  --wpstt-primary-soft:#e8f2ff;
  --wpstt-success:#2e7d32;
  --wpstt-text:#1f2937;
  --wpstt-subtext:#5f6b7a;
  --wpstt-border:#dbe3ef;
  --wpstt-surface:#ffffff;
  --wpstt-surface-soft:#f7faff;
}

.wpstt-card{
  border-radius:16px;
  padding:20px;
  max-width:920px;
  margin:0 auto;
  background:var(--wpstt-surface);
  border:1px solid var(--wpstt-border);
  box-shadow:0 12px 30px rgba(24, 39, 75, 0.08);
}

/* Popup modal sizing for Create Digital Memorial */
.wpstt-modal,
.wpstt-popup-modal,
.modal.wpstt-modal{
  --wpstt-modal-width:760px;
}

.wpstt-modal .modal-content,
.wpstt-popup-modal .modal-content,
.wpstt-modal-content,
.wpstt-popup-content{
  width:min(92vw, var(--wpstt-modal-width));
  max-width:var(--wpstt-modal-width);
  margin:24px auto;
  border-radius:14px;
}

.wpstt-row{margin:8px 0}

.wpstt-label{
  font-weight:600;
  margin-bottom:4px;
  font-size:14px;
  color:var(--wpstt-text);
}

.wpstt-input,.wpstt-textarea{
  box-sizing:border-box;
  width:100%;
  max-width:560px;
  border:1px solid var(--wpstt-border);
  border-radius:10px;
  padding:9px 12px;
  color:var(--wpstt-text);
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}

.wpstt-input:focus,.wpstt-textarea:focus{
  outline:none;
  border-color:var(--wpstt-primary);
  box-shadow:0 0 0 3px rgba(21, 101, 192, 0.15);
}

.wpstt-textarea{
  resize:vertical;
  min-height:92px;
  line-height:1.5;
}

.wpstt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--wpstt-primary);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:10px 16px;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
}

.wpstt-btn:hover{box-shadow:0 8px 20px rgba(21, 101, 192, 0.2)}
.wpstt-btn:active{transform:translateY(1px)}
.wpstt-btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}

.wpstt-btn-primary{
  background:linear-gradient(135deg, #1565c0 0%, #1e88e5 100%);
  font-weight:700;
}

.wpstt-msg-flex{
  display:flex;
  align-items:flex-start;
  gap:12px;
  width:100%;
}

.wpstt-msg-flex .wpstt-textarea{flex:1;max-width:unset;margin-bottom:0;}

.wpstt-msg-btns{
  display:flex;
  align-items:center;
  gap:10px;
}

.wpstt-status-row{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:14px;
  color:var(--wpstt-subtext);
  padding:8px 10px;
  border-radius:8px;
  background:var(--wpstt-surface-soft);
  border:1px dashed var(--wpstt-border);
}

.wpstt-box{
  border:1px solid var(--wpstt-border);
  border-radius:10px;
  padding:14px;
  white-space:pre-wrap;
  word-wrap:break-word;
  line-height:1.55;
}

.wpstt-note{background:#f8fafc}
.wpstt-ai{background:#f3fff6;border-color:#cdecd5}

/* Main Header Styles */

.wpstt-main-header{
  padding:40px 20px;
  margin-bottom:24px;
  border-radius:18px;
  background:linear-gradient(135deg, #f7fbff 0%, #eef6ff 55%, #f8fffb 100%);
  border:1px solid var(--wpstt-border);
  text-align:center;
}

.wpstt-main-title{
  color:#213047;
  font-size:38px;
  font-weight:800;
  margin:0 0 14px 0;
  text-shadow:0 2px 8px rgba(0,0,0,0.06);
}

.wpstt-main-description{
  color:var(--wpstt-subtext);
  font-size:18px;
  line-height:1.65;
  margin:0 auto;
  max-width:880px;
}

/* Step Navigation Styles */
.wpstt-step-nav{
  margin-bottom:28px;
  padding:20px;
  background:#f8fbff;
  border-radius:14px;
  border:1px solid var(--wpstt-border);
}

.wpstt-progress-container{
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:15px;
}

.wpstt-progress-bar{
  flex:1;
  height:9px;
  background:#e6edf8;
  border-radius:999px;
  overflow:hidden;
}

.wpstt-progress-fill{
  height:100%;
  background:linear-gradient(90deg, #1e88e5, #43a047);
  border-radius:999px;
  transition:width 0.3s ease;
  width:25%;
}

.wpstt-progress-text{
  font-size:13px;
  font-weight:700;
  color:#3c4c63;
  white-space:nowrap;
}


/* Section Header */
.wpstt-section-header{
  margin-bottom:20px;
  padding-bottom:12px;
  border-bottom:1px solid var(--wpstt-border);
}

.wpstt-section-header h2{
  color:#24364c;
  font-size:24px;
  font-weight:700;
  margin:0;
}

/* Step Navigation Buttons */
.wpstt-step-navigation{
  margin-top:30px;
  padding-top:20px;
  border-top:1px solid var(--wpstt-border);
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:10px;
}

.wpstt-step-navigation .wpstt-btn{
  min-width:120px;
}

.wpstt-step-navigation .wpstt-btn:last-child{
  margin-left:auto;
}

/* Preview Styles */
.wpstt-preview-container{margin:20px 0}
.wpstt-preview-sections{display:flex;flex-direction:column;gap:22px}
.wpstt-preview-section{
  border:1px solid var(--wpstt-border);
  border-radius:14px;
  padding:20px;
  background:#f8fbff;
}
.wpstt-preview-section h3{
  color:var(--wpstt-primary);
  font-size:20px;
  font-weight:700;
  margin:0 0 20px 0;
  padding-bottom:10px;
  border-bottom:1px solid var(--wpstt-border);
}
.wpstt-preview-item{
  margin-bottom:14px;
  padding:15px;
  background:#fff;
  border-radius:10px;
  border:1px solid var(--wpstt-border);
}
.wpstt-preview-item:last-child{margin-bottom:0}
.wpstt-preview-item h4{color:#26384f;font-size:16px;font-weight:700;margin:0 0 10px 0}
.wpstt-preview-text{color:#4e5e73;line-height:1.65;white-space:pre-wrap;word-wrap:break-word}

/* Main Title Preview Styles */
.wpstt-main-title-preview{
  text-align:center;
  margin:30px 0;
  padding:32px;
  background:linear-gradient(140deg, #f6faff 0%, #ebf4ff 50%, #f4fff8 100%);
  border-radius:18px;
  border:1px solid var(--wpstt-border);
}

.wpstt-main-title-preview h1{
  color:#21334a;
  font-size:32px;
  font-weight:800;
  margin:0 0 10px 0;
  text-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.wpstt-memorial-subtitle{
  color:#607086;
  font-size:18px;
  font-style:italic;
  margin:0;
  font-weight:500;
}

/* Responsive design */
@media (max-width: 768px) {
  .wpstt-card{padding:14px}
  .wpstt-btn{padding:8px 12px;font-size:13px}
  .wpstt-input,.wpstt-textarea{max-width:100%}
  .wpstt-msg-flex{flex-direction:column;align-items:stretch;}
  .wpstt-msg-btns{flex-direction:row;flex-wrap:wrap;margin-top:8px;}
  .wpstt-status-row{font-size:13px;margin-top:6px;}
  .wpstt-main-header{padding:30px 15px;margin-bottom:30px}
  .wpstt-main-title{font-size:30px;margin-bottom:15px}
  .wpstt-main-description{font-size:16px}
  .wpstt-step-nav{padding:15px;margin-bottom:20px}
  .wpstt-progress-bar{height:6px}
  .wpstt-progress-text{font-size:12px}
  .wpstt-section-header h2{font-size:20px}
  .wpstt-step-navigation{flex-direction:column;gap:10px}
  .wpstt-step-navigation .wpstt-btn:last-child{margin-left:0}
  .wpstt-step-navigation .wpstt-btn{width:100%;justify-content:center}
  .wpstt-modal,
  .wpstt-popup-modal,
  .modal.wpstt-modal{--wpstt-modal-width:640px}
  .wpstt-main-title-preview{padding:20px;margin:20px 0}
  .wpstt-main-title-preview h1{font-size:24px}
  .wpstt-memorial-subtitle{font-size:16px}
}
@media (max-width: 480px) {
  .wpstt-btn{padding:6px 10px;font-size:12px}
  .wpstt-label{font-size:13px}
  .wpstt-status-row{font-size:12px;margin-top:5px;}
  .wpstt-status-row{flex-wrap:wrap;gap:8px;}
  .wpstt-main-header{padding:20px 10px;margin-bottom:20px}
  .wpstt-main-title{font-size:24px;margin-bottom:12px}
  .wpstt-main-description{font-size:14px}
  .wpstt-modal,
  .wpstt-popup-modal,
  .modal.wpstt-modal{--wpstt-modal-width:94vw}
  .wpstt-step-nav{padding:10px}
  .wpstt-progress-bar{height:5px}
  .wpstt-progress-text{font-size:11px}
  .wpstt-section-header h2{font-size:18px}
  .wpstt-main-title-preview{padding:15px;margin:15px 0}
  .wpstt-main-title-preview h1{font-size:20px}
  .wpstt-memorial-subtitle{font-size:14px}
}