/*==================================================
    J-TECH SMM FRONTEND
==================================================*/

/* RESET */

.jtech-order-wrapper{

    width:100%;

}

.jtech-order-card{

    background:#ffffff;

    border-radius:24px;

    padding:35px;

    box-shadow:0 15px 45px rgba(0,0,0,.08);

}

.jtech-order-card h2{

    font-size:34px;

    font-weight:800;

    color:#111827;

    margin-bottom:30px;

}

.jtech-row{

    margin-bottom:22px;

}

.jtech-row label{

    display:block;

    margin-bottom:10px;

    font-size:15px;

    font-weight:700;

    color:#111827;

}

#jtech-category,
#jtech-service,
#jtech-quantity,
#jtech-link{

    width:100%;

    height:58px;

    border:2px solid #e5e7eb;

    border-radius:16px;

    background:#ffffff;

    padding:0 18px;

    font-size:16px;

    transition:.3s;

}

#jtech-category:focus,
#jtech-service:focus,
#jtech-quantity:focus,
#jtech-link:focus{

    border-color:#dc2626;

    outline:none;

    box-shadow:0 0 0 5px rgba(220,38,38,.12);

}

/*==================================================
    PRICE BOX & BUTTON
==================================================*/

.jtech-price-box{

    margin:30px 0;

    padding:22px;

    background:#f8fafc;

    border:2px solid #eef2f7;

    border-radius:18px;

    text-align:center;

}

.jtech-price-box strong{

    display:block;

    font-size:16px;

    color:#6b7280;

    margin-bottom:10px;

}

#jtech-price{

    margin:0;

    font-size:38px;

    font-weight:800;

    color:#dc2626;

}

#jtech-add-cart{

    width:100%;

    height:60px;

    border:none;

    border-radius:16px;

    background:linear-gradient(135deg,#ef4444,#dc2626);

    color:#fff;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.30s;

}

#jtech-add-cart:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(220,38,38,.25);

}

/*==============================
    PREMIUM CARD EFFECT
==============================*/

.jtech-order-card{

    position:relative;
    overflow:hidden;

    border:1px solid rgba(220,38,38,.10);

    background:#fff;

    box-shadow:
        0 15px 40px rgba(15,23,42,.08),
        0 0 0 1px rgba(220,38,38,.05);

}

.jtech-order-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:6px;

    background:linear-gradient(90deg,
    #dc2626,
    #ff5b5b,
    #dc2626);

}

.jtech-order-card::after{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    right:-120px;
    top:-120px;

    border-radius:50%;

    background:radial-gradient(
        rgba(220,38,38,.12),
        transparent 70%
    );

    pointer-events:none;

}

.jtech-order-card:hover{

    transform:translateY(-6px);

    box-shadow:
        0 28px 60px rgba(15,23,42,.12),
        0 10px 35px rgba(220,38,38,.12);

    transition:.35s;

}

.jtech-order-card{
    position:relative;
    overflow:hidden;
}

.jtech-order-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:#dc2626;
}

/* ORDER SUMMARY CARD */

.jtech-summary{

    position:relative;

    overflow:hidden;

    background:#fff;

    border-radius:24px;

    padding:35px;

    box-shadow:0 15px 45px rgba(0,0,0,.08);

}

.jtech-summary::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:#dc2626;

}

.jtech-summary{

    transition:.30s ease;

}

.jtech-summary:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 50px rgba(220,38,38,.15);

}

/*========== ORDER SUMMARY ITEMS ==========*/

.summary-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 0;

    border-bottom:1px solid #f1f5f9;

}

.summary-item:last-of-type{

    border-bottom:none;

}

.summary-item span{

    color:#6b7280;

    font-size:15px;

    font-weight:600;

}

.summary-item strong{

    color:#111827;

    font-size:17px;

    font-weight:800;

}

#summary-total{

    color:#dc2626;

    font-size:24px;

}

.summary-footer{

    margin-top:25px;

    padding:15px;

    border-radius:14px;

    background:#fff5f5;

    color:#dc2626;

    text-align:center;

    font-weight:700;

}

/*========== PREMIUM INPUT EFFECT ==========*/

#jtech-category,
#jtech-service,
#jtech-quantity,
#jtech-link{

    transition:all .30s ease;

}

#jtech-category:hover,
#jtech-service:hover,
#jtech-quantity:hover,
#jtech-link:hover{

    border-color:#dc2626;

    box-shadow:0 8px 20px rgba(220,38,38,.08);

    transform:translateY(-2px);

}

/*========== PREMIUM BUTTON ==========*/

#jtech-add-cart{

    position:relative;

    overflow:hidden;

    transition:.35s ease;

}

#jtech-add-cart::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:rgba(255,255,255,.35);

    transform:skewX(-25deg);

    transition:.7s;

}

#jtech-add-cart:hover::before{

    left:150%;

}

#jtech-add-cart:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(220,38,38,.30);

}

#jtech-add-cart:active{

    transform:scale(.98);

}

/*========== PREMIUM TITLE ==========*/

.jtech-order-card h2{

    position:relative;

    display:inline-block;

    margin-bottom:35px;

    padding-bottom:12px;

    color:#111827;

}

.jtech-order-card h2::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:70px;

    height:4px;

    border-radius:10px;

    background:linear-gradient(90deg,#dc2626,#ff6b6b);

}

.jtech-order-card h2::before{

    content:"📦";

    margin-right:10px;

}

/*========== PREMIUM FORM FIELDS ==========*/

#jtech-category,
#jtech-service,
#jtech-quantity,
#jtech-link{

    background:#fafafa;

    border:2px solid #edf2f7;

    border-radius:18px;

    font-size:16px;

    font-weight:600;

    color:#111827;

}

#jtech-category::placeholder,
#jtech-link::placeholder{

    color:#9ca3af;

}

#jtech-category:focus,
#jtech-service:focus,
#jtech-quantity:focus,
#jtech-link:focus{

    background:#fff;

    border-color:#dc2626;

    box-shadow:0 0 0 6px rgba(220,38,38,.10);

}

/*====================================
    PREMIUM SELECT
====================================*/

#jtech-category,
#jtech-service{

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    cursor:pointer;

    padding-right:55px;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23dc2626' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5 8 12l6.5-6.5' stroke='%23dc2626' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 18px center;

    background-size:16px;

}

#jtech-category:hover,
#jtech-service:hover{

    border-color:#dc2626;

}

/*====================================
    PREMIUM CONTENT LAYOUT
====================================*/

.jtech-content{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:35px;

    align-items:start;

}

.jtech-left,
.jtech-right{

    display:flex;

    flex-direction:column;

}

@media(max-width:991px){

    .jtech-content{

        grid-template-columns:1fr;

    }

}

/*====================================
    SERVICE INFO BOX
====================================*/

.jtech-service-info{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    margin-top:18px;

}

.jtech-service-info div{

    background:#fff;

    border:1px solid #f1f5f9;

    border-radius:16px;

    padding:18px;

    text-align:center;

    transition:.30s;

}

.jtech-service-info div:hover{

    border-color:#dc2626;

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(220,38,38,.10);

}

.jtech-service-info small{

    display:block;

    color:#6b7280;

    font-size:13px;

    margin-bottom:8px;

}

.jtech-service-info strong{

    color:#dc2626;

    font-size:18px;

    font-weight:700;

}

@media(max-width:576px){

    .jtech-service-info{

        grid-template-columns:1fr;

    }

}