.newstitle {
	color: white;
	font-size: 12px;
}

.newstitle span {
	width: 98%;
    display: block;
    margin: 0 auto;
}
input {
	white-space: normal;
}
h2 { overflow: hidden; }
/* 1. الحاوية الأساسية لتوزيع البطاقات */
.proverb-grid {
    display: grid !important;
    /* التوزيع الذكي: 300 بكسل كحد أدنى للبطاقة، وتتوزع تلقائياً حسب عرض الشاشة */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 20px !important;
    padding: 20px !important;
    direction: rtl; /* للتأكد من الاتجاه العربي */
}

/* 2. تصميم البطاقة */
.proverb-card {

    position: relative !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 40px 25px !important;
    min-height: 140px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
    border: 1px solid #eee !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

/* تأثير التحويم */
.proverb-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12) !important;
}

/* 3. تنسيق النص */
.proverb-text {
    margin: 0 !important;
    color: #333 !important;
    font-size: 1.25rem !important;
    font-weight: bold !important;
    text-align: center !important;
    line-height: 1.6 !important;
    z-index: 2 !important;
}

/* 4. الأيقونة الخلفية (العلامة المائية) */
.card-icon {
    position: absolute !important;
    bottom: -10px !important;
    left: 10px !important;
    font-size: 5rem !important;
    opacity: 0.12 !important;
    z-index: 1 !important;
    font-family: serif !important;
}



/* 5. منطق الألوان التلقائي (الذي سألت عنه) */
/* ملاحظة: 4n+1 تعني البطاقة 1، 5، 9... وهكذا */

/* اللون الأزرق */
.proverb-card:nth-child(4n+1) { border-right: 6px solid #2196F3 !important; }
.proverb-card:nth-child(4n+1) .card-icon { color: #2196F3 !important; }

/* اللون الأحمر/الوردي */
.proverb-card:nth-child(4n+2) { border-right: 6px solid #e91e63 !important; }
.proverb-card:nth-child(4n+2) .card-icon { color: #e91e63 !important; }

/* اللون الأخضر */
.proverb-card:nth-child(4n+3) { border-right: 6px solid #4CAF50 !important; }
.proverb-card:nth-child(4n+3) .card-icon { color: #4CAF50 !important; }

/* اللون البرتقالي */
.proverb-card:nth-child(4n+4) { border-right: 6px solid #ff9800 !important; }
.proverb-card:nth-child(4n+4) .card-icon { color: #ff9800 !important; }


h1 {
  text-align: center; /* لجعل العنوان في المنتصف */
}

.main-title {
  display: block;      /* ليظهر في سطر مستقل */
  font-size: 32px;     /* حجم كبير للاسم الأساسي */
  font-weight: bold;
}

.sub-title {
  display: block;      /* ليظهر في سطر مستقل تحت الأول */
  font-size: 18px;     /* حجم أصغر للشكل الجمالي */
  color: #666;         /* لون أخف قليلاً لتركيز العين على العنوان الأساسي */
  margin-top: 5px;     /* مسافة بسيطة بين السطرين */
}
.admin1 {
width:400px;
background-color: #E2E2E2;
color:black;
margin: 0 auto;
font-size: medium;
font-weight:bold;
height:30px;
font-family:  "Times New Roman", Times, serif;
line-height:30px;
vertical-align:middle;
text-align:center;
width:100%

}

.admin1 a {
 color: black;
}

.admin2 {
width:400px;
background-color:white;
color:black;
margin: 0 auto;
font-size: medium;
font-weight:bold;
height:30px;
font-family:  "Times New Roman", Times, serif;
line-height:30px;
vertical-align:middle;
text-align:center;
width:100%

}

.admin2 a {
color:black;
	
}

.login1 {
	width: 100%;
    height: 300px;
    background: white;
    padding-top: 50px;
}
.login2 {
	width: 300px;
    height: 180px;
    background-color: lightgray;
    margin: auto;
    margin-top: 10px;
}

.login3 {
	font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding-top: 15px;
}

.login4 {
	text-align: center;
    padding-top: 10px;
}

.login5 {
	    text-align: center;
    color: blue;
    font-size: 14px;
    font-weight: bold;
    padding-top: 10px;
}
.err {
	    display: inline-block;
    height: 20px;
    margin-top: 5px;
}

.login6 {
	color:red;
	margin:auto;
	text-align:center;
	padding-top:15px;
}

.listtable {
	width: 100%;
	border-collapse:collapse;
	border-spacing:0px;
}

.listtable td {
border:thin #dedede solid;
}

.listtable tr {
height:35px;
}

.listtable .td1 {
	width: 25%;
	padding-right:5px;
	font: bold 1em arial;
}
.listtable .td2 {
	width: 75%;
	padding-right:5px;
	font: bold 1.2em arial;
}


.listtable .tr1 {
	background-color:#F4F5F7;
}


.alert {
    padding: 15px 20px;
    border-radius: 8px;
    margin: 15px auto;
    max-width: 600px;
    font-size: 15px;
    /* display: flex; */
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	text-align: center;
	max-width:300px;
}

.alert-icon {
    font-size: 20px;
    font-weight: bold;
}

/* Colors */
.alert.success {
    background: #e8f9e9;
    border-left-color: #28a745;
	border-right-color: #28a745;
    color: #147026;
}

.alert.error {
    background: #ffe8e8;
    border-left-color: #dc3545;
	border-right-color: #dc3545;
    color: #a11222;
}

.alert.warning {
    background: #fff6e6;
    border-left-color: #ffc107;
	border-right-color: #ffc107;
    color: #856404;
}

.alert.info {
    background: #e7f3ff;
    border-left-color: #007bff;
	border-right-color: #007bff;
    color: #084298;
}


.categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 20px;
  text-align: center; /* centers text */
  direction: rtl; /* since you are using Arabic */
  margin-top: 35px;
}

.category {
  background: #fff;
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #eee;
  transition: 0.3s;
  cursor: pointer;
  text-decoration: none;
  color: black;
}

.category:hover {
  background: #f7f7f7;
  transform: translateY(-3px);
}

.category img {
  width: 70px; /* adjust size */
  display: block;
  margin: 0 auto 10px auto; /* center image */
}

.category p {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}


.category-section {
    margin-bottom: 0px;
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    direction: rtl;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
    padding-bottom: 8px;
	margin-top: 40px;
	margin-left: 20px;
	margin-right: 20px;
}

.category-header h2 {
    font-size: 20px;
    margin: 0;
    font-weight: 700;
    color: #000;
}

.category-header .more {
    font-size: 14px;
    text-decoration: none;
    color: #007bff;
    font-weight: 600;
    transition: 0.3s;
}

.category-header .more:hover {
    color: #0056b3;
}

.noimage-box {
	flex-direction: column;
    display: flex;
    background: white;        /* White background for the box */
    border: 1px solid #ccc;   /* Border for the box */
    border-radius: 5px;       /* Rounded corners */
    padding: 10px;            /* Inner padding */
    text-align: center;       /* Center text */
    width: 180px;  /* Default width for 4 boxes in a row */
	height: 170px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    text-decoration: none;     /* Remove underline from links */
    transition: transform 0.2s, box-shadow 0.2s; /* Transition for hover effects */
    color: inherit;           /* Inherit color from parent to keep it consistent */
}


/* Hover effects */
.noimage-box:hover {
    transform: scale(1.05); /* Slightly enlarge the box */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Deeper shadow on hover */
}


/* No-image cards */

.noimage-box h2 {
  margin: 4px 0 6px; font-size: 18px; /* centered, close to top */
}

/* Bottom bar with corners (city right, date left in RTL) */
.noimage-box .meta-bar {
  display: flex; justify-content: space-between; align-items: center;
  background: #f0f0f0; border-top: 1px solid #e2e2e2;
  padding: 6px 8px; font-size: 0.9em; color: #666; border-radius: 0 0 4px 4px;
}

.noimage-box .noimg-content {
  flex: 1; /* push meta-bar down */
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 6px 4px 10px;
}

.noimage-box .detail {
  font-size: 14px; color: #555; margin: 0;
}


.admin-controls {
  margin-top: 6px;
  display: flex;
  gap: 6px;
}

.admin-controls button {
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.admin-controls .approve { background: #28a745; color: white; }
.admin-controls .edit { background: #ffc107; color: black; }
.admin-controls .delete { background: #dc3545; color: white; }
.admin-controls .normal { background: blue; color: white; }

.admin-controls button:hover {
  opacity: 0.9;
}


 .jokes-container {
            font-family: 'Noto Naskh Arabic', serif;
            max-width: 800px;
            margin: 0 auto;
            padding-top: 20px;
            display: grid;
            grid-gap: 25px;
        }
        
        .joke-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }
        
        .joke-card:hover {
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        }
        
        .joke-header {
            background: #2c3e50;
            color: white;
            padding: 18px;
            position: relative;
        }
        
        .joke-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 5px;
        }
        
        .joke-content {
            padding: 25px;
            font-size: 1.2rem;
            line-height: 1.9;
            color: #333;
            border-bottom: 1px solid #eee;
        }
        
        .joke-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 25px;
            background: #f9f9f9;
        }
        
        .posted-by {
            font-size: 0.9rem;
            color: #777;
        }
        
        .add-joke-btn {
            background: #3498db;
            color: white;
            border: none;
            border-radius: 30px;
            padding: 8px 20px;
            font-family: 'Noto Naskh Arabic', serif;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.95rem;
        }
        
        .add-joke-btn:hover {
            background: #2980b9;
            transform: translateY(-2px);
        }
        
        .category-tag {
            position: absolute;
            top: -12px;
            left: 20px;
            background: #e74c3c;
            color: white;
            padding: 6px 15px;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.85rem;
        }
		
body {
    font-family: Arial, sans-serif;
    background-color: #f8f8f8;
    margin: 0;
    padding: 0;
}


.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

/* Product Title */
.product-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

/* Product Images */
.product-images {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.product-images img {
    max-width: 100px;
    height: auto;
    cursor: pointer;
    border: 2px solid #ddd;
    border-radius: 5px;
    transition: transform 0.2s;
}
.product-images img:hover {
    transform: scale(1.1);
}

/* Sections */
.section {
    padding: 15px;
    border-top: 2px solid #ddd;
    margin-bottom: 10px;
}
.section h2 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

/* Price Section */
.price {
    font-size: 22px;
    color: #d9534f;
    font-weight: bold;
    text-align: center;
    padding: 15px;
}

/* Contact Details */
.contact-details {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
}

/* Related Listings */
.related-listings {
 /*   margin-top: 30px;
    padding: 20px; */
    background-color: cornflowerblue;
    color: #fff;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}
.related-listings-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    padding: 20px;
}
.related-listings .item {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    width: 200px;
}



table td {
    padding: 5px 0px 10px 0px;
    vertical-align: top;
}

.list-td {
	width:20%;
	font-weight:bold;
}
	
/* Responsive */
@media (max-width: 768px) {
    .product-images img {
        max-width: 80px;
    }
    .related-listings {
        font-size: 18px;
    }
}




.top-menu {
	width: 100%;
    height: 40px;
    background-color: black;
}

.top-menu li {
    float: right; 
}

.top-right {
    padding-top: 5px;
    float: right;
}
.top-right img {
    padding-right: 10px;
    padding-left: 15px;
}
html, body {
    margin: 0;
    padding: 0;
}
.container {
    max-width: 1200px; /* Adjust the max width as needed */
    min-width: 320px; /* Prevents the content from going below this width */
    margin: 0 auto; /* Center the container */
    padding: 0 20px; /* Remove top padding but keep left/right padding */
}

.logo {
 /*   background: lightgrey;    /* Light grey background for image */
    height: 100px;            /* Fixed height for consistency */
    display: flex;            /* Center the image vertically */
    justify-content: center;   /* Center horizontally */
    align-items: center;       /* Center vertically */
    float: right;
    padding-right: 15px;
}

.logo img {
    max-width: 100%;          /* Image responsive to container */
    max-height: 100%;         /* Maintain aspect ratio */
}
.banner {
    min-height: 100px;
}
.banner-details {
    width: 100%;
	min-height: 100px;
}

.navbar {
  /*  background-color: #fdfafa; /* Dark background for navbar */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    direction: rtl;
}

.navbar ul {
    list-style: none;

}

.navbar ul li {
    position: relative;
    display: inline-block;
    border-bottom-width: 0px;
    border-bottom-style: solid;
    border-bottom-color: lightgray;
}

.navbar ul li ul {
    position: absolute;
    top: 100%;
    white-space: nowrap; /* Prevent text from wrapping */
    min-width: 100%; /* Ensures it at least matches parent width */
    background: #fff; /* Adjust as needed */
    border: 1px solid #ccc;
    padding: 5px 0;
}

.navbar ul li ul li {
    display: block;
}

.navbar ul li:hover ul {
    display: block;
}

.nav-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap; /* Allows wrapping of items */
}

.nav-list li {
    position: relative;
    font-family: janna;
}

.nav-list a {
    color: rgb(0, 0, 0); /* White text color */
    text-decoration: none; /* Remove underline */
    padding: 10px 15px; /* Padding for links */
    display: block; /* Makes the entire area clickable */
}

.nav-list a:hover {
    background-color: #cccccc; /* Darker background on hover */
}

.dropdown {
    display: none; /* Hide sub-items initially */
    position: absolute;
    background-color: ghostwhite !important; /* Background for dropdown */
    padding: 0; /* Remove padding */
    z-index: 1000; /* Ensure dropdown is above other content */
}

.nav-list li:hover .dropdown {
    display: block; /* Show dropdown on hover */
}

.menu-toggle {
    display: none; /* Hide toggle button initially */
    flex-direction: column;
    cursor: pointer; /* Change cursor on hover */
}

.bar {
    height: 3px;
    width: 25px;
    background-color: rgb(0, 0, 0); /* Color of the bars */
    margin: 3px 0; /* Spacing between bars */
}
.red-space {
    width: 100%;
    height: 1px;
    background-color: rgb(236, 225, 225);
}

.listing-header {
    background-color: #f8f8f8;  /* Light background color */
    padding: 20px;              /* Padding for spacing */
    border-bottom: 2px solid #ccc; /* Bottom border for separation */
    text-align: center;         /* Center the text */
}

.listing-header h2 {
    margin: 0;                 /* Remove default margin */
    font-size: 24px;           /* Font size for title */
    color: #333;               /* Dark text color */
}

.listing-header p {
    margin: 5px 0 15px;       /* Margin for description */
    color: #666;               /* Grey text color */
}

.add-button {
    background-color: #4CAF50; /* Green background for button */
    color: white;              /* White text color */
    border: none;              /* No border */
    padding: 10px 20px;       /* Padding for button */
    border-radius: 5px;       /* Rounded corners */
    cursor: pointer;           /* Pointer cursor on hover */
    font-size: 16px;          /* Font size for button */
    transition: background-color 0.3s; /* Smooth background change */
}

.add-button:hover {
    background-color: #45a049; /* Darker green on hover */
}

.add-button2 {
    background-color: #4CAF50; /* Green background for button */
    color: white;              /* White text color */
    border: none;              /* No border */
    padding: 2px 5px;       /* Padding for button */
    border-radius: 5px;       /* Rounded corners */
    cursor: pointer;           /* Pointer cursor on hover */
    font-size: 16px;          /* Font size for button */
    transition: background-color 0.3s; /* Smooth background change */
}

.add-button2:hover {
    background-color: #45a049; /* Darker green on hover */
}

.product-list {
    display: flex;             /* Use Flexbox for layout */
    flex-wrap: wrap;          /* Allow boxes to wrap */
    gap: 20px;                /* Space between boxes */
    justify-content: center;   /* Center boxes */
}

.product-box {
    background: white;        /* White background for the box */
    border: 1px solid #ccc;   /* Border for the box */
    border-radius: 5px;       /* Rounded corners */
    padding: 10px;            /* Inner padding */
    text-align: center;       /* Center text */
    width: calc((100% / 4) - 22px - (60px / 4));  /* Default width for 4 boxes in a row */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    text-decoration: none;     /* Remove underline from links */
    transition: transform 0.2s, box-shadow 0.2s; /* Transition for hover effects */
    color: inherit;           /* Inherit color from parent to keep it consistent */
}

.image-container {
    background: #f8f8f8;    /* Light grey background for image */
    height: 180px;            /* Fixed height for consistency */
    display: flex;            /* Center the image vertically */
    justify-content: center;   /* Center horizontally */
    align-items: center;       /* Center vertically */
}

.image-container img {
    max-width: 100%;          /* Image responsive to container */
    max-height: 100%;         /* Maintain aspect ratio */
}

.date, .city {
    font-size: 0.9em;         /* Smaller font for date and city */
    color: #666;              /* Grey color for text */
}

/* Hover effects */
.product-box:hover {
    transform: scale(1.05); /* Slightly enlarge the box */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Deeper shadow on hover */
}
footer {
    padding-top: 30px;
}
.footer {
    height: 30px;
    background-color: black;
    color: white;
    text-align: center;
    padding: 15px 0;
    font-size: 14px;
    position: relative;
    bottom: 0;
    width: 100%;
}
.footer a {
    color: white;
    text-decoration: underline;
}
.footer a:hover {
    text-decoration: none;
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
    .product-box {
        width: calc((100% / 3) - 22px - (40px / 3)); /* 3 boxes in a row */
    }
}

@media (max-width: 768px) {
    .product-box {
        width: calc((100% / 2) - 32px); /* 2 boxes in a row */
    }
		.dropdown {
    position: relative !important; /* Position dropdown relative to parent */
}
}

@media (max-width: 480px) {
    .product-box {
     /*   width: 100%;            /* 1 box in a row on smaller screens */
    }
    .container {
        padding: 0 5px; /* Remove top padding but keep left/right padding */
    }
	
	.listtable .td1 {
	width: 30%;
	padding-right:5px;
}
.listtable .td2 {
	width: 70%;
	padding-right:5px;
}

}


@media (max-width: 540px) {
	.list-td {
	width:30%;
	font-weight:bold;
}
}

@media (max-width: 350px) {
    .product-box {
        width: 100%;            /* 1 box in a row on smaller screens */
    }
    .container {
        padding: 0 0px; /* Remove top padding but keep left/right padding */
    }
	
	.listtable .td1 {
	width: 40%;
	padding-right:5px;
}
.listtable .td2 {
	width: 60%;
	padding-right:5px;
}

}

@font-face {
	font-family: 'janna';
	src: local('☺'),
	url('fonts/janna.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@media (max-width: 768px) {
    .navbar ul li {
        border-bottom-width: 1px;
    }

    .nav-list {
        background-color: white;
        flex-direction: column; /* Stack items vertically */
        display: none; /* Hide nav list */
        width: 100%; /* Full width for mobile */
        position: absolute; /* Position relative to navbar */
        top: 60px; /* Below the navbar */
        left: 0; /* Align to left */
     /*   background-color: #333; /* Dark background */
    }

    .nav-list.active {
        display: flex; /* Show when active */
        text-align: left;
        top: 95px;
        padding-left: 20px;
    }

    .menu-toggle {
        padding-top: 20px;
        display: flex; /* Show toggle button on mobile */
    }
    .navbar {
        top: 95px;
        direction: ltr;
    }
}