/*****************************************************
HOME PAGE FULL CSS
Phoenix Bigo Shop
Scoped inside .application-container to prevent conflicts
*****************************************************/


/*****************************************************
HOME PAGE CONTAINER
*****************************************************/

.application-container{

width:100%;

display:block;

background-color:#ffffff;

}



/*****************************************************
HERO SECTION
*****************************************************/

.application-container .hero-section{

width:100%;

aspect-ratio:3/1.5;

background-color:#f3f4f6;

padding-top:8px;

padding-right:8px;

padding-bottom:8px;

padding-left:8px;

box-sizing:border-box;

}


.application-container .hero-image-box{

width:100%;

height:100%;

border-radius:12px;

background-size:cover;

background-position:center;

background-repeat:no-repeat;

box-shadow:0 4px 14px rgba(0,0,0,0.10);

}



/*****************************************************
CONTACT BUTTONS CONTAINER
*****************************************************/

.application-container .fixed-contact-container{

position:relative;

margin-top:18px;

margin-bottom:12px;

display:flex;

flex-direction:row;

justify-content:center;

align-items:center;

gap:12px;

padding-left:15px;

padding-right:15px;

}



/*****************************************************
CONTACT BUTTON BASE
*****************************************************/

.application-container .fixed-contact-button{

display:flex;

flex-direction:row;

align-items:center;

justify-content:center;

gap:10px;

padding-top:12px;

padding-bottom:12px;

padding-left:18px;

padding-right:18px;

border-radius:50px;

text-decoration:none;

color:#ffffff;

font-weight:600;

font-size:15px;

box-shadow:0 6px 18px rgba(0,0,0,0.20);

transition-property:transform;

transition-duration:0.2s;

transition-timing-function:ease;

}



.application-container .fixed-contact-button:hover{

transform:translateY(-2px);

box-shadow:0 10px 25px rgba(0,0,0,0.25);

}



/*****************************************************
TELEGRAM BUTTON
*****************************************************/

.application-container .telegram-button{

background-color:#0088cc;

}



/*****************************************************
WHATSAPP BUTTON
*****************************************************/

.application-container .whatsapp-button{

background-color:#25d366;

}



/*****************************************************
CONTACT TEXT
*****************************************************/

.application-container .contact-text{

color:#ffffff;

letter-spacing:0.4px;

}



/*****************************************************
SIGNIN BUTTON CONTAINER
*****************************************************/

.application-container .signin-button-container{

padding-top:15px;

padding-right:15px;

padding-bottom:15px;

padding-left:15px;

}



/*****************************************************
SIGNIN BUTTON
*****************************************************/

.application-container .signin-button{

display:flex;

flex-direction:row;

align-items:center;

justify-content:center;

gap:10px;

width:100%;

padding-top:14px;

padding-bottom:14px;

padding-left:20px;

padding-right:20px;

background-color:#ffffff;

color:#111827;

border-width:2px;

border-style:solid;

border-color:#f59e0b;

border-radius:14px;

font-size:16px;

font-weight:600;

text-decoration:none;

cursor:pointer;

box-shadow:0 6px 18px rgba(245,158,11,0.35);

transition-property:transform;

transition-duration:0.2s;

transition-timing-function:ease;

animation-name:signinPulse;

animation-duration:1.4s;

animation-iteration-count:infinite;

animation-timing-function:ease-in-out;

}



.application-container .signin-button i{

font-size:18px;

color:#f59e0b;

}



.application-container .signin-button:hover{

transform:scale(1.04);

box-shadow:0 10px 25px rgba(245,158,11,0.45);

}



/*****************************************************
SIGNIN ANIMATION
*****************************************************/

@keyframes signinPulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.06);

}

100%{

transform:scale(1);

}

}



/*****************************************************
WELCOME USER BOX
*****************************************************/

.application-container .welcome-user-box{

display:flex;

flex-direction:row;

align-items:center;

justify-content:center;

gap:10px;

width:100%;

padding-top:14px;

padding-bottom:14px;

padding-left:20px;

padding-right:20px;

background-color:#ffffff;

color:#16a34a;

border-width:2px;

border-style:solid;

border-color:#16a34a;

border-radius:14px;

font-size:16px;

font-weight:600;

box-shadow:0 6px 18px rgba(34,197,94,0.35);

}



.application-container .success-icon{

font-size:18px;

color:#16a34a;

}



/*****************************************************
PACKAGE LIST CONTAINER
*****************************************************/

.application-container .list-container{

padding-top:5px;

padding-bottom:20px;

background-color:#ffffff;

}



/*****************************************************
PACKAGE ITEM
*****************************************************/

.application-container .list-item{

display:flex;

flex-direction:row;

align-items:center;

justify-content:space-between;

padding-top:16px;

padding-bottom:16px;

padding-left:18px;

padding-right:18px;

border-bottom-width:1px;

border-bottom-style:solid;

border-bottom-color:#f1f5f9;

cursor:pointer;

transition-property:background;

transition-duration:0.2s;

transition-timing-function:ease;

}



.application-container .list-item:hover{

background-color:#f9fafb;

}



.application-container .list-item.active{

background-color:#f0fdf4;

border-color:#16a34a;

}



/*****************************************************
LEFT SIDE
*****************************************************/

.application-container .list-item-left{

display:flex;

flex-direction:row;

align-items:center;

gap:12px;

}



/*****************************************************
ICON
*****************************************************/

.application-container .list-item-icon{

font-size:20px;

color:#facc15;

}



/*****************************************************
COUNT TEXT
*****************************************************/

.application-container .list-item-count{

font-size:16px;

font-weight:600;

color:#111827;

}



/*****************************************************
PRICE BOX
*****************************************************/

.application-container .list-item-price{

background-color:#f3f4f6;

color:#111827;

padding-top:6px;

padding-bottom:6px;

padding-left:16px;

padding-right:16px;

border-radius:10px;

font-size:14px;

font-weight:600;

min-width:70px;

text-align:center;

}



/*****************************************************
RTL SUPPORT — SCOPED
*****************************************************/

html[dir="rtl"] .application-container .fixed-contact-container{

flex-direction:row-reverse;

}



html[dir="rtl"] .application-container .signin-button{

flex-direction:row-reverse;

}



html[dir="rtl"] .application-container .welcome-user-box{

flex-direction:row-reverse;

}



html[dir="rtl"] .application-container .list-item{

flex-direction:row-reverse;

}



html[dir="rtl"] .application-container .list-item-left{

flex-direction:row-reverse;

}
/**********************************************
OTHER PRODUCTS SECTION
**********************************************/

.other-products-section{

width:100%;

margin-top:30px;

margin-bottom:30px;

padding-left:15px;

padding-right:15px;

box-sizing:border-box;

}



/**********************************************
SECTION HEADER
**********************************************/

.section-header{

width:100%;

display:flex;

align-items:center;

margin-bottom:15px;

}



/**********************************************
SECTION LABEL CONTAINER
**********************************************/

.section-label{

display:inline-flex;

align-items:center;

background-color:#fff7ed;

border-width:1px;

border-style:solid;

border-color:#fed7aa;

border-radius:10px;

padding-top:6px;

padding-bottom:6px;

padding-left:12px;

padding-right:12px;

}



/**********************************************
SECTION LABEL ICON
**********************************************/

.section-label-icon{

display:flex;

align-items:center;

justify-content:center;

font-size:14px;

color:#ea580c;

margin-right:8px;

}



/**********************************************
RTL FIX
**********************************************/

html[dir="rtl"] .section-label-icon{

margin-right:0;

margin-left:8px;

}



/**********************************************
SECTION LABEL TEXT
**********************************************/

.section-label-text{

font-size:14px;

font-weight:600;

color:#9a3412;

}



/**********************************************
PRODUCT GRID
**********************************************/

.products-grid{

width:100%;

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

}



/**********************************************
PRODUCT CARD
**********************************************/

.product-card{

background-color:#ffffff;

border-width:1px;

border-style:solid;

border-color:#e5e7eb;

border-radius:14px;

padding-top:20px;

padding-bottom:18px;

padding-left:12px;

padding-right:12px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

transition:all 0.2s ease;

}



/**********************************************
DISABLED STATE
**********************************************/

.product-card.disabled{

opacity:0.6;

}



/**********************************************
PRODUCT IMAGE CONTAINER
**********************************************/

.product-image-container{

width:64px;

height:64px;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:10px;

}



/**********************************************
PRODUCT IMAGE
**********************************************/

.product-image{

width:64px;

height:64px;

object-fit:contain;

}



/**********************************************
PRODUCT INFO
**********************************************/

.product-info{

display:flex;

flex-direction:column;

align-items:center;

}



/**********************************************
PRODUCT NAME
**********************************************/

.product-name{

font-size:15px;

font-weight:600;

color:#111827;

margin-bottom:6px;

}

/**********************************************
FAQ SECTION
**********************************************/

.faq-section{

padding-left:15px;

padding-right:15px;

margin-top:30px;

}


.faq-list{

margin-top:10px;

}


.faq-item{

border-width:1px;

border-style:solid;

border-color:#e5e7eb;

border-radius:12px;

margin-bottom:10px;

overflow:hidden;

background-color:#ffffff;

}


.faq-question{

padding-top:14px;

padding-bottom:14px;

padding-left:15px;

padding-right:15px;

cursor:pointer;

font-weight:600;

display:flex;

align-items:center;

justify-content:space-between;

}


.faq-answer{

padding-top:14px;

padding-bottom:14px;

padding-left:15px;

padding-right:15px;

display:none;

color:#6b7280;

font-size:14px;

}


.faq-item.open .faq-answer{

display:block;

}


.faq-arrow{

font-size:12px;

transition:transform 0.3s;

}


.faq-item.open .faq-arrow{

transform:rotate(180deg);

}


/**********************************************
OFFICIAL
**********************************************/

.official-section{

padding:15px;

margin-top:30px;

}


.official-card{

display:flex;

align-items:center;

padding:12px;

border-width:1px;

border-style:solid;

border-color:#e5e7eb;

border-radius:14px;

background-color:#ffffff;

}


.official-avatar{

width:55px;

height:55px;

border-radius:50%;

margin-right:12px;

}


html[dir="rtl"] .official-avatar{

margin-right:0;

margin-left:12px;

}


/**********************************************
SOCIAL
**********************************************/

.social-section{

padding:15px;

margin-top:30px;

}


.social-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:10px;

}


.social-card{

display:flex;

align-items:center;

justify-content:center;

gap:10px;

padding-top:14px;

padding-bottom:14px;

border-radius:12px;

color:#ffffff;

font-weight:600;

text-decoration:none;

}


.whatsapp{

background-color:#25D366;

}


.telegram{

background-color:#0088cc;

}


.instagram{

background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);

}


.x{

background-color:#111827;

}


/**********************************************
OFFICIAL SECTION
**********************************************/

.official-section{

width:100%;

padding-top:20px;

padding-bottom:10px;

padding-left:20px;

padding-right:20px;

box-sizing:border-box;

}



/**********************************************
HEADER
**********************************************/

.official-header{

margin-bottom:14px;

}



/**********************************************
HEADER BADGE
**********************************************/

.official-header-badge{

display:inline-flex;

align-items:center;

gap:8px;

background-color:#fff7ed;

border-width:1px;

border-style:solid;

border-color:#fdba74;

padding-top:6px;

padding-bottom:6px;

padding-left:12px;

padding-right:12px;

border-radius:999px;

}



/**********************************************
HEADER ICON
**********************************************/

.official-header-icon{

font-size:14px;

color:#ea580c;

}



/**********************************************
HEADER TEXT
**********************************************/

.official-header-text{

font-size:14px;

font-weight:600;

color:#9a3412;

}



/**********************************************
CARD LINK
**********************************************/

.official-card-link{

display:block;

text-decoration:none;

color:inherit;

}



/**********************************************
CARD
**********************************************/

.official-card{

display:flex;

align-items:center;

gap:14px;

background-color:#ffffff;

border-width:1px;

border-style:solid;

border-color:#e5e7eb;

padding-top:14px;

padding-bottom:14px;

padding-left:14px;

padding-right:14px;

border-radius:14px;

transition-property:transform, box-shadow;

transition-duration:0.20s;

transition-timing-function:ease;

}



/**********************************************
CARD HOVER
**********************************************/

.official-card:hover{

transform:translateY(-2px);

box-shadow:0 10px 25px rgba(0,0,0,0.08);

}



/**********************************************
AVATAR
**********************************************/

.official-avatar{

width:55px;

height:55px;

border-radius:50%;

object-fit:cover;

border-width:2px;

border-style:solid;

border-color:#fed7aa;

}



/**********************************************
INFO
**********************************************/

.official-info{

flex-grow:1;

}



/**********************************************
NAME
**********************************************/

.official-name{

font-size:15px;

font-weight:700;

color:#111827;

margin-bottom:3px;

}



/**********************************************
ID
**********************************************/

.official-id{

font-size:13px;

color:#6b7280;

}



/**********************************************
FOLLOW BUTTON
**********************************************/

.official-follow{

background-color:#ea580c;

color:#ffffff;

padding-top:6px;

padding-bottom:6px;

padding-left:14px;

padding-right:14px;

border-radius:999px;

font-size:13px;

font-weight:600;

}



/**********************************************
RTL SUPPORT
**********************************************/

html[dir="rtl"] .official-card{

flex-direction:row-reverse;

}

html[dir="rtl"] .official-header-badge{

flex-direction:row-reverse;

}



/**********************************************
COMING SOON BADGE
**********************************************/

.coming-soon-badge{

font-size:12px;

font-weight:500;

background-color:#f3f4f6;

color:#6b7280;

border-radius:999px;

padding-top:4px;

padding-bottom:4px;

padding-left:10px;

padding-right:10px;

}



/**************************************
SECTION HEADER CONTAINER
**************************************/
.section-header{

    width:100%;

    display:flex;

    justify-content:center;

    margin-top:32px;

    margin-bottom:18px;

}

/**************************************
SECTION LABEL FULL WIDTH
**************************************/
.section-label{

    width:calc(100% - 40px);   /* فراغ 20px يمين و يسار */

    max-width:390px;           /* مناسب لتصميم الهاتف */

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    background:#ffffff;

    border:1px solid #d1d5db;

    border-radius:12px;

    box-shadow:0 3px 8px rgba(0,0,0,0.06);

}

/**************************************
ICON
**************************************/
.section-label-icon{

    font-size:15px;

    color:#374151;

}

/**************************************
TEXT
**************************************/
.section-label-text{

    font-size:15px;

    font-weight:600;

    color:#111827;

}

.section-label{

box-shadow:

0 10px 28px rgba(249,115,22,0.25),

0 4px 10px rgba(249,115,22,0.15);

}
/**************************************
OFFICIAL BIGO SPECIAL STYLE
**************************************/
.official-bigo-label{

    border-color:#f97316;

}


.official-bigo-label .section-label-icon{

    color:#f97316;

}