:root {
    /* Backgrounds / base */
    --color-bg-dark: #2b030b;
    --color-white: #ffffff;
    --color-black: #000000;

    /* Gold accent */
    --color-gold: #d4af37;
    --color-gold-border-40: rgba(212, 175, 55, 0.4);
    --color-gold-border-50: rgba(212, 175, 55, 0.5);
    --color-gold-bg-05: rgba(212, 175, 55, 0.05);
    --color-gold-shadow-30: rgba(212, 175, 55, 0.3);
    --color-gold-light: #0cadec;
    --color-gold-dark: #c09438;

    /* Grays */
    --color-gray-count: #888;
    --color-gray-name: #bbb;
    --color-white-bg-03: rgba(255, 255, 255, 0.03);
    --color-white-border-15: rgba(255, 255, 255, 0.15);

    /* Text / shadows */
    --color-maroon-text: #31080f;
    --color-engraving-shadow-1: #705211;
    --color-engraving-shadow-2: #3a2603;
}

@font-face {
    font-family: 'Caveat';
    src: url('../fonts/Caveat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Naskh Arabic';
    src: url('../fonts/NotoNaskhArabic-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Droid Arabic Kufi';
    src: url('../fonts/DroidKufi-Regular.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Dancing Script';
    src: url('../fonts/DancingScript-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Great Vibes';
    src: url('../fonts/GreatVibes-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pacifico';
    src: url('../fonts/Pacifico-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Playball';
    src: url('../fonts/Playball-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Parisienne';
    src: url('../fonts/Parisienne-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PermanentMarker';
    src: url('../fonts/PermanentMarker-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--color-bg-dark);
    background-image: url('../images/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
}
.container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    height: 850px;
    padding: 40px;
    gap: 40px;
}

.sidebar {
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.section {
    display: flex;
    flex-direction: column;
}

.section-title {
    font-family: 'Cinzel', serif;
    color: var(--color-gold);
    font-size: 1.1rem;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.subtitle {
    color: var(--color-white);
    font-size: 0.75rem;
    margin-bottom: 12px;
}

.input-container {
    position: relative;
    width: 100%;
}

#nameInput {
    width: 100%;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-gold-border-40);
    border-radius: 8px;
    padding: 18px 15px;
    color: var(--color-white);
    font-size: 1rem;
    outline: none;
    transition: border 0.3s;
}

#nameInput:focus {
    border-color: var(--color-gold);
}

.char-count {
    position: absolute;
    right: 15px;
    bottom: 15px;
    font-size: 0.75rem;
    color: var(--color-gray-count);
}

.style-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.style-card {
    background: var(--color-white-bg-03);
    border: 1px solid var(--color-white-border-15);
    border-radius: 8px;
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.style-card:hover {
    border-color: var(--color-gold-border-50);
}

.style-card.active {
    border-color: var(--color-gold);
    background: var(--color-gold-bg-05);
}

.style-aa {
    font-size: 1.6rem;
    margin-bottom: 4px;
}

.style-name {
    font-size: 0.5rem;
    letter-spacing: 1px;
    color: var(--color-gray-name);
}

.style-card.active .style-name,
.style-card.active .style-aa {
    color: var(--color-gold);
}

.checkmark {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--color-gold);
    color: var(--color-bg-dark);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 0.65rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.preview-container {
    width: 85%;
    height: 550px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.tag-wrapper {
    position: relative;
    width: 100%;
    flex-grow: 1;
    min-height: 300px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.engraving-zone {
    position: absolute;
    transform: translate(-40%, -50%);
    width: 370px;
    text-align: center;
}

#previewText {
    font-size: 2rem;
    color: var(--color-white);
    text-shadow: 1px 1px 0px var(--color-engraving-shadow-1), -1px -1px 0px var(--color-engraving-shadow-2);
    letter-spacing: 10px;
}

.proceed-btn {
    width: 100%;
    background: linear-gradient(to right, var(--color-gold-light), var(--color-gold-dark));
    border: none;
    padding: 20px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    transition: transform 0.2s;
    letter-spacing: 1px;
}

.proceed-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--color-gold-shadow-30);
}

.proceed-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* ── Font classes ── */
.font-script            { font-family: 'Caveat', cursive; font-weight: 700;}
.font-noto-naskh-arabic  { font-family: 'Noto Naskh Arabic', serif; font-weight: 900;}
.font-droid-arabic-kufi  { font-family: 'Droid Arabic Kufi', sans-serif; font-weight: 900;}
.font-dancing-script     { font-family: 'Dancing Script', cursive; font-weight: 700;}
.font-great-vibes        { font-family: 'Great Vibes', cursive; font-weight: 400;}
.font-pacifico           { font-family: 'Pacifico', cursive; font-weight: 400;}
.font-playball           { font-family: 'Playball', cursive; font-weight: 400;}
.font-parisienne         { font-family: 'Parisienne', cursive; font-weight: 400;}
.font-PermanentMarker    { font-family: 'PermanentMarker', cursive; font-weight: 400;}


/* ── Responsive ── */
@media (max-width: 900px) {
  .container {
    flex-direction: column;
    height: auto;
    padding: 24px 20px;
    gap: 28px;
  }
  .sidebar { width: 100%; }
  .preview-container { width: 100%; }
  .tag-wrapper { min-height: 260px; }
  .engraving-zone { width: 80%; left: 50%; }
  #previewText { font-size: 1.8rem; }
}

@media (max-width: 480px) {
  .container { padding: 16px 14px; gap: 20px; }
  .style-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .style-card { height: 76px; }
  .style-aa { font-size: 1.3rem; }
  .tag-wrapper { min-height: 200px; }
  .engraving-zone { width: 90%; }
  #previewText { font-size: 1.4rem; }
  .proceed-btn { padding: 16px; font-size: 0.95rem; }
  .section-title { font-size: 0.95rem; }
  #nameInput { padding: 14px 12px; font-size: 0.9rem; }
}