/* ================= GLOBAL ================= */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f5f5f5;
    color: #333;
}

/* ================= HEADER ================= */

#content {
    justify-items: center;
}

#head {
    background-color: var(--e-global-color-17a726c);
    width: 100%;
    border-radius: 15px;
    padding: 31px;
}

.container {
    margin: 0 auto;
    width: 894px;
}

h1 {
    color: #212529;
    margin: 0;
    font-size: 45px !important;
    font-weight: 700 !important;
    text-align: center;
}

.subtitle {
    color: darkgray;
    font-size: large;
    text-align: center;
    margin-top: 10px;
}

/* ================= CONTROLS ================= */

.controls {
    margin-top: 21px;
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    gap: 15px;
}

/* TEXT INPUT */
#textInput {
    width: 100%;
    padding: 12px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 8px;
}
#textInput :focus{
	 border: 1px solid #5f2dee !important;
}

/* BUTTON ROW */
.case-controls {
    display: flex;
    width: 100%;
    gap: 15px;
}

/* BUTTON STYLE */
.case-controls button {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 30px;
    background: linear-gradient(45deg, #6a11cb, #2575fc);
    color: white;
    cursor: pointer;
    font-weight: 500;
    transition: 0.3s;
}

.case-controls button:hover {
    opacity: 0.9;
}

/* SIZE CONTROL */
.size-control {
    width: 100%;
}

#fontSize {
    width: 100%;
}

/* ================= PREVIEW ================= */

.preview {
	    margin-top: 16px;
    background-color: #fff;
    padding: 31px !important;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}
/* 🔥 DESKTOP FIX */
.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row; /* force row on desktop */
}

/* FONT BLOCK */
/* ===== TITLE ===== */
.font-preview h3 {
    margin: 0;
    font-size: 1.1em;
    color: #444;

    flex: 1;
    min-width: 0;            /* 🔥 prevents overflow */
    word-break: break-word;  /* wraps long text */
}

/* ===== COPY BUTTON ===== */
.copy-btn {
    background-color: #330f95 !important;
    border: none;
    color: white;
    padding: 15px 58px !important;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    transition: 0.3s;

    flex-shrink: 0;          /* 🔥 prevents squeezing */
    white-space: nowrap;     /* keeps text in one line */
}

.copy-btn:hover {
    opacity: 0.85;
}

/* TEXT PREVIEW */
.font-preview p {
    margin: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    width: 100%;
}

/* ================= DOWNLOAD BUTTON ================= */

/* #download {
    display: block;
    margin: 0 auto;
    padding: 15px 30px;
    font-size: 1.2em;
    background-color: #6630c6;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
} */
/* 
#download:hover {
    background-color: #2e0674;
} */
/* ===== FIX: FAKE GILROY USING POPPINS ===== */

.gilroy-thin p { font-family: 'Poppins'; font-weight: 100; }
.gilroy-thin-italic p { font-family: 'Poppins'; font-weight: 100; font-style: italic; }

.gilroy-ultra-light p { font-family: 'Poppins'; font-weight: 200; }
.gilroy-ultra-light-italic p { font-family: 'Poppins'; font-weight: 200; font-style: italic; }

.gilroy-light p { font-family: 'Poppins'; font-weight: 300; }
.gilroy-light-italic p { font-family: 'Poppins'; font-weight: 300; font-style: italic; }

.gilroy-regular p { font-family: 'Poppins'; font-weight: 400; }
.gilroy-regular-italic p { font-family: 'Poppins'; font-weight: 400; font-style: italic; }

.gilroy-medium p { font-family: 'Poppins'; font-weight: 500; }
.gilroy-medium-italic p { font-family: 'Poppins'; font-weight: 500; font-style: italic; }

.gilroy-semi-bold p { font-family: 'Poppins'; font-weight: 600; }
.gilroy-semi-bold-italic p { font-family: 'Poppins'; font-weight: 600; font-style: italic; }

.gilroy-bold p { font-family: 'Poppins'; font-weight: 700; }
.gilroy-bold-italic p { font-family: 'Poppins'; font-weight: 700; font-style: italic; }

.gilroy-extra-bold p { font-family: 'Poppins'; font-weight: 800; }
.gilroy-extra-bold-italic p { font-family: 'Poppins'; font-weight: 800; font-style: italic; }

.gilroy-black p { font-family: 'Poppins'; font-weight: 900; }
.gilroy-black-italic p { font-family: 'Poppins'; font-weight: 900; font-style: italic; }

/* ================= MOBILE ================= */

@media (max-width: 768px) {

    .container {
        width: 100%;
    }

    .controls {
        flex-direction: column;
    }

    .case-controls {
        flex-direction: column;
    }

    .case-controls button {
        width: 100%;
    }

    #textInput {
        width: 100%;
    }

    #fontSize {
        width: 100%;
    }
	
	@media (max-width: 480px) {

    .preview-header {
        flex-direction: column;
        align-items: flex-start;
			gap: 8px;
    }

    .copy-btn {
        align-self: flex-end;
    }
}
	
	
}