/*========================================
  الخطابة وفاء الليبية
  Main Stylesheet
========================================*/

/* ========= Google Font ========= */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800&display=swap');

/* ========= Reset ========= */

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Cairo',sans-serif;
direction:rtl;
background:#fff8fb;
color:#333;
line-height:1.8;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;
color:inherit;

}

ul{

list-style:none;

}

button,
input,
select,
textarea{

font-family:'Cairo',sans-serif;

}

/* ========= Variables ========= */

:root{

--primary:#d63384;
--primary-dark:#bb216d;
--secondary:#fce7f1;
--border:#ececec;
--text:#333;
--text-light:#777;
--white:#ffffff;
--shadow:0 15px 40px rgba(0,0,0,.08);
--radius:18px;

}

/* ========= Container ========= */

.container{

width:min(1180px,92%);
margin:auto;

}

/*========================================
  Header
========================================*/

header{

background:#fff;
box-shadow:0 2px 18px rgba(0,0,0,.05);
position:sticky;
top:0;
z-index:999;

}

.navbar{

height:78px;
display:flex;
align-items:center;
justify-content:space-between;

}

.logo{

display:flex;
align-items:center;
gap:12px;
font-size:24px;
font-weight:800;
color:var(--primary);

}

.logo img{

width:52px;
height:52px;
object-fit:cover;
border-radius:50%;

}

/*========================================
  Header
========================================*/

.header{
    background:#fff;
    box-shadow:0 2px 18px rgba(0,0,0,.05);
    position:sticky;
    top:0;
    z-index:999;
}

.header .container{
    height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:24px;
    font-weight:800;
    color:var(--primary);
}

nav ul{
    display:flex;
    align-items:center;
    gap:28px;
}

nav ul li{
    list-style:none;
}

nav ul li a{
    color:#555;
    font-weight:700;
    transition:.3s;
}

nav ul li a:hover{
    color:var(--primary);
}

/*========================================
  Buttons
========================================*/

.btn{

display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 28px;
border:none;
border-radius:14px;
background:var(--primary);
color:#fff;
font-size:16px;
font-weight:700;
cursor:pointer;
transition:.3s;
box-shadow:0 10px 25px rgba(214,51,132,.25);

}

.btn:hover{

background:var(--primary-dark);
transform:translateY(-2px);

}

.btn-secondary{

background:#fff;
color:var(--primary);
border:2px solid var(--primary);
box-shadow:none;

}

.btn-secondary:hover{

background:var(--secondary);

}

/*========================================
  Cards
========================================*/

.card{

background:#fff;
border-radius:20px;
padding:30px;
box-shadow:var(--shadow);

}

.section-title{

font-size:34px;
font-weight:800;
text-align:center;
margin-bottom:15px;
color:#222;

}

.section-desc{

text-align:center;
color:var(--text-light);
margin-bottom:35px;

}

/*========================================
  Forms
========================================*/

form{
width:100%;
}

.form-group{
display:flex;
flex-direction:column;
margin-bottom:22px;
}

.form-group label{

font-size:15px;
font-weight:700;
color:#444;
margin-bottom:8px;

}

.form-group input,
.form-group select,
.form-group textarea{

width:100%;
padding:15px 18px;
font-size:15px;
border:1px solid var(--border);
border-radius:14px;
background:#fff;
transition:.25s;

}

.form-group textarea{

resize:vertical;
min-height:140px;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

outline:none;
border-color:var(--primary);
box-shadow:0 0 0 4px rgba(214,51,132,.12);

}

.form-grid{

display:grid;
grid-template-columns:1fr 2fr;
gap:20px;

}

.form-grid .full{

grid-column:1/-1;

}

.error-box{

background:#fff0f0;
border:1px solid #ffcaca;
color:#b00020;
padding:16px;
border-radius:14px;
margin-bottom:25px;

}

.error-box p{

margin:5px 0;

}

.terms-box{

background:#fff;
border:1px solid var(--border);
padding:18px;
border-radius:14px;
margin-top:15px;
margin-bottom:25px;

}

.terms-label{

display:flex;
gap:10px;
align-items:flex-start;
cursor:pointer;

}

.terms-label input{

margin-top:6px;

}

/*========================================
  Sections
========================================*/

section{

padding:70px 0;

}

.register-section,
.review-section,
.package-section,
.payment-section,
.success-section{

min-height:calc(100vh - 78px);

}

/*========================================
  Panels
========================================*/

.register-card,
.review-card,
.payment-card,
.success-card,
.package-card{

background:#fff;
border-radius:22px;
padding:35px;
box-shadow:0 15px 45px rgba(0,0,0,.08);

}

.register-header{

text-align:center;
margin-bottom:35px;

}

.register-badge{

display:inline-block;
padding:8px 18px;
background:#ffe7f1;
color:var(--primary);
font-size:14px;
font-weight:700;
border-radius:30px;
margin-bottom:15px;

}

.register-desc{

color:#777;
font-size:15px;
margin-top:10px;

}

/*========================================
  Review
========================================*/

.review-item{

display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
border-bottom:1px solid #f0f0f0;

}

.review-item:last-child{

border-bottom:none;

}

.review-item span{

font-weight:700;
color:#666;

}

.review-item strong{

color:#222;

}

.review-text{

display:block;

}

.review-text p{

margin-top:12px;
line-height:2;
color:#555;

}

.review-actions{

display:flex;
justify-content:space-between;
align-items:center;
margin-top:35px;
gap:20px;

}

.review-actions form{

margin:0;

}

/*========================================
  Hero
========================================*/

.hero{
    min-height:calc(100vh - 78px);
    display:flex;
    align-items:center;
    padding:25px 0 60px;
    overflow:hidden;
}

.hero-content{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:70px;
}

.hero-text{
    max-width:620px;
}

.hero-text h1{
    font-size:46px;
    line-height:1.35;
    margin-bottom:8px;
    font-weight:800;
    color:var(--primary);
}

.hero-features{
    display:inline-block;
    color:#b58a3a;
    font-size:16px;
    font-weight:700;
    margin-bottom:18px;
}

.hero-text p{
    max-width:590px;
    font-size:18px;
    color:#666;
    line-height:2;
    margin-bottom:30px;
}

.hero-buttons{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

.hero-image{
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-image img{
    width:100%;
    max-width:540px;
    max-height:520px;
    object-fit:cover;
    border-radius:28px;
    box-shadow:0 22px 55px rgba(0,0,0,.13);
}

/* Hero - Mobile */

@media(max-width:900px){

    .hero{
        min-height:auto;
        padding:45px 0 55px;
    }

    .hero-content{
        grid-template-columns:1fr;
        gap:40px;
        text-align:center;
    }

    .hero-text{
        max-width:100%;
    }

    .hero-text h1{
        font-size:36px;
    }

    .hero-text p{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-image img{
        max-width:520px;
    }
}

@media(max-width:520px){

    .hero-text h1{
        font-size:30px;
    }

    .hero-text p{
        font-size:16px;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .hero-buttons .btn{
        width:100%;
    }

}

/*========================================
  Packages
========================================*/

.packages-grid{

display:grid;
grid-template-columns:repeat(2,380px);
justify-content:center;
gap:20px;

}

.package-card{

background:#fff;
border-radius:24px;
padding:35px;
box-shadow:0 15px 45px rgba(0,0,0,.08);
transition:.3s;

}

.package-card:hover{

transform:translateY(-8px);

}

.package-header{

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;

}

.package-header h2{

font-size:28px;
color:#222;

}

.package-badge{

background:var(--primary);
color:#fff;
padding:8px 16px;
border-radius:30px;
font-size:14px;
font-weight:700;

}

.package-features{

margin:25px 0;
padding:0;
list-style:none;

}

.package-features li{

padding:12px 0;
border-bottom:1px solid #f3f3f3;
color:#555;

}

.package-features li:last-child{

border-bottom:none;

}

.package-card .btn{

width:100%;
margin-top:20px;

}

@media(max-width:900px){

.packages-grid{

grid-template-columns:1fr;

}

}

/*========================================
  Review
========================================*/

.card-header{

margin-bottom:30px;
padding-bottom:20px;
border-bottom:1px solid #eee;

}

.card-header h3{

font-size:28px;
margin-bottom:10px;
color:#222;

}

.card-header p{

color:#777;
line-height:1.8;

}

.review-item{

gap:20px;

}

.review-item strong{

font-size:16px;
text-align:left;
max-width:55%;

}

.review-actions{

padding-top:30px;
border-top:1px solid #eee;

}

.review-actions .btn{

min-width:220px;

}

@media(max-width:768px){

.review-item{

flex-direction:column;
align-items:flex-start;

}

.review-item strong{

max-width:100%;

}

.review-actions{

flex-direction:column;

}

.review-actions .btn,
.review-actions form,
.review-actions form .btn{

width:100%;

}

}

.full-width{

display:block;

}

.review-text p{

margin-top:15px;
background:#fafafa;
padding:18px;
border-radius:14px;
border:1px solid #eee;

}

/*========================================
  Payment
========================================*/

.payment-summary{

background:#fff;
padding:30px;
border-radius:22px;
box-shadow:0 15px 45px rgba(0,0,0,.08);
margin-bottom:30px;

}

.payment-summary h3{

margin-bottom:20px;
font-size:24px;

}

.summary-item{

display:flex;
justify-content:space-between;
align-items:center;
padding:15px 0;
border-bottom:1px solid #eee;

}

.summary-item:last-child{

border-bottom:none;

}

.payment-methods{

background:#fff;
padding:30px;
border-radius:22px;
box-shadow:0 15px 45px rgba(0,0,0,.08);
margin-bottom:30px;

}

.payment-methods h3{

margin-bottom:20px;

}

.payment-card{

display:block;
padding:18px;
border:2px solid #eee;
border-radius:16px;
cursor:pointer;
margin-bottom:15px;
transition:.3s;

}

.payment-card:hover{

border-color:var(--primary);

}

.payment-card input{

margin-left:10px;

}

.payment-card-info{

background:#fff;
padding:30px;
border-radius:22px;
box-shadow:0 15px 45px rgba(0,0,0,.08);

}

.card-item{

padding:20px;
border:1px solid #eee;
border-radius:16px;
margin-bottom:20px;

}

.card-placeholder{

padding:50px;
text-align:center;
color:#777;

}

.lock-icon{

font-size:46px;
margin-bottom:15px;

}

#addCardBtn{

margin-top:20px;

}

.payment-section button[type="submit"]{

width:100%;
height:58px;
font-size:18px;
margin-top:25px;

}

@media(max-width:768px){

.summary-item{

flex-direction:column;
align-items:flex-start;
gap:8px;

}

.payment-methods,
.payment-summary,
.payment-card-info{

padding:22px;

}

}

/*========================================
  Success
========================================*/

.success-card{

max-width:720px;
margin:auto;
text-align:center;

}

.success-icon{

font-size:90px;
margin-bottom:25px;

}

.success-text{

font-size:18px;
line-height:2;
color:#666;
margin:30px 0;

}

.success-card .btn{

min-width:240px;

}

.success-message{
    background:#d4edda;
    color:#155724;
    border:1px solid #c3e6cb;
    padding:15px;
    margin:20px 0;
    border-radius:10px;
    text-align:center;
    font-weight:bold;
}

/* ===========================
   Contact Page
=========================== */

.contact-section{
    padding:80px 0;
    background:#fff8fb;
}

.contact-section .section-title{
    text-align:center;
    margin-bottom:50px;
}

.contact-section .section-title h1{
    font-size:48px;
    color:#d63384;
    margin-bottom:15px;
}

.contact-section .section-title p{
    max-width:750px;
    margin:auto;
    font-size:22px;
    line-height:1.9;
    color:#555;
}

.contact-wrapper{
    display:grid;
    grid-template-columns: 340px minmax(0,1fr);
    gap:35px;
    align-items:start;
}

.contact-info{
    width:100%;
}

.contact-form{
    width:100%;
}

.contact-form form{
    width:100%;
}

.contact-info{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.contact-card{
    background:#fff;
    border-radius:20px;
    padding:35px 30px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    text-align:center;
    border:1px solid #f4d8e6;
}

.contact-card i{
    font-size:48px;
    color:#1877f2;
    margin-bottom:20px;
}

.contact-card h3{
    color:#d63384;
    font-size:28px;
    margin-bottom:15px;
}

.contact-card p{
    font-size:18px;
    color:#666;
    line-height:1.8;
    margin-bottom:25px;
}

.contact-card .btn{
    width:100%;
}

.contact-form{
    background:#fff;
    border-radius:20px;
    padding:35px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    border:1px solid #f4d8e6;
}

.contact-form .btn{
    width:100%;
    margin-top:10px;
}

.privacy-box{
    background:#fff;
    border-radius:15px;
    padding:18px;
    text-align:center;
    border:1px solid #f4d8e6;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
    color:#555;
}

.logo .site-logo{
    width:46px;
    height:46px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
    align-self:flex-start;
    margin-top:-5px;
}