/* Font faces for e-card project */

@font-face {
    font-family: 'Archer ExtraLight';
    src: url('../fonts/ARCHER-EXTRALIGHT_BTCE_052020.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Aaux Pro Light';
    src: url('../fonts/Aaux_ProLight_BTCE.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Aaux Pro Regular';
    src: url('../fonts/Aaux_ProRegular_BTCE_2.woff') format('woff'),
         url('../fonts/Aaux_ProRegular_BTCE_2.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Amatic SC';
    src: url('../fonts/AmaticSC-Regular_0.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Avant Garde Gothic Light';
    src: url('../fonts/Avant_Garde_Gothic_LT_ELight_BTCE.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Bebas Neue Bold';
    src: url('../fonts/BEBASNEUEBOLD_BTCE_052020.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Bebas Neue';
    src: url('../fonts/BEBASNEUEREGULAR_BTCE.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Bauer Bodoni';
    src: url('../fonts/BauerBodoniStdRomanBTCE.woff') format('woff'),
         url('../fonts/BauerBodoniStdRomanBTCE.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Bean Pole';
    src: url('../fonts/BeanPole_BTCE.woff') format('woff'),
         url('../fonts/BeanPole_BTCE.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Beloved Gray';
    src: url('../fonts/BelovedGray_BTCE.woff') format('woff'),
         url('../fonts/BelovedGray_BTCE.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Better Together';
    src: url('../fonts/Better_Together.woff') format('woff'),
         url('../fonts/Better_Together.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Big River';
    src: url('../fonts/BigRiver.woff') format('woff'),
         url('../fonts/BigRiver.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Boopee';
    src: url('../fonts/Boopee_BTCE_SG.woff') format('woff'),
         url('../fonts/Boopee_BTCE_SG.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Born Ready';
    src: url('../fonts/BornReady.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Cursive Standard';
    src: url('../fonts/Cursivestandard_BTCE_SG.woff') format('woff'),
         url('../fonts/Cursivestandard_BTCE_SG.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Hermitage';
    src: url('../fonts/Hermitage_BTCE.woff') format('woff'),
         url('../fonts/Hermitage_BTCE.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'ITC Avant Garde Gothic Book';
    src: url('../fonts/ITCAvantGardeGothicLTBook.woff') format('woff'),
         url('../fonts/ITCAvantGardeGothicLTBook.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'ITC Avant Garde Pro Bold';
    src: url('../fonts/ITCAvantGardeProBoldBTCE.woff') format('woff'),
         url('../fonts/ITCAvantGardeProBoldBTCE.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('../fonts/JosefinSansBTCE.woff') format('woff'),
         url('../fonts/JosefinSansBTCE.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Josefin Sans Bold';
    src: url('../fonts/JosefinSansBoldBTCE.woff') format('woff'),
         url('../fonts/JosefinSansBoldBTCE.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'KG Two is Better Than One';
    src: url('../fonts/KGTwoisBetterThanOne.woff') format('woff'),
         url('../fonts/KGTwoisBetterThanOne.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Macarons';
    src: url('../fonts/MACARONS.woff') format('woff'),
         url('../fonts/MACARONS.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Madina Clean';
    src: url('../fonts/MadinaCleanBTCE_1.woff') format('woff'),
         url('../fonts/MadinaCleanBTCE_1.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Monthoers Vintage';
    src: url('../fonts/MonthoersVintageBTCE.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Mountain Script';
    src: url('../fonts/MountainScript.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Mountains of Christmas';
    src: url('../fonts/MountainsofChristmas_Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Mountains of Christmas Bold';
    src: url('../fonts/MountainsofChristmas_Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Mrs Eaves Italic';
    src: url('../fonts/MrsEavesOTItalicBTCE.woff') format('woff'),
         url('../fonts/MrsEavesOTItalicBTCE.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

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

@font-face {
    font-family: 'Otama';
    src: url('../fonts/Otama-EP_BTCE_1.woff') format('woff'),
         url('../fonts/Otama-EP_BTCE_1.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Parisienne';
    src: url('../fonts/Parisienne_BTCE.woff') format('woff'),
         url('../fonts/Parisienne_BTCE.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 400 900;
    font-style: normal;
}

@font-face {
    font-family: 'Playfair Display Italic';
    src: url('../fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 400 900;
    font-style: italic;
}

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

@font-face {
    font-family: 'Roboto Light';
    src: url('../fonts/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Bold';
    src: url('../fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Roses Please';
    src: url('../fonts/RosesPlease.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Santorini';
    src: url('../fonts/SantoriniRegularBTCE.woff') format('woff'),
         url('../fonts/SantoriniRegularBTCE.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Serlio New';
    src: url('../fonts/Serlio_New_BTCE.woff2') format('woff2'),
         url('../fonts/Serlio_New_BTCE.woff') format('woff'),
         url('../fonts/Serlio_New_BTCE.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Tokyo Dreams';
    src: url('../fonts/TokyoDreams-Regular.woff') format('woff'),
         url('../fonts/TokyoDreams-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

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

@font-face {
    font-family: 'Amatic Bold';
    src: url('../fonts/amaticbold.woff') format('woff'),
         url('../fonts/amaticbold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

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

@font-face {
    font-family: 'Archer Book';
    src: url('../fonts/archer-book-webfont.woff') format('woff'),
         url('../fonts/archer-book-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Case';
    src: url('../fonts/case.woff') format('woff'),
         url('../fonts/case.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Fox in the Snow';
    src: url('../fonts/fox_in_the_snow.woff') format('woff'),
         url('../fonts/fox_in_the_snow.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Hijr Notes';
    src: url('../fonts/hijrnotesbtce-webfont.woff') format('woff'),
         url('../fonts/hijrnotesbtce-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

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

@font-face {
    font-family: 'Theos';
    src: url('../fonts/theosbtce-webfont_1.woff') format('woff'),
         url('../fonts/theosbtce-webfont_1.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Custom dropdown styling */
.custom-dropdown {
    position: relative;
    min-width: 300px;
    font-size: 16px;
}

.dropdown-selected {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border: 2px solid #ccc;
    border-radius: 8px;
    background-color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 280px;
}

.dropdown-selected:hover {
    border-color: #999;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.dropdown-selected.open {
    border-color: #007bff;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.dropdown-arrow {
    font-size: 12px;
    color: #666;
    transition: transform 0.3s ease;
}

.dropdown-selected.open .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: white;
    border: 2px solid #007bff;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.dropdown-options.open {
    display: block;
}

.dropdown-option {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.4;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
}

.dropdown-option:hover {
    background-color: #f8f9fa;
}

.dropdown-option:last-child {
    border-bottom: none;
}

.dropdown-option.selected {
    background-color: #e3f2fd;
    color: #1976d2;
}

/* Scrollbar styling for dropdown */
.dropdown-options::-webkit-scrollbar {
    width: 8px;
}

.dropdown-options::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.dropdown-options::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.dropdown-options::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Apply font classes for previews */
.font-archer-extralight { font-family: 'Archer ExtraLight', sans-serif; }
.font-aaux-pro-light { font-family: 'Aaux Pro Light', sans-serif; }
.font-aaux-pro-regular { font-family: 'Aaux Pro Regular', sans-serif; }
.font-amatic-sc { font-family: 'Amatic SC', cursive; }
.font-avant-garde-light { font-family: 'Avant Garde Gothic Light', sans-serif; }
.font-bebas-neue-bold { font-family: 'Bebas Neue Bold', sans-serif; }
.font-bebas-neue { font-family: 'Bebas Neue', sans-serif; }
.font-bauer-bodoni { font-family: 'Bauer Bodoni', serif; }
.font-bean-pole { font-family: 'Bean Pole', sans-serif; }
.font-beloved-gray { font-family: 'Beloved Gray', script; }
.font-better-together { font-family: 'Better Together', script; }
.font-big-river { font-family: 'Big River', display; }
.font-boopee { font-family: 'Boopee', display; }
.font-born-ready { font-family: 'Born Ready', display; }
.font-cursive-standard { font-family: 'Cursive Standard', cursive; }
.font-hermitage { font-family: 'Hermitage', script; }
.font-itc-avant-garde-book { font-family: 'ITC Avant Garde Gothic Book', sans-serif; }
.font-itc-avant-garde-bold { font-family: 'ITC Avant Garde Pro Bold', sans-serif; }
.font-josefin-sans { font-family: 'Josefin Sans', sans-serif; }
.font-josefin-sans-bold { font-family: 'Josefin Sans Bold', sans-serif; }
.font-kg-two { font-family: 'KG Two is Better Than One', script; }
.font-macarons { font-family: 'Macarons', display; }
.font-madina-clean { font-family: 'Madina Clean', sans-serif; }
.font-monthoers-vintage { font-family: 'Monthoers Vintage', display; }
.font-mountain-script { font-family: 'Mountain Script', script; }
.font-mountains-christmas { font-family: 'Mountains of Christmas', display; }
.font-mountains-christmas-bold { font-family: 'Mountains of Christmas Bold', display; }
.font-mrs-eaves-italic { font-family: 'Mrs Eaves Italic', serif; }
.font-northwell { font-family: 'Northwell', script; }
.font-otama { font-family: 'Otama', script; }
.font-parisienne { font-family: 'Parisienne', script; }
.font-playfair-display { font-family: 'Playfair Display', serif; }
.font-playfair-display-italic { font-family: 'Playfair Display Italic', serif; }
.font-roboto { font-family: 'Roboto', sans-serif; }
.font-roboto-light { font-family: 'Roboto Light', sans-serif; }
.font-roboto-bold { font-family: 'Roboto Bold', sans-serif; }
.font-roses-please { font-family: 'Roses Please', script; }
.font-santorini { font-family: 'Santorini', script; }
.font-serlio-new { font-family: 'Serlio New', serif; }
.font-tokyo-dreams { font-family: 'Tokyo Dreams', script; }
.font-victoria { font-family: 'Victoria', script; }
.font-amatic-bold { font-family: 'Amatic Bold', cursive; }
.font-amelie { font-family: 'Amelie', script; }
.font-archer-book { font-family: 'Archer Book', serif; }
.font-case { font-family: 'Case', sans-serif; }
.font-fox-snow { font-family: 'Fox in the Snow', script; }
.font-hijr-notes { font-family: 'Hijr Notes', script; }
.font-juvenile { font-family: 'Juvenile', display; }
.font-theos { font-family: 'Theos', script; }