/* Box */
.box {
  background: #FBFBFB;
  border-radius: clamp(12px, 3vw, 18px);
  padding: clamp(16px, 3vw, 24px);
  border:1px solid #D9D9D9;
}

/* Titles */
.box-title {
  color:#FF5E00;
  font-weight: 700;
  margin-bottom: clamp(18px, 2vw, 24px);
}

/* Summary */
.summary-item,
.summary-total {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: clamp(14px, 3vw, 18px);
}

.summary-total {
  font-weight: 700;
  color:#FF5E00;
}

/* Payment */
.payment-option {
  border: 1px solid #D9D9D9;
  border-radius: clamp(10px, 2vw, 14px);
  padding: clamp(12px, 2vw, 16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.payment-option img {
  height: clamp(20px, 3vw, 30px);
}

.payment-option:hover,
.payment-option.active {
  border-color:#FF5E00;
  background: #fff7f1;
}

/* Confirm */
.confirm-text {
  font-size: clamp(13px, 2vw, 15px);
  color: #666;
}

.confirm-text a {
  color:#FF5E00;
  text-decoration: none;
}

.btn-confirm {
  width: 100%;
  background:#FF5E00;
  color: #fff;
  border: none;
  padding: clamp(12px, 2vw, 16px);
  border-radius: clamp(10px, 2vw, 14px);
  font-size: clamp(15px, 2vw, 17px);
  font-weight: 600;
  transition: transform .3s ease, box-shadow .3s ease;
}

.btn-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(255,106,0,0.3);
}

/* Animations */
.animate-fade {
  animation: fadeIn 0.8s ease forwards;
}

.animate-slide {
  animation: slideUp 0.8s ease forwards;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.payment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

/* radio button */
.payment-option input[type="radio"] {
  accent-color: #FF5E00;
  width: clamp(16px, 2vw, 18px);
  height: clamp(16px, 2vw, 18px);
  cursor: pointer;
}

/* icons container */
.payment-option .icons {
  display: flex;
  gap: 8px;
  margin-inline-start: auto;
}

/* hover + active */
.payment-option:hover,
.payment-option:has(input:checked) {
  border-color: #FF5E00;
  background: #fff7f1;
}
.payment-option {
  cursor: pointer;
  transition: all 0.3s ease;
}

.payment-option input[type="radio"] {
  pointer-events: none;
}
/* ===== Global ===== */
.ws-hero,
.ws-features {
  direction: rtl;
  font-family: "Tajawal", sans-serif;
}

/* ===== Hero ===== */
.ws-hero {
  padding: clamp(20px, 6vw, 40px) 0;
}

.ws-hero-title {
  font-size: clamp(26px, 6vw, 48px);
  font-weight: 700;
  line-height: 1.4;
}

.ws-hero-title span {
  color: #FF5E00;
}

.ws-hero-desc {
  font-size: clamp(18px, 5vw, 24px);
  margin: 20px 0;
}

.ws-hero-btn {
  background: #FF5E00;
  color: #fff;
  border: none;
  padding: clamp(10px, 2vw, 16px) clamp(22px, 4vw, 60px);
  border-radius: 10px;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 24px);
  transition: all .3s ease;
}

.ws-hero-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(255,106,0,.35);
}

/* ===== Images ===== */
.ws-hero-img {
  max-width: 100%;
  animation: ws-float 4s ease-in-out infinite;
}

.ws-feature-img {
  width: 100%;
  height:455px;
  border-radius: clamp(14px, 3vw, 22px);
}

/* ===== Features ===== */
.ws-features {
  padding: clamp(20px, 7vw, 40px) 0;
}

.ws-section-title {
  font-size: clamp(35px, 3vw, 40px);
  font-weight: 700;
  margin-bottom: 25px;
}

.ws-feature-item {
  margin-bottom: 20px;
}

.ws-feature-item h5 {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
}

.ws-feature-item p {
  font-size: clamp(13px, 2vw, 16px);
}

/* ===== Animations ===== */
.ws-animate-slide {
  animation: ws-slide-in .9s ease forwards;
}

.ws-animate-fade {
  animation: ws-fade-in 1s ease forwards;
}

@keyframes ws-slide-in {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ws-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ws-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.ws-carousel-indicators {
  position: relative;
  margin-top: 20px;
  justify-content:right;
  gap: 6px;
  margin-right: 0!important;
    padding-right: 0!important;

}

.ws-carousel-indicators [data-bs-target] {
  width: clamp(30px, 5vw, 40px);
  height: 5px;
  background-color: #ddd;
  border: none;
  opacity: 1;
  border-radius: 2px;
}

.ws-carousel-indicators .active {
  background-color: #000;
}
.hf{
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 700;
  color: #FF5E00;

}  
.solar--arrow-right-outline {
  display: inline-block;
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF5E00' fill-rule='evenodd' d='M13.47 5.47a.75.75 0 0 1 1.06 0l6 6a.75.75 0 0 1 0 1.06l-6 6a.75.75 0 1 1-1.06-1.06l4.72-4.72H4a.75.75 0 0 1 0-1.5h14.19l-4.72-4.72a.75.75 0 0 1 0-1.06' clip-rule='evenodd'/%3E%3C/svg%3E");
}


/* sidebar container */
.profile-side{
    border:1px solid #D9D9D9;
}

/* tab buttons */
.profile-tab{
    background:#f6f6f6;
    font-size:clamp(14px,2vw,18px);
    padding:clamp(8px,1vw,12px);
    border-radius:10px;
    transition:0.3s;
}

.profile-tab.active{
    background:#FF5E00;
    color:#fff;
}

/* form container */
.profile-form{
    background:#fff;
    border:1px solid #D9D9D9;
}

.profile-title{
    color:#FF5E00;
    font-size:clamp(20px,2.3vw,32px);
    font-weight:600
}

/* input style */
.profile-input{
    padding:clamp(10px,1vw,14px);
    font-size:clamp(16px,2vw,18px);
}

/* save button */
.profile-save-btn{
    background:#FF5E00;
    color:#fff;
    padding:clamp(10px,1vw,14px);
    font-size:clamp(16px,1.8vw,20px);
    border-radius:10px;
    transition:0.3s;
    border:none;
        transition:0.3s;

}

.profile-save-btn:hover{
    opacity:.8;
}

/* ========== ANIMATIONS ========== */

.anim-fade{
    animation:fadeIn .6s ease;
}

.anim-slide{
    animation: slideUp .7s ease;
}

@keyframes fadeIn{
    from{opacity:0;}
    to{opacity:1;}
}

@keyframes slideUp{
    from{
        opacity:0;
        transform:translateY(25px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* responsive */
@media(max-width:768px){
    .profile-save-btn{
        width:100% !important;
    }
}

.required-star {
            color: #ff6b35;
        }
        .profile-tab {
    display: grid !important;
    grid-template-columns: 30px 1fr; /* الأيقونة 30px والباقي للكلام */
    gap: 10px;
    align-items: center;
    font-weight: 700;
    font-size: 16px;
}




.mdi--text-account {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 5v2H3V5zM3 17h9v-2H3zm0-5h18v-2H3zm15 2a2 2 0 1 1 0 4c-1.11 0-2-.89-2-2s.9-2 2-2m-4 8v-1c0-1.1 1.79-2 4-2s4 .9 4 2v1z'/%3E%3C/svg%3E");
}
.mdi--security-lock-outline {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 11c0 5.55-3.84 10.74-9 12c-5.16-1.26-9-6.45-9-12V5l9-4l9 4zm-9 10c3.75-1 7-5.46 7-9.78V6.3l-7-3.12L5 6.3v4.92C5 15.54 8.25 20 12 21m2.8-10V9.5C14.8 8.1 13.4 7 12 7S9.2 8.1 9.2 9.5V11c-.6 0-1.2.6-1.2 1.2v3.5c0 .7.6 1.3 1.2 1.3h5.5c.7 0 1.3-.6 1.3-1.2v-3.5c0-.7-.6-1.3-1.2-1.3m-1.3 0h-3V9.5c0-.8.7-1.3 1.5-1.3s1.5.5 1.5 1.3z'/%3E%3C/svg%3E");
}
.material-symbols--delete-outline {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zM17 6H7v13h10zM9 17h2V8H9zm4 0h2V8h-2zM7 6v13z'/%3E%3C/svg%3E");
}

.profile-tab.active .mdi--text-account {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M21 5v2H3V5zM3 17h9v-2H3zm0-5h18v-2H3zm15 2a2 2 0 1 1 0 4c-1.11 0-2-.89-2-2s.9-2 2-2m-4 8v-1c0-1.1 1.79-2 4-2s4 .9 4 2v1z'/%3E%3C/svg%3E");
}

.profile-tab.active .mdi--security-lock-outline {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M21 11c0 5.55-3.84 10.74-9 12c-5.16-1.26-9-6.45-9-12V5l9-4l9 4zm-9 10c3.75-1 7-5.46 7-9.78V6.3l-7-3.12L5 6.3v4.92C5 15.54 8.25 20 12 21m2.8-10V9.5C14.8 8.1 13.4 7 12 7S9.2 8.1 9.2 9.5V11c-.6 0-1.2.6-1.2 1.2v3.5c0 .7.6 1.3 1.2 1.3h5.5c.7 0 .7-.6 1.3-1.2v-3.5c0-.7-.6-1.3-1.2-1.3'/%3E%3C/svg%3E");
}

.profile-tab.active .material-symbols--delete-outline {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zM17 6H7v13h10zM9 17h2V8H9zm4 0h2V8h-2z'/%3E%3C/svg%3E");
}
.orders-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.orders-page-title {
    font-size: clamp(24px, 2.5vw, 32px);
    font-weight: 600;
    color: #FF5E00;
}
.orders-cust{
 border:1px solid #D9D9D9;
    border-radius: 20px;
    padding:30px 20px; 
}
.order-item {
   border:1px solid #D9D9D9;
    border-radius: 20px;
    padding: clamp(14px, 2.5vw, 18px);
    margin-bottom: 16px;
    position: relative;
}

.order-name {
    font-size: clamp(14px, 2.5vw, 16px);
    font-weight: 700;
}


.order-client {
    font-size: clamp(12px, 2vw, 14px);
            font-weight: 500;

}

/* Status */
.order-status {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 4px 18px;
    border-radius: 20px;
    font-size: clamp(11px, 2vw, 12px);
    font-weight: 600;
}

.status-done {
    background: #C9F8C9;
    color: #026F06;
}

.status-canceled {
    background: #F8C9C9;
    color: #FF3D00;
}

/* Details */
.order-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.order-details span {
    font-size: clamp(12px, 2vw, 14px);
    color:#FF5E00
}

.order-details strong {
    font-size: clamp(12px, 2.2vw, 13px);
    color:black
}


.mdi--user-outline-org {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF5E00' d='M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 2a2 2 0 0 0-2 2a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2m0 7c2.67 0 8 1.33 8 4v3H4v-3c0-2.67 5.33-4 8-4m0 1.9c-2.97 0-6.1 1.46-6.1 2.1v1.1h12.2V17c0-.64-3.13-2.1-6.1-2.1'/%3E%3C/svg%3E");
}