/* ========================================================= TOOTH FAIRY LETTER GENERATOR ========================================================= */ .letter-generator-section{position:relative;width:100%;padding:clamp(5rem,7vw,8rem) 0;overflow:hidden;}.letter-generator-section > .container{width:100%;max-width:1800px;margin:0 auto;padding:0 1.5rem;box-sizing:border-box;}/* ========================================================= HEADER ========================================================= */ .letter-generator-section .section-header,.letter-generator-section .letter-header{width:100%;max-width:980px;margin:0 auto 4rem;text-align:center;}.letter-generator-section .letter-label{margin:0 0 1rem;color:#d9b86c;font-size:0.85rem;line-height:1.4;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;}.letter-generator-section .section-header h2,.letter-generator-section .letter-header h2{margin:0 0 22px;color:#ffffff;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.35rem,3.35vw,3.55rem);line-height:1.08;font-weight:400;}.letter-generator-section .section-header h2 span,.letter-generator-section .letter-header h2 span{color:#d9b86c;font-style:italic;}.letter-generator-section .section-header p,.letter-generator-section .letter-header p{width:100%;max-width:820px;margin:0 auto;color:rgba(230,220,255,0.68);font-size:20px;line-height:1.75;}/* ========================================================= DESKTOP LAYOUT ========================================================= */ .letter-generator{display:grid;grid-template-columns:minmax(420px,520px) minmax(620px,700px);justify-content:center;align-items:stretch;gap:clamp(3rem,5vw,6rem);width:100%;max-width:1450px;margin:0 auto;}/* ========================================================= LEFT PANEL ========================================================= */ .letter-form{display:flex;width:100%;height:100%;}.letter-form__inner{display:flex;flex-direction:column;width:100%;min-height:100%;padding:2rem;border:1px solid rgba(217,184,108,0.25);border-radius:28px;background:linear-gradient(160deg,rgba(26,14,64,0.95),rgba(13,8,43,0.95));box-shadow:0 28px 75px rgba(3,1,20,0.3),0 0 35px rgba(186,120,255,0.14),inset 0 1px 0 rgba(255,255,255,0.04);box-sizing:border-box;}.letter-form .form-group{margin:0 0 1.15rem;}.letter-form .form-group--message{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;margin-bottom:1.3rem;}.form-group__heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;}.letter-form .form-group label{display:block;margin:0 0 0.58rem;color:#d9b86c;font-size:0.9rem;line-height:1.4;font-weight:800;letter-spacing:0.055em;}.letter-character-count{margin:0 0 0.58rem;color:rgba(230,220,255,0.46);font-size:0.75rem;line-height:1.4;}.letter-character-count.is-warning{color:#ffd15c;}.letter-character-count.is-danger{color:#ff9b91;}/* ========================================================= FORM CONTROLS ========================================================= */ .letter-form input,.letter-form select,.letter-form textarea{display:block;width:100%;border:1px solid rgba(217,184,108,0.24);border-radius:15px;outline:none;background:rgba(7,5,32,0.88);color:#ffffff;font-size:1rem;box-sizing:border-box;transition:border-color 0.22s ease,box-shadow 0.22s ease,background-color 0.22s ease;}.letter-form input,.letter-form select{min-height:56px;padding:0.95rem 1.1rem;}.letter-form textarea{flex:1 1 auto;min-height:275px;padding:1.1rem;resize:none;font-family:Georgia,"Times New Roman",serif;font-size:1rem;line-height:1.72;white-space:pre-wrap;}.letter-form input::placeholder,.letter-form textarea::placeholder{color:rgba(255,255,255,0.36);}.letter-form input:hover,.letter-form select:hover,.letter-form textarea:hover{border-color:rgba(217,184,108,0.42);}.letter-form input:focus,.letter-form select:focus,.letter-form textarea:focus{border-color:rgba(217,184,108,0.85);background:rgba(9,6,37,0.98);box-shadow:0 0 0 3px rgba(217,184,108,0.08),0 0 20px rgba(217,184,108,0.12);}/* ========================================================= SELECT ========================================================= */ .letter-form select{padding-right:3.25rem;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#d9b86c 50%),linear-gradient(135deg,#d9b86c 50%,transparent 50%),linear-gradient(135deg,rgba(24,12,58,0.98),rgba(8,5,32,0.98));background-position:calc(100% - 25px) 50%,calc(100% - 18px) 50%,0 0;background-size:7px 7px,7px 7px,100% 100%;background-repeat:no-repeat;font-weight:600;cursor:pointer;}.letter-form select option{background:#13072f;color:#ffffff;}/* ========================================================= BUTTON ========================================================= */ .letter-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:58px;margin-top:auto;padding:1rem 1.5rem;border:0;border-radius:999px;background:linear-gradient(135deg,#ffd86d,#e4ac3c);color:#170b30;font-family:inherit;font-size:1rem;line-height:1.2;font-weight:900;text-align:center;cursor:pointer;box-shadow:0 12px 28px rgba(217,168,63,0.2),0 0 25px rgba(217,184,108,0.2),inset 0 1px 0 rgba(255,255,255,0.42);transition:transform 0.2s ease,box-shadow 0.2s ease,opacity 0.2s ease;}.letter-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(217,168,63,0.27),0 0 35px rgba(217,184,108,0.3),inset 0 1px 0 rgba(255,255,255,0.46);}.letter-btn:focus-visible{outline:3px solid rgba(255,216,109,0.42);outline-offset:4px;}.letter-btn:disabled{opacity:0.62;cursor:wait;transform:none;}/* ========================================================= RIGHT PANEL ========================================================= */ .letter-preview-column{display:flex;flex-direction:column;width:100%;height:100%;max-width:700px;margin:0 auto;}.letter-preview-wrap{display:flex;flex:1 1 auto;width:100%;padding:11px;border:1px solid rgba(186,120,255,0.34);border-radius:27px;background:rgba(12,8,40,0.48);box-shadow:0 28px 75px rgba(3,1,20,0.32),0 0 45px rgba(186,120,255,0.14),inset 0 1px 0 rgba(255,255,255,0.035);box-sizing:border-box;}/* ========================================================= LETTER ========================================================= */ .letter-preview{position:relative;width:100%;aspect-ratio:0.7070707071;overflow:hidden;border-radius:15px;background:#fffdf8;box-shadow:0 18px 45px rgba(0,0,0,0.18);container-type:inline-size;isolation:isolate;}.letter-preview .letter-bg{position:absolute;inset:0;z-index:1;display:block;width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;margin:0 !important;padding:0 !important;border:0;border-radius:0;object-fit:fill !important;object-position:center;pointer-events:none;user-select:none;}/* ========================================================= EDITABLE TEXT ON LETTER ========================================================= */ .letter-text-overlay{position:absolute;top:35.7%;left:50%;z-index:10;width:71%;height:38%;max-height:38%;overflow:hidden;color:#4b2a75;text-align:left;transform:translateX(-50%);pointer-events:auto;box-sizing:border-box;}.letter-editable{outline:none;cursor:text;border-radius:5px;transition:background-color 0.18s ease,box-shadow 0.18s ease;}.letter-editable:hover{background:rgba(112,64,240,0.05);}.letter-editable:focus{background:rgba(255,255,255,0.36);box-shadow:0 0 0 2px rgba(112,64,240,0.16),0 5px 16px rgba(58,25,102,0.08);}#letterPreviewName{display:block;margin:0 0 0.72em;padding:2px 3px;color:#5b2d8e;font-family:Georgia,"Times New Roman",serif;font-size:clamp(19px,3.2cqw,28px);line-height:1.2;font-weight:700;font-style:italic;text-align:left;overflow-wrap:break-word;word-break:normal;}#letterPreviewText{margin:0;padding:3px;color:#4b2a75;font-family:Georgia,"Times New Roman",serif;font-size:clamp(13px,2.15cqw,18px);line-height:1.56;font-weight:400;letter-spacing:0;text-align:left;overflow-wrap:break-word;word-break:normal;}#letterPreviewText p,#letterPreviewText div{margin:0 0 0.94em;padding:0;color:inherit;font:inherit;line-height:inherit;letter-spacing:inherit;text-align:inherit;}#letterPreviewText p:last-child,#letterPreviewText div:last-child{margin-bottom:0;}/* ========================================================= DATE ========================================================= */ .letter-date-overlay{position:absolute;left:16.7%;bottom:6.65%;z-index:12;width:24%;min-height:20px;text-align:left;pointer-events:auto;}#letterPreviewDate{display:inline-block;min-width:82px;min-height:18px;padding:2px 4px;color:#6a5589;font-family:Georgia,"Times New Roman",serif;font-size:clamp(9px,1.25cqw,13px);line-height:1.15;font-style:italic;white-space:nowrap;}#letterPreviewDate:empty::before{content:attr(data-placeholder);color:rgba(106,85,137,0.45);}/* ========================================================= HELP TEXT ========================================================= */ .letter-preview-help{max-width:580px;margin:0.9rem auto 0;color:rgba(230,220,255,0.52);font-size:0.86rem;line-height:1.55;text-align:center;}/* ========================================================= LARGE DESKTOP ========================================================= */ @media (min-width:1500px){.letter-generator{grid-template-columns:minmax(440px,540px) minmax(650px,720px);max-width:1500px;gap:6rem;}.letter-preview-column{max-width:720px;}}/* ========================================================= MEDIUM DESKTOP ========================================================= */ @media (max-width:1250px){.letter-generator{grid-template-columns:minmax(380px,460px) minmax(560px,640px);gap:3.25rem;}.letter-text-overlay{top:35.8%;width:70%;}}/* ========================================================= TABLET ========================================================= */ @media (max-width:1050px){.letter-generator-section{padding:6rem 0;}.letter-generator{grid-template-columns:1fr;max-width:760px;gap:2.75rem;}.letter-form{max-width:680px;margin:0 auto;}.letter-form__inner{min-height:auto;}.letter-form textarea{min-height:280px;}.letter-preview-column{max-width:700px;}.letter-text-overlay{top:35.8%;width:70%;height:37%;max-height:37%;}}/* ========================================================= MOBILE ========================================================= */ @media (max-width:767px){.letter-generator-section{padding:4.5rem 0;}.letter-generator-section > .container{padding:0 1rem;}.letter-generator-section .section-header,.letter-generator-section .letter-header{margin-bottom:3rem;}.letter-generator-section .section-header h2,.letter-generator-section .letter-header h2{font-size:clamp(2.1rem,10vw,2.65rem);line-height:1.1;}.letter-generator-section .section-header p,.letter-generator-section .letter-header p{font-size:17px;line-height:1.65;}.letter-generator{display:flex;flex-direction:column-reverse;width:100%;max-width:100%;gap:2rem;}.letter-form{max-width:100%;}.letter-form__inner{padding:1.3rem;border-radius:23px;}.letter-form textarea{min-height:250px;}.letter-preview-column{max-width:100%;}.letter-preview-wrap{padding:7px;border-radius:20px;}.letter-preview{border-radius:10px;}.letter-text-overlay{top:35.5%;width:70%;height:37%;max-height:37%;}#letterPreviewName{margin-bottom:0.6em;font-size:clamp(11px,3.9cqw,18px);}#letterPreviewText{font-size:clamp(8px,2.8cqw,12px);line-height:1.45;}#letterPreviewText p,#letterPreviewText div{margin-bottom:0.78em;}.letter-date-overlay{left:16.3%;bottom:6.7%;width:28%;}#letterPreviewDate{min-width:55px;font-size:clamp(6.8px,1.8cqw,10px);}.letter-preview-help{font-size:0.8rem;}}/* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width:480px){.letter-generator-section{padding:4rem 0;}.letter-generator-section .section-header h2,.letter-generator-section .letter-header h2{font-size:clamp(2rem,10.5vw,2.4rem);}.letter-generator-section .section-header p,.letter-generator-section .letter-header p{font-size:16px;line-height:1.6;}.letter-form__inner{padding:1.15rem;}.letter-text-overlay{top:35.3%;width:71%;height:37%;max-height:37%;}#letterPreviewName{font-size:clamp(9.5px,3.8cqw,14.5px);}#letterPreviewText{font-size:clamp(7px,2.6cqw,10.5px);line-height:1.4;}.letter-date-overlay{left:16%;width:31%;}#letterPreviewDate{font-size:clamp(6px,1.7cqw,8.8px);}}/* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width:360px){.letter-generator-section > .container{padding:0 0.7rem;}.letter-text-overlay{width:72%;}#letterPreviewText{font-size:clamp(6.5px,2.5cqw,9.5px);line-height:1.36;}.letter-preview-help{display:none;}}/* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion:reduce){.letter-btn,.letter-editable,.letter-form input,.letter-form select,.letter-form textarea{transition:none;}}