/* all */
:root{
  --primary:          #F4991A;

  --background-light: #F9F5F0;
  --background-dark:  #344F1F;

  --content-light:    #344F1F;
  --content-dark:     #F2EAD3;

  --subtle-light:     #F2EAD3;
  --subtle-dark:      #4A6F33;

  --lighter-content-dark: rgb(52 79 31 / 0.8);
  --light-subtle-dark: ;
}
*{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-family:  "Tajawal", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body{
  padding: 0px;
  margin: 0px;
}
.container{
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .container { width: 750px; }
  .container-content { width: 750px; }
}
@media (min-width: 992px) {
  .container { width: 970px; }
  .container-content { width: 970px; }
}
@media (min-width: 1200px) {
  .container { width: 1170px; }
  .container-content { width: 1170px; }
}
/* finish all */

/* start public style */
/* Flex box styles */
.flex{ display: flex; }
.flex-direction-c{ flex-direction: column; }
.flex-ac-center{ align-content: center; }
.flex-ai-center{ align-items: center; }
.flex-jc-center{ justify-content: center; }
.flex-jc-space-btw{ justify-content: space-between; }
.flex-warp{ flex-wrap: wrap;}
.flex-grow-1{ flex-grow: 1; }
/* Texts & Fonts & directions */
.dir-rtl{ direction: rtl; } .dir-ltr{direction: ltr;}
.text-right{ text-align: right; }
.letter-spacing-2{ letter-spacing: 2px;}

/* Sizes */
/* padding & margin */
.p-0{ padding: 0;} .p-025{ padding: 0.25rem;} .p-15{ padding: 1.5rem; }
.p-1{ padding: 1rem; } .p-2{ padding: 2rem; } .p-3{ padding: 3rem; } .p-4{ padding: 4rem; }
.p-5{ padding: 5rem; } .p-6{ padding: 6rem; } .p-7{ padding: 7rem; } .p-8{ padding: 8rem; }
.m-0{ margin: 0;} .mb-05{ margin-bottom: .5rem; }
.m-1{ margin: 1rem; } .m-2{ margin: 2rem; } .m-3{ margin: 3rem; } .m-4{ margin: 4rem; }
.mb-1{ margin-bottom: 1rem; } .mb-2{ margin-bottom: 2rem; } .mb-3{ margin-bottom: 3rem; } .mb-4{ margin-bottom: 4rem; }
.mt-1{ margin-top: 1rem; } .mt-2{ margin-top: 2rem; } .mt-3{ margin-top: 3rem; } .mt-4{ margin-top: 4rem; }
.ml-1{ margin-left: 1rem; } .ml-2{ margin-left: 2rem; } .ml-3{ margin-left: 3rem; } .ml-4{ margin-left: 4rem; }
.mr-1{ margin-right: 1rem; } .mr-2{ margin-right: 2rem; } .mr-3{ margin-right: 3rem; } .mr-4{ margin-right: 4rem; }
.m-5{ margin: 5rem; } .m-6{ margin: 6rem; } .m-7{ margin: 7rem; } .m-8{ margin: 8rem; }
/* width & hight */
.w-1{ width: 1rem; } .w-2{ width: 2rem; } .w-3{ width: 3rem; } .w-4{ width: 4rem; }
.w-5{ width: 5rem; } .w-6{ width: 6rem; } .w-7{ width: 7rem; } .w-8{ width: 8rem; }
.w-16{ width: 16rem;} .w-25{ width: 25rem;}
.w-full{ width: 100%; }
.h-1{ height: 1rem;} .h-2{ height: 2rem;} .h-3{ height: 3rem;} .h-4{ height: 4rem;}
.h-5{ height: 5rem;} .h-6{ height: 6rem;} .h-7{ height: 7rem;} .h-8{ height: 8rem;}
.h-25{ height: 25rem; } .min-h-fullScreen{min-height: 100vh;}

/* Gap */
.gap-1{ gap: 1rem;} .gap-2{ gap: 2rem; } .gap-3{ gap: 3rem; } .gap-4{ gap: 4rem; }
.gap-5{ gap: 5rem;} .gap-6{ gap: 6rem; } .gap-7{ gap: 7rem; } .gap-8{ gap: 8rem; }
/* Font Size */
.f-025{ font-size: .25rem;} .f-05{font-size: .5rem;} .f-075{font-size: .75rem;}  
.f-125{ font-size: 1.25rem;} .f-15{font-size: 1.5rem;} .f-175{font-size: 1.75rem;}  
.f-1{ font-size: 1rem;} .f-2{font-size: 2rem;} .f-3{ font-size: 3rem;} .f-4{font-size: 4rem;}
.f-5{ font-size: 5rem;} .f-6{font-size: 6rem;} .f-7{ font-size: 7rem;} .f-8{font-size: 8rem;}
/* border-radius */
.rounded-025{ border-radius: .25rem;} .rounded-05{ border-radius: .5rem;} .rounded-075{ border-radius: .75rem;}
.rounded-1{ border-radius: 1rem;} .rounded-2{ border-radius: 2rem;} .rounded-3{ border-radius: 3rem;} .rounded-4{ border-radius: 4rem;}
.rounded-5{ border-radius: 5rem;} .rounded-6{ border-radius: 6rem;} .rounded-7{ border-radius: 7rem;} .rounded-8{ border-radius: 8rem;}
.rounded-full{ border-radius: 25rem;}

/* Colors */
.color-content-light{ color: var(--content-light); } 
.color-content-dark{  color: var(--content-dark); }
.color-lighter-content-dark{  color: var(--lighter-content-dark); }
.color-primary{ color: var(--primary); }
.color-green{ color: rgb(76, 175, 80);}
.bg-lighter-content-dark{  background-color: var(--lighter-content-dark); }
.bg-background-light{ background-color: var(--background-light); } 
.bg-background-dark{ background-color: var(--background-dark); }
.bg-subtle-light{ background-color: var(--subtle-light); }
.bg-primary{ background-color: var(--primary); }
.bg-red{ background-color: rgb(239 68 68 / 0.8); }
.border-subtle-light-1 { border: 1px solid var(--subtle-light); }
.border-subtle-dark-1 { border: 1px solid var(--subtle-dark); }

/* transitions & hover */
.transitions-1{ transition: all .3s; }
.hover-transitions{ transition: all .3s; }
.hover-primary:hover{ color: var(--primary); }
.hover-red:hover { color: rgb(239 68 68 / 0.8);}
.hover-bg-primary:hover{ background-color: var(--primary); }
.hover-bg-primary-light:hover{ background-color: rgb(244 153 26 / 0.2); }
.hover-content-dark:hover{ color: var(--content-dark); }

/* Others Styling */
.relative{ position: relative;}
.absolute{ position: absolute;}
.overflow-hidden{ overflow: hidden;}
.overflow-x-auto{ overflow-x: auto; }
.overflow-y-auto{ overflow-y: auto; }
.bold{ font-weight: bold; }
.text-center{ text-align: center; }
.cursor-pointer{ cursor: pointer; }

/* Components */
.btn{
  height: 2.5rem;
  padding: 0rem 1.5rem;
  outline: none;
  border: none;
  cursor: pointer;
}
.btn:hover{
  filter: brightness(1.1);
}
a{
  text-decoration: none;
  color: inherit; 
}
h1, h2, h3{ font-family: "Changa", "Tajawal", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }
.ul-none{ list-style: none; list-style-position: none; }
section.margin{ margin: 4rem 8rem; }
section.margin-x{ margin: 4rem auto; }
input::placeholder{
  direction: rtl;
  text-align: right;
}
/* Toggle */
.toggle {
  -webkit-appearance: none;
  appearance: none;
  width: 60px;
  height: 30px;
  border-radius: 30px;
  background: #ccc;
  outline: none;
  cursor: pointer;
  position: relative;
  transition: background 0.3s ease;
}
/* Notification */
.notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  min-width: 250px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 9999;
}
.notification.show {
  opacity: 1;
  transform: translateY(0);
}
.success { background: rgb(76, 175, 80); }
.error { background: rgb(239 68 68 / 0.8); }
/* Popup */
.popup {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 999;
}
.popup.active { display: flex; }
.popup-content {
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  width: 350px;
  text-align: center;
  position: relative;
  animation: fadeIn 0.3s ease-in-out;
}
.popup-content img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}
@keyframes fadeIn {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.close {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: #e74c3c;
}


/* شكل الدائرة (thumb) */
.toggle::-webkit-slider-thumb {
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #999;
  z-index: 2;
}


/* Landing Page Style */
.img-slider{
  background-size: cover;
  background-position: center;
  width: 20rem;
  height: 24rem;
  flex-shrink: 0;
}
.img-slider-container{ transform: translateX(20rem); }
.prev, .next{
  z-index: 100;
  top: 50%;
  transform: translateY(-50%);
}
.next{ right: .5rem; }
.prev{ left: .5rem; }
header.border{
  border-width: 0px 0px 1px;
  border-color: transparent transparent #4a6f3338;
  border-style: solid;
}

/* Events */
.event-box{
  width: 20rem;
  flex-shrink: 0;
  max-width: 600px;
  min-width: 260px;
}
.event-box:hover{
  transform: translateY(-10px);
}
.event-box img{
  object-fit: cover;
  height: 14rem;
}
.event-box .budget{
  top: 1rem;
  left: 1rem;
}

.ticket-bg{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* Dashboard - Admin */
/* الرئيسية */
.logout-btn{
  color: rgb(239 68 68 / 0.8);
}
.logout-btn:hover{
  background-color: rgba(239, 68, 68, 0.25);
}
/* settings */
.color-radio {
  box-shadow: 0 0 0 2px transparent;
}

.peer:checked ~ .color-radio {
  box-shadow: 0 0 0 2px var(--background-light), 0 0 0 4px var(--subtle-dark);
}

/* Media */
@media (max-width: 576px) {
  section.margin { margin: 2rem 1rem; }
  section.margin-x { margin: 2rem auto; }
  .event-box {
    width: 100%;
    min-width: 280px;
  }
  .img-slider {
    width: 100%;
    height: 18rem;
  }
  .img-slider-container { transform: translateX(0); }
  h1.f-4 { font-size: 2rem; }
  h2.f-3 { font-size: 1.75rem; }
  .flex-direction-c-sm { flex-direction: column; }
  .gap-1-sm { gap: 0.5rem; }
  header nav { display: none; }
  header .flex { justify-content: center; }
  /* padding */
  .p-0   { padding: 0; }
  .p-025 { padding: 0.125rem; } /* أصغر */
  .p-1   { padding: 0.25rem; }
  .p-2   { padding: 0.5rem; }
  .p-3   { padding: 0.75rem; }
  .p-4   { padding: 1rem; }
  .p-5   { padding: 1.25rem; }
  .p-6   { padding: 1.5rem; }
  .p-7   { padding: 1.75rem; }
  .p-8   { padding: 2rem; }

  /* margin */
  .m-0   { margin: 0; }
  .m-1   { margin: 0.25rem; }
  .m-2   { margin: 0.5rem; }
  .m-3   { margin: 0.75rem; }
  .m-4   { margin: 1rem; }
  .m-5   { margin: 1.25rem; }
  .m-6   { margin: 1.5rem; }
  .m-7   { margin: 1.75rem; }
  .m-8   { margin: 2rem; }

  /* margin-bottom */
  .mb-1 { margin-bottom: 0.25rem; }
  .mb-2 { margin-bottom: 0.5rem; }
  .mb-3 { margin-bottom: 0.75rem; }
  .mb-4 { margin-bottom: 1rem; }

  /* margin-top */
  .mt-1 { margin-top: 0.25rem; }
  .mt-2 { margin-top: 0.5rem; }
  .mt-3 { margin-top: 0.75rem; }
  .mt-4 { margin-top: 1rem; }

  /* width & height */
  /* .w-1  { width: 0.25rem; }
  .w-2  { width: 0.5rem; }
  .w-3  { width: 0.75rem; }
  .w-4  { width: 1rem; }
  .w-5  { width: 1.25rem; }
  .w-6  { width: 1.5rem; }
  .w-7  { width: 1.75rem; }
  .w-8  { width: 2rem; } */

  .w-25 { width: 6.25rem; } 
  .w-full { width: 100%; }

  /* .h-1  { height: 0.25rem; }
  .h-2  { height: 0.5rem; }
  .h-3  { height: 0.75rem; }
  .h-4  { height: 1rem; } */
  .h-25 { height: 6.25rem; }
}

@media (max-width: 768px) {
  section.margin { margin: 3rem 2rem; }
  
  .event-box {
    width: calc(50% - 1rem);
    min-width: 280px;
  }
  
  .ticket-bg {
    width: 100%;
    height: 12rem;
  }
  
  article.flex {
    flex-direction: column;
  }
  
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }
}