:root{

    --primary:#0B66C3;
    --primary-dark:#084b90;
    --secondary:#f5f9ff;

    --text:#1f2937;
    --muted:#6b7280;

    --border:#dbe7f5;

    --success:#22c55e;

    --radius:18px;

    --shadow:
        0 10px 40px rgba(15,23,42,.08);

    --transition:.30s;
}

*{
    box-sizing:border-box;
}
.ekd-custom-order-container,
.ekd-custom-order-container *{
    box-sizing:border-box;
}

.ekd-custom-order-container{

    max-width:1200px;

    margin:80px auto;

    background:white;

    border-radius:25px;

    box-shadow:var(--shadow);

    overflow:hidden;
}

.ekd-form-header{

    padding:55px;

    background:linear-gradient(
        135deg,
        #0b66c3,
        #1b8ef7
    );

    color:white;
}

.ekd-form-header h2{

    margin:0;

    font-size:42px;

    font-weight:700;
}

.ekd-form-header p{

    margin-top:15px;

    opacity:.95;

    font-size:18px;

    max-width:650px;

    line-height:1.7;
}

.ekd-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:50px;

    padding:50px;
}

.ekd-left h3{

    margin-top:40px;

    margin-bottom:20px;

    color:var(--primary);

    font-size:24px;
}

.ekd-field{

    margin-bottom:25px;
}

.ekd-field label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

    color:var(--text);
}

.ekd-field input,
.ekd-field select,
.ekd-field textarea{

    width:100%;

    padding:15px 18px;

    border:1px solid var(--border);

    border-radius:14px;

    font-size:15px;

    transition:var(--transition);

    background:#fbfdff;
}

.ekd-field input:focus,
.ekd-field textarea:focus,
.ekd-field select:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:
        0 0 0 4px rgba(11,102,195,.15);
}

.ekd-two{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;
}

.ekd-size-grid{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:12px;

    margin-bottom:30px;
}

.ekd-size-grid div{

    text-align:center;
}

.ekd-size-grid label{

    display:block;

    margin-bottom:8px;

    font-weight:600;
}

.ekd-size-grid input{

    width:100%;

    padding:12px;

    border-radius:12px;

    border:1px solid var(--border);

    text-align:center;
}

.ekd-upload{

    border:2px dashed #8cbcf1;

    border-radius:20px;

    padding:50px;

    text-align:center;

    cursor:pointer;

    transition:.3s;

    background:#f9fcff;
}

.ekd-upload:hover{

    background:#eef7ff;

    border-color:var(--primary);
}

.ekd-upload span{

    font-size:48px;
}

.ekd-upload p{

    margin:15px 0 5px;

    font-weight:600;
}

.ekd-upload small{

    color:var(--muted);
}

.ekd-btn{

    margin-top:35px;

    width:100%;

    padding:18px;

    border:none;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #0b66c3,
        #1b8ef7
    );

    color:white;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;
}

.ekd-btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 15px 35px rgba(11,102,195,.35);
}

.ekd-right{

    display:flex;

    flex-direction:column;

    gap:25px;
}

.ekd-card{

    background:#f8fbff;

    border:1px solid var(--border);

    border-radius:20px;

    padding:30px;
}

.ekd-card h3{

    color:var(--primary);

    margin-top:0;
}

.ekd-card ul{

    padding-left:20px;

    line-height:2;
}

.ekd-card p{

    color:var(--muted);

    line-height:1.8;
}

@media(max-width:900px){

    .ekd-grid{

        grid-template-columns:1fr;
    }

    .ekd-size-grid{

        grid-template-columns:repeat(3,1fr);
    }

}

@media(max-width:600px){

    .ekd-two{

        grid-template-columns:1fr;
    }

    .ekd-size-grid{

        grid-template-columns:repeat(2,1fr);
    }

    .ekd-form-header{

        padding:35px;
    }

    .ekd-grid{

        padding:30px;
    }

}

/* PRODUCT CARDS */

.ekd-product-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

margin-bottom:35px;

}

.ekd-product-card{

padding:30px;

border:2px solid #d9e6f5;

border-radius:18px;

text-align:center;

cursor:pointer;

transition:.3s;

background:white;

}

.ekd-product-card:hover{

transform:translateY(-5px);

box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.ekd-product-card.active{

background:#0B66C3;

border-color:#0B66C3;

color:white;

}

.ekd-product-card span{

display:block;

font-size:46px;

margin-bottom:15px;

}

.ekd-product-card h4{

margin:0;

font-size:18px;

}

/* Tablet */

@media(max-width:768px){

    .ekd-product-grid{

        grid-template-columns:repeat(2,minmax(0,1fr)) !important;

    }

}

/* Phone */

@media(max-width:500px){

    .ekd-product-grid{

        grid-template-columns:repeat(2,minmax(0,1fr)) !important;

        gap:15px !important;

    }

    .ekd-product-card{

        padding:20px 12px;

    }

    .ekd-product-card span{

        font-size:34px;

        margin-bottom:10px;

    }

    .ekd-product-card h4{

        font-size:16px;

        word-break:normal;
        overflow-wrap:break-word;

    }

}

@media(max-width:500px){

.ekd-product-grid{

grid-template-columns:1fr;

}

}
/* Force our layout */

.ekd-custom-order-container{

    font-family:inherit;

}

.ekd-custom-order-container input,
.ekd-custom-order-container textarea,
.ekd-custom-order-container select{

    width:100% !important;

    display:block;

    max-width:none !important;

    font-size:16px;

}

.ekd-product-grid{

    display:grid !important;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:20px !important;

}

.ekd-two{

    display:grid !important;

    grid-template-columns:1fr 1fr !important;

    gap:20px !important;

}

.ekd-grid{

    display:grid !important;

    grid-template-columns:2fr 1fr !important;

    gap:50px !important;

}

@media(max-width:900px){

    .ekd-grid{

        grid-template-columns:1fr !important;

    }

}
#giftTypeField,
#otherProductField,
#sizeSection{

    animation:fadeIn .3s ease;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(-10px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.ekd-upload{

position:relative;

}

.ekd-upload:hover{

cursor:pointer;

}