#s24-ai-sticker-generator{
padding:20px;
border:1px solid #8224e3;
border-radius:14px;
margin:24px 0;
background:#fafafa;
}
#s24-ai-sticker-generator h3{
margin-top:0 !important;
font-weight:800 !important;
color:#8224e3 !important;
padding-bottom:20px !important;
font-size:24px !important;
line-height:1.25 !important;
}
#s24-ai-sticker-generator label{
display:block;
margin-bottom:6px;
color:#8224e3;
font-weight:700 !important;
font-size:18px;
}
#s24-ai-sticker-generator textarea,
#s24-ai-sticker-generator input[type="text"],
#s24-ai-sticker-generator select{
width:100%;
margin-bottom:12px;
}
.s24-ai-help{
margin:-3px 0 6px 0;
font-size:13px;
line-height:1.35;
color:#777;
padding-bottom:0 !important;
}
#s24_btn,
#s24_btn.et_pb_button{
background:#8224e3 !important;
background-color:#8224e3 !important;
color:#fff !important;
border:none !important;
padding:14px 28px !important;
border-radius:6px !important;
font-size:18px !important;
font-weight:600 !important;
cursor:pointer !important;
transition:all .2s ease !important;
box-shadow:none !important;
}
#s24_btn:hover,
#s24_btn.et_pb_button:hover{
background:#6f1fd0 !important;
background-color:#6f1fd0 !important;
color:#fff !important;
border:none !important;
}
#s24_btn:disabled,
#s24_btn.et_pb_button:disabled{
opacity:.65 !important;
cursor:not-allowed !important;
}
.s24-ai-notice{
margin-top:12px;
color:#777;
font-size:13px;
}
#s24_status{
margin-top:12px;
}
#s24_result{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin-top:14px;
}
.s24-ai-design-card{
border:2px solid #ddd;
border-radius:12px;
padding:8px;
background:#fff;
cursor:pointer;
transition:.2s;
}
.s24-ai-design-card img{
width:100%;
border-radius:8px;
display:block;
}
.s24-ai-design-card button{
width:100%;
margin-top:8px;
}
.s24-spinner{
display:inline-block;
width:16px;
height:16px;
margin-right:10px;
border:2px solid rgba(255,255,255,0.4);
border-top:2px solid #fff;
border-radius:50%;
animation:s24spin .7s linear infinite;
vertical-align:middle;
}
.s24-ai-unavailable-message{
padding:16px 18px;
border:1px solid #8224e3;
background:#fafafa;
border-radius:10px;
margin:15px 0;
color:#555;
font-size:15px;
line-height:1.5;
}
.s24-ai-form-error{
display:none;
margin:12px 0 14px;
padding:10px 12px;
border:1px solid #e06b6b;
background:#fff3f3;
color:#b42318;
border-radius:8px;
font-size:14px;
line-height:1.4;
scroll-margin-top:120px;
}
#s24-ai-sticker-generator .s24-ai-invalid,
#s24-ai-sticker-generator textarea.s24-ai-invalid,
#s24-ai-sticker-generator input.s24-ai-invalid,
#s24-ai-sticker-generator select.s24-ai-invalid{
border-color:#e06b6b !important;
box-shadow:0 0 0 1px #e06b6b inset !important;
}
#s24_result{
scroll-margin-top:120px;
}
@keyframes s24spin{
100%{
transform:rotate(360deg);
}
}
.s24-ai-reference-wrap{
margin:8px 0 0;
padding:10px 0 0;
border:none;
border-top:1px solid #f0e5ff;
border-radius:0;
background:transparent;
}
.s24-ai-reference-wrap.s24-ai-has-reference{
border-top-color:#cfe7a0;
background:transparent;
}
#s24-ai-sticker-generator .s24-ai-reference-label{
font-size:14px !important;
margin-bottom:3px;
}
#s24_reference_image{
width:100%;
margin:2px 0 0 0;
font-size:13px;
}
.s24-ai-reference-preview{
display:none;
align-items:center;
gap:8px;
margin-top:7px;
font-size:12px;
color:#666;
}
.s24-ai-reference-thumb-wrap{
position:relative;
width:76px;
height:76px;
flex:0 0 76px;
}
.s24-ai-reference-thumb{
width:76px;
height:76px;
display:block;
object-fit:cover;
border:1px solid #d7b6ff;
border-radius:8px;
background:#fff;
}
.s24-ai-reference-remove{
position:absolute;
top:-7px;
right:-7px;
width:22px;
height:22px;
padding:0 !important;
border:1px solid #d7b6ff !important;
border-radius:50%;
background:#fff !important;
color:#8224e3 !important;
font-size:16px !important;
line-height:18px !important;
font-weight:700 !important;
cursor:pointer;
box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.s24-ai-reference-remove:hover{
background:#8224e3 !important;
color:#fff !important;
}
.s24-ai-reference-remove-inline{
border:none !important;
background:transparent !important;
color:#8224e3 !important;
padding:0 !important;
font-size:12px !important;
font-weight:700 !important;
cursor:pointer !important;
text-decoration:underline;
}
.s24-ai-reference-meta-compact{
flex:0 1 auto;
}
.s24-ai-reference-meta{
min-width:0;
line-height:1.35;
}
.s24-ai-reference-meta strong,
.s24-ai-reference-meta span{
display:block;
}
.s24-ai-reference-meta span{
overflow:hidden;
max-width:420px;
text-overflow:ellipsis;
white-space:nowrap;
}
@media (max-width:600px){
.s24-ai-reference-preview{
align-items:flex-start;
}
.s24-ai-reference-meta span{
max-width:220px;
}
}
.s24-ai-after-results{
margin-top:16px;
padding:14px 16px;
border:1px solid #d7b6ff;
background:#fff;
border-radius:10px;
font-size:15px;
line-height:1.55;
color:#111;
}
.s24-ai-after-results-text{
position:relative;
margin:0 0 10px 0;
padding-left:32px;
color:#111;
}
.s24-ai-after-results-text:before{
position:absolute;
left:0;
top:1px;
width:20px;
height:20px;
border-radius:50%;
color:#fff;
font-size:12px;
font-weight:800;
line-height:20px;
text-align:center;
}
.s24-ai-selected-helper{
font-weight:600;
}
.s24-ai-selected-helper:before{
content:"✓";
background:#95C11F;
}
.s24-ai-again-helper:before{
content:"↻";
background:#8a94a6;
}
.s24-ai-print-helper:before{
content:"i";
background:#2da8dc;
font-family:Arial, sans-serif;
}
.s24-ai-after-results-text:last-of-type{
margin-bottom:13px;
}
#s24_generate_again_btn,
#s24_generate_again_btn.et_pb_button{
background:#8224e3 !important;
background-color:#8224e3 !important;
color:#fff !important;
border:none !important;
padding:11px 20px !important;
border-radius:6px !important;
font-size:15px !important;
font-weight:600 !important;
cursor:pointer !important;
box-shadow:none !important;
}
#s24_generate_again_btn:hover,
#s24_generate_again_btn.et_pb_button:hover{
background:#6f1fd0 !important;
background-color:#6f1fd0 !important;
color:#fff !important;
}
#s24_generate_again_btn:disabled,
#s24_generate_again_btn.et_pb_button:disabled{
opacity:.65 !important;
cursor:not-allowed !important;
} .s24-ai-visual-inspiration-wrap{
margin:16px 0 16px;
padding:12px 12px 14px;
border:1px solid #d8b4ff;
border-radius:12px;
background:#fff;
}
.s24-ai-visual-inspiration-head{
margin-bottom:10px;
}
.s24-ai-visual-inspiration-head strong{
display:block;
color:#8224e3;
font-size:16px;
line-height:1.25;
}
.s24-ai-generator-ideas-wrap{
margin:0 0 10px;
padding:0;
border:none;
border-radius:0;
background:transparent;
}
.s24-ai-generator-ideas-head{
display:flex;
align-items:baseline;
gap:8px;
margin-bottom:8px;
}
.s24-ai-generator-ideas-head strong{
display:block;
color:#8224e3;
font-size:14px;
line-height:1.25;
}
.s24-ai-generator-ideas-head span{
color:#777;
font-size:12px;
}
.s24-ai-small-link{
border:none !important;
background:transparent !important;
color:#8224e3 !important;
padding:0 !important;
margin:0 !important;
font-size:13px !important;
font-weight:700 !important;
cursor:pointer !important;
text-decoration:underline;
}
.s24-ai-generator-ideas-status{
min-height:18px;
margin:0 0 8px;
color:#777;
font-size:12px;
line-height:1.4;
}
.s24-ai-generator-ideas-grid{
display:grid;
grid-template-columns:repeat(5, 80px);
gap:9px;
align-items:start;
}
.s24-ai-generator-idea-option{
position:relative;
width:80px;
height:80px;
padding:4px !important;
border:2px solid #eee !important;
border-radius:10px !important;
background:#fafafa !important;
box-shadow:none !important;
cursor:pointer !important;
transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.s24-ai-generator-idea-option:hover{
transform:translateY(-2px);
border-color:#b57aff !important;
box-shadow:0 4px 14px rgba(130,36,227,.18) !important;
background:#fff !important;
}
.s24-ai-generator-idea-option.is-selected{
border-color:#95C11F !important;
background:#f8ffe9 !important;
box-shadow:0 0 0 3px rgba(149,193,31,.22) !important;
}
.s24-ai-generator-idea-option.is-selected:after{
content:"✓";
position:absolute;
top:-8px;
right:-8px;
width:22px;
height:22px;
border-radius:50%;
background:#95C11F;
color:#fff;
font-size:14px;
font-weight:800;
line-height:22px;
text-align:center;
box-shadow:0 2px 6px rgba(0,0,0,.22);
}
.s24-ai-generator-idea-option img{
width:100%;
height:100%;
display:block;
object-fit:contain;
border-radius:7px;
}
.s24-ai-generator-idea-hover-preview{
position:fixed;
z-index:999999;
display:none;
width:190px;
height:190px;
padding:8px;
border:1px solid #e2ccff;
border-radius:14px;
background:#fff;
box-shadow:0 12px 34px rgba(0,0,0,.24);
pointer-events:none;
}
.s24-ai-generator-idea-hover-preview.is-visible{
display:block;
}
.s24-ai-generator-idea-hover-preview img{
width:100%;
height:100%;
display:block;
object-fit:contain;
border-radius:10px;
}
.s24-ai-visual-reference{
margin:8px 0 10px;
padding:8px 10px;
border:1px solid #eadcff;
border-radius:9px;
background:#fbf8ff;
}
.s24-ai-visual-reference-body{
color:#777;
font-size:13px;
line-height:1.35;
}
.s24-ai-visual-reference.is-empty{
background:#fbf8ff;
}
.s24-ai-visual-reference.is-idea,
.s24-ai-visual-reference.is-upload{
border-color:#cfe7a0;
background:#fbfff4;
}
.s24-ai-visual-reference-content{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.s24-ai-visual-reference-thumb{
width:64px;
height:64px;
flex:0 0 64px;
object-fit:contain;
border:1px solid #e2ccff;
border-radius:8px;
background:#fff;
}
.s24-ai-visual-reference-meta{
min-width:0;
flex:1 1 auto;
}
.s24-ai-visual-reference-meta strong,
.s24-ai-visual-reference-meta span{
display:block;
}
.s24-ai-visual-reference-meta strong{
color:#111;
font-size:13px;
}
.s24-ai-visual-reference-meta span{
overflow:hidden;
max-width:360px;
color:#666;
font-size:12px;
text-overflow:ellipsis;
white-space:nowrap;
}
.s24-ai-visual-reference-clear{
flex:0 0 auto;
border:none !important;
background:transparent !important;
color:#8224e3 !important;
padding:4px 0 !important;
font-size:12px !important;
font-weight:700 !important;
cursor:pointer !important;
text-decoration:underline;
}
#s24-ai-sticker-generator.s24-ai-has-selected-idea .s24-ai-reference-wrap{
opacity:.78;
transition:opacity .15s ease;
}
#s24-ai-sticker-generator.s24-ai-has-selected-idea .s24-ai-reference-wrap:hover,
#s24-ai-sticker-generator.s24-ai-has-selected-idea .s24-ai-reference-wrap:focus-within{
opacity:1;
}
@media (max-width:700px){
.s24-ai-generator-ideas-grid{
grid-template-columns:repeat(auto-fill, minmax(70px, 1fr));
}
.s24-ai-generator-idea-option{
width:100%;
height:74px;
}
.s24-ai-visual-inspiration-wrap{
padding:10px;
}
.s24-ai-generator-ideas-head{
display:block;
}
.s24-ai-generator-ideas-head span{
display:block;
margin-top:2px;
}
.s24-ai-small-link{
margin-top:4px !important;
}
.s24-ai-visual-reference-meta span{
max-width:190px;
}
} .s24-ai-visual-inspiration-layout{
display:grid;
grid-template-columns:minmax(0, 1.7fr) minmax(260px, 1fr);
gap:16px;
align-items:start;
}
.s24-ai-visual-inspiration-left,
.s24-ai-visual-inspiration-right{
min-width:0;
}
.s24-ai-generator-ideas-wrap{
margin:0;
}
.s24-ai-generator-ideas-grid{
display:grid;
grid-template-columns:repeat(5, minmax(0, 1fr));
gap:10px;
align-items:start;
}
.s24-ai-generator-idea-option,
.s24-ai-generator-upload-option{
position:relative;
width:100%;
height:82px;
min-width:0;
}
.s24-ai-generator-upload-option{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:6px !important;
border:2px dashed #d9baff !important;
border-radius:10px !important;
background:#fcf8ff !important;
color:#8224e3 !important;
cursor:pointer !important;
transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
text-align:center;
}
.s24-ai-generator-upload-option:hover{
transform:translateY(-2px);
border-color:#8224e3 !important;
box-shadow:0 4px 14px rgba(130,36,227,.16) !important;
background:#fff !important;
}
.s24-ai-generator-upload-option strong,
.s24-ai-generator-upload-option span{
display:block;
line-height:1.2;
}
.s24-ai-generator-upload-option strong{
font-size:22px;
font-weight:800;
}
.s24-ai-generator-upload-option span{
margin-top:4px;
font-size:12px;
font-weight:700;
}
.s24-ai-generator-ideas-wrap.is-empty .s24-ai-generator-ideas-status{
margin-bottom:10px;
}
.s24-ai-reference-wrap{
margin:12px 0 0;
padding:12px;
border:1px dashed #d8b4ff;
border-radius:10px;
background:#fcfaff;
transition:all .18s ease;
}
.s24-ai-reference-wrap.is-collapsed{
display:none;
}
.s24-ai-reference-wrap.s24-ai-has-reference{
border-style:solid;
border-color:#cfe7a0;
background:#fbfff4;
}
.s24-ai-reference-upload-head strong,
.s24-ai-reference-upload-head span{
display:block;
}
.s24-ai-reference-upload-head strong{
color:#8224e3;
font-size:14px;
line-height:1.25;
}
.s24-ai-reference-upload-head span{
margin-top:2px;
color:#777;
font-size:12px;
line-height:1.4;
}
#s24_reference_image{
width:100%;
margin:10px 0 0 0;
font-size:13px;
}
.s24-ai-reference-preview{
display:none;
align-items:center;
gap:8px;
margin-top:8px;
font-size:12px;
color:#666;
}
.s24-ai-selected-preview-head{
margin-bottom:8px;
}
.s24-ai-selected-preview-head strong,
.s24-ai-selected-preview-head span{
display:block;
}
.s24-ai-selected-preview-head strong{
color:#8224e3;
font-size:14px;
line-height:1.25;
}
.s24-ai-selected-preview-head span{
margin-top:2px;
color:#777;
font-size:12px;
line-height:1.4;
}
.s24-ai-visual-reference{
margin:0;
min-height:316px;
padding:12px;
border:1px solid #eadcff;
border-radius:12px;
background:#fbf8ff;
}
.s24-ai-visual-reference.is-idea,
.s24-ai-visual-reference.is-upload{
border-color:#cfe7a0;
background:#fbfff4;
}
.s24-ai-selected-preview-card{
display:flex;
flex-direction:column;
height:100%;
min-height:290px;
}
.s24-ai-selected-preview-figure{
display:flex;
align-items:center;
justify-content:center;
flex:1 1 auto;
min-height:210px;
padding:12px;
border:1px solid #ece1ff;
border-radius:12px;
background:#fff;
}
.s24-ai-selected-preview-figure img{
max-width:100%;
max-height:220px;
display:block;
object-fit:contain;
}
.s24-ai-selected-preview-placeholder{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
min-height:210px;
color:#9a8eb0;
text-align:center;
}
.s24-ai-selected-preview-placeholder strong{
color:#6f5c90;
font-size:34px;
line-height:1;
}
.s24-ai-selected-preview-placeholder span{
display:block;
max-width:220px;
font-size:13px;
line-height:1.4;
}
.s24-ai-selected-preview-meta{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-top:12px;
}
.s24-ai-selected-preview-text{
min-width:0;
flex:1 1 auto;
}
.s24-ai-selected-preview-text strong,
.s24-ai-selected-preview-text span{
display:block;
}
.s24-ai-selected-preview-text strong{
color:#111;
font-size:14px;
line-height:1.35;
}
.s24-ai-selected-preview-text span{
margin-top:2px;
color:#666;
font-size:12px;
line-height:1.4;
word-break:break-word;
}
.s24-ai-visual-reference-clear{
flex:0 0 auto;
border:none !important;
background:transparent !important;
color:#8224e3 !important;
padding:4px 0 !important;
font-size:12px !important;
font-weight:700 !important;
cursor:pointer !important;
text-decoration:underline;
}
#s24-ai-sticker-generator.s24-ai-has-selected-idea .s24-ai-reference-wrap,
#s24-ai-sticker-generator.s24-ai-has-uploaded-reference .s24-ai-reference-wrap{
opacity:1;
}
@media (max-width:900px){
.s24-ai-visual-inspiration-layout{
grid-template-columns:1fr;
}
.s24-ai-visual-reference{
min-height:unset;
}
}
@media (max-width:700px){
.s24-ai-generator-ideas-grid{
grid-template-columns:repeat(4, minmax(0, 1fr));
}
.s24-ai-generator-idea-option,
.s24-ai-generator-upload-option{
height:76px;
}
.s24-ai-selected-preview-figure{
min-height:180px;
}
.s24-ai-selected-preview-figure img{
max-height:180px;
}
}
@media (max-width:520px){
.s24-ai-generator-ideas-grid{
grid-template-columns:repeat(3, minmax(0, 1fr));
}
.s24-ai-selected-preview-meta{
display:block;
}
.s24-ai-visual-reference-clear{
margin-top:8px !important;
}
} .s24-ai-selected-preview-head span,
.s24-ai-generator-ideas-head span{
display:none;
}
.s24-ai-selected-preview-placeholder{
min-height:210px;
}
.s24-ai-selected-preview-placeholder strong{
font-size:28px;
}
.s24-ai-selected-preview-placeholder span{
max-width:180px;
}