@charset "UTF-8";/* ================================================== TOOTH FAIRY CERTIFICATE GENERATOR RESPONSIVE + PRINT-READY PNG ================================================== */ html{scroll-behavior:smooth;}#certificate{scroll-margin-top:120px;}/* SECTION */ .certificate-generator-section{position:relative;padding:8rem 0;overflow:hidden;}.certificate-generator-section .container{position:relative;z-index:2;width:100%;max-width:1600px;margin:0 auto;padding-inline:clamp(1.25rem,4vw,4rem);}/* ================================================== HEADER ================================================== */ .certificate-generator-section .certificate-header{margin-bottom:5rem;text-align:center;}.certificate-generator-section .certificate-label{margin-bottom:1rem;color:#d9b86c;font-size:0.85rem;font-weight:800;line-height:1.3;letter-spacing:0.18em;text-transform:uppercase;}.certificate-generator-section .certificate-header h2{max-width:900px;margin:0 auto 1rem;color:#ffffff;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.35rem,3.35vw,3.55rem);font-weight:400;line-height:1.08;letter-spacing:-0.03em;}.certificate-generator-section .certificate-header h2 span{color:#d9b86c;font-style:italic;}.certificate-generator-section .certificate-header p{max-width:700px;margin:0 auto;color:rgba(255,255,255,0.65);font-size:1.05rem;line-height:1.7;}/* ================================================== MAIN LAYOUT ================================================== */ .certificate-generator-section .certificate-generator{display:grid;grid-template-columns:390px minmax(0,1fr);align-items:center;width:100%;max-width:1500px;margin:0 auto;gap:clamp(4rem,5vw,6.5rem);}/* ================================================== FORM ================================================== */ .certificate-generator-section .certificate-form{width:100%;padding:2.2rem;border:1px solid rgba(217,184,108,0.25);border-radius:28px;background:rgba(18,10,48,0.78);box-shadow:0 0 35px rgba(186,120,255,0.16),inset 0 0 30px rgba(255,255,255,0.03);}.certificate-generator-section .form-group{margin-bottom:1.4rem;}.certificate-generator-section .form-group label{display:block;margin-bottom:0.6rem;color:#d9b86c;font-size:0.9rem;font-weight:800;line-height:1.4;letter-spacing:0.06em;}.certificate-generator-section .form-group input,.certificate-generator-section .form-group select,.certificate-generator-section .form-group textarea{box-sizing:border-box;width:100%;min-height:54px;padding:1rem 1.1rem;border:1px solid rgba(217,184,108,0.25);border-radius:16px;outline:none;background:rgba(7,5,32,0.85);color:#ffffff;font-family:inherit;font-size:1rem;line-height:1.4;transition:border-color 0.2s ease,box-shadow 0.2s ease;}.certificate-generator-section .form-group input::placeholder,.certificate-generator-section .form-group textarea::placeholder{color:rgba(255,255,255,0.42);}.certificate-generator-section .form-group textarea{min-height:125px;max-height:210px;resize:vertical;line-height:1.5;}.certificate-generator-section .form-group input:focus,.certificate-generator-section .form-group select:focus,.certificate-generator-section .form-group textarea:focus{border-color:rgba(217,184,108,0.75);box-shadow:0 0 0 3px rgba(217,184,108,0.08),0 0 18px rgba(217,184,108,0.18);}/* SELECT */ .certificate-generator-section .form-group select{min-height:56px;padding:1rem 3rem 1rem 1.1rem;appearance:none;-webkit-appearance:none;-moz-appearance:none;border:1px solid rgba(217,184,108,0.35);border-radius:18px;background: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% - 24px) 50%,calc(100% - 18px) 50%,0 0;background-size:7px 7px,7px 7px,100% 100%;background-repeat:no-repeat;color:#ffffff;font-size:1rem;font-weight:600;cursor:pointer;}/* ================================================== DOWNLOAD BUTTON ================================================== */ .certificate-generator-section .certificate-btn{width:100%;min-height:56px;padding:1.05rem 1.5rem;border:0;border-radius:999px;background:linear-gradient(135deg,#ffd15c,#d9a83f);color:#170b30;font-size:1rem;font-weight:900;line-height:1.2;cursor:pointer;box-shadow:0 14px 35px rgba(217,184,108,0.22),0 0 25px rgba(217,184,108,0.2);transition:transform 0.2s ease,box-shadow 0.2s ease,filter 0.2s ease;}.certificate-generator-section .certificate-btn:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 18px 42px rgba(217,184,108,0.28),0 0 35px rgba(217,184,108,0.3);}.certificate-generator-section .certificate-btn:focus-visible{outline:3px solid rgba(255,255,255,0.9);outline-offset:4px;}.certificate-generator-section .certificate-btn:disabled{opacity:0.65;cursor:wait;transform:none;}/* ================================================== CERTIFICATE PREVIEW ================================================== */ .certificate-generator-section .certificate-preview-wrap{justify-self:center;width:100%;max-width:1080px;margin:0 auto;padding:1.15rem;overflow:hidden;border:1px solid rgba(186,120,255,0.35);border-radius:32px;background:rgba(12,8,40,0.45);box-shadow:0 0 45px rgba(186,120,255,0.18),0 24px 70px rgba(0,0,0,0.22);}.certificate-generator-section .certificate-preview,.certificate-generator-section .certificate-artboard{position:relative;width:100%;max-width:1080px;aspect-ratio:1.5;margin:0 auto;overflow:hidden;border-radius:16px;background:#ffffff;container-type:inline-size;}/* BACKGROUND IMAGE */ .certificate-generator-section .certificate-bg{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#ffffff;pointer-events:none;user-select:none;}.certificate-generator-section .certificate-bg-placeholder{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;padding:2rem;background:#ffffff;color:#4b2675;font-family:Georgia,"Times New Roman",serif;font-size:18px;line-height:1.5;text-align:center;}/* ================================================== TEXT ON CERTIFICATE ================================================== */ .certificate-generator-section .certificate-child-name,.certificate-generator-section .certificate-custom-message,.certificate-generator-section .certificate-date{position:absolute;z-index:3;box-sizing:border-box;margin:0;padding:0;outline:none;font-family:Georgia,"Times New Roman",serif;text-align:center;cursor:text;overflow-wrap:break-word;word-break:normal;}/* CHILD NAME */ .certificate-generator-section .certificate-child-name{top:55.2%;left:50%;width:54%;transform:translateX(-50%);overflow:hidden;color:#4b2675;font-size:clamp(18px,3.55cqw,40px);font-weight:600;font-style:italic;line-height:1.05;white-space:nowrap;text-overflow:clip;}/* MESSAGE */ .certificate-generator-section .certificate-custom-message{top:69.2%;left:50%;width:39%;max-height:none;transform:translateX(-50%);overflow:visible;color:#2b1644;font-size:clamp(8px,1.42cqw,15px);font-weight:500;line-height:1.22;white-space:normal;}/* DATE */ .certificate-generator-section .certificate-date{left:28%;bottom:9.8%;transform:translateX(-50%);color:#2b1644;font-size:clamp(6.5px,1.02cqw,12px);font-weight:500;line-height:1;white-space:nowrap;}/* EDITING STATE */ .certificate-generator-section [contenteditable="true"]:focus{border-radius:4px;background:rgba(255,221,112,0.18);box-shadow:0 0 0 1px rgba(217,184,108,0.35);}.certificate-generator-section .certificate-artboard.is-exporting [contenteditable="true"]{outline:none !important;background:transparent !important;box-shadow:none !important;}.certificate-generator-section .certificate-artboard.is-exporting{border-radius:0;}.certificate-edit-note{max-width:700px;margin:0.8rem auto 0;color:rgba(255,255,255,0.55);font-size:0.85rem;line-height:1.5;text-align:center;}/* ================================================== LARGE DESKTOP ================================================== */ @media (min-width:1400px){.certificate-generator-section .certificate-generator{grid-template-columns:400px minmax(0,1fr);}.certificate-generator-section .certificate-preview-wrap,.certificate-generator-section .certificate-preview,.certificate-generator-section .certificate-artboard{max-width:1080px;}}/* ================================================== TABLET ================================================== */ @media (max-width:1200px){.certificate-generator-section{padding:6rem 0;}.certificate-generator-section .container{max-width:100%;padding-inline:24px;}.certificate-generator-section .certificate-generator{grid-template-columns:1fr;max-width:950px;gap:3rem;}.certificate-generator-section .certificate-form{width:100%;max-width:560px;margin:0 auto;}.certificate-generator-section .certificate-preview-wrap,.certificate-generator-section .certificate-preview,.certificate-generator-section .certificate-artboard{max-width:920px;}}/* ================================================== MOBILE ================================================== */ @media (max-width:767px){/* * Малко по-голям сертификат на мобилно. * Излиза леко извън вътрешния container,* но остава в рамките на екрана. */ #certificate{scroll-margin-top:90px;}.certificate-generator-section{padding:4.5rem 0;}.certificate-generator-section .container{width:100%;padding-inline:16px;}.certificate-generator-section .certificate-header{margin-bottom:2.75rem;}.certificate-generator-section .certificate-label{margin-bottom:0.85rem;font-size:0.72rem;line-height:1.4;letter-spacing:0.15em;}.certificate-generator-section .certificate-header h2{max-width:360px;font-size:clamp(2.1rem,10vw,2.75rem);line-height:1.08;}.certificate-generator-section .certificate-header p{max-width:350px;font-size:1rem;line-height:1.65;}.certificate-generator-section .certificate-generator{gap:2.25rem;}.certificate-generator-section .certificate-form{width:100%;padding:1.35rem;border-radius:22px;}.certificate-generator-section .form-group{margin-bottom:1.2rem;}.certificate-generator-section .form-group input,.certificate-generator-section .form-group select,.certificate-generator-section .form-group textarea{font-size:16px;}.certificate-generator-section .certificate-preview-wrap{width:calc(100% + 28px);max-width:none;margin-right:-14px;margin-left:-14px;padding:6px;border-radius:16px;}.certificate-generator-section .certificate-preview,.certificate-generator-section .certificate-artboard{width:100%;max-width:none;border-radius:10px;}.certificate-generator-section .certificate-child-name{top:55.2%;width:55%;font-size:clamp(12px,3.6cqw,20px);line-height:1;}.certificate-generator-section .certificate-custom-message{top:69%;width:40%;font-size:clamp(5.1px,1.42cqw,7.6px);line-height:1.18;}.certificate-generator-section .certificate-date{left:28%;bottom:9.8%;font-size:clamp(4.3px,1cqw,6px);}.certificate-edit-note{max-width:330px;margin-top:0.7rem;font-size:0.8rem;line-height:1.5;}}/* ================================================== SMALL MOBILE ================================================== */ @media (max-width:390px){.certificate-generator-section .container{padding-inline:12px;}.certificate-generator-section .certificate-header h2{font-size:2.1rem;}.certificate-generator-section .certificate-preview-wrap{width:calc(100% + 20px);margin-right:-10px;margin-left:-10px;padding:5px;}.certificate-generator-section .certificate-child-name{width:55%;font-size:clamp(10px,3.5cqw,17px);}.certificate-generator-section .certificate-custom-message{width:40%;font-size:clamp(4.3px,1.35cqw,6.4px);line-height:1.16;}.certificate-generator-section .certificate-date{font-size:clamp(3.8px,0.96cqw,5.3px);}}