/**
 * Theme Name:     Kadence Child
 * Author:         Kadence WP
 * Template:       kadence
 * Text Domain:	   kadence-child
 * Description:    Kadence Theme is a lightweight yet full featured WordPress theme for creating beautiful fast loading and accessible websites, easier than ever. It features an easy to use drag and drop header and footer builder to build any type of header in minutes. It features a full library of gorgeous starter templates that are easy to modify with our intelligent global font and color controls. With extensive integration with the most popular 3rd party plugins, you can quickly build impressive ecommerce websites, course websites, business websites, and more.
 */



.shayari-page {
    max-width: 100%; /* Full width controlled by page editor */
    margin: 0 auto;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #fffaf7; /* light subtle background */
}

.shayari-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.shayari-item {
    background: linear-gradient(145deg, #fff7f0, #fff0e5);
    border-left: 5px solid #ff7f50;
    padding: 18px 22px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.shayari-item::before {    
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 30px;
    color: rgba(255, 127, 80, 0.3);
}

.shayari-item:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.shayari-item p {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    margin: 0 0 10px 0;
}

.shayari-item small {
    display: block;
    color: #555;
    font-size: 14px;
    font-style: italic;
}

form.shayari-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 25px;
    gap: 12px;
}

form.shayari-filter select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

form.shayari-filter select:hover {
    border-color: #ff7f50;
    background: #fff2e6;
}

/* Optional: add smooth fade-in for the items */
.shayari-item {
    opacity: 0;
    animation: fadeIn 0.8s forwards;
}

.shayari-item {
    position: relative;
    padding: 10px 15px;
    border: 1px solid #ddd;
    margin-bottom: 10px;
    border-radius: 5px;
    background: #f9f9f9;
}

.copy-shayari {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 5px 10px;
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.copy-shayari:hover {
    background: #005177;
}

.copy-message {
    position: absolute;
    bottom: 47px;
    right: 10px;
    display: none;
    color: green;
    font-weight: bold;
    font-size: 14px;
}

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

/* Responsive tweaks */
@media (max-width: 768px) {
    .shayari-item {
        padding: 15px 18px;
    }
    .shayari-item::before {
        font-size: 24px;
    }
}

/* for pagination */

/* === Shayari Pagination Container === */
.shayari-pagination {
    display: flex;                  /* Horizontal layout */
    justify-content: center;        /* Center alignment */
    align-items: center;            /* Vertical alignment */
    flex-wrap: wrap;                /* Wrap to next line on small screens */
    gap: 8px;                       /* Space between links */
    margin: 20px 0;                 /* Vertical spacing from content */
    padding: 0;                     /* Remove default padding */
}

/* === Pagination Links === */
.shayari-pagination a {
    display: inline-block;
    padding: 8px 14px;              /* Padding inside each link */
    border: 1px solid #ddd;         /* Border color */
    border-radius: 6px;             /* Rounded corners */
    text-decoration: none;          /* Remove underline */
    color: #333;                     /* Text color */
    background-color: #fff;          /* Link background */
    font-size: 16px;                 /* Text size */
    transition: all 0.25s ease;      /* Smooth hover effect */
}

/* === Hover State === */
.shayari-pagination a:hover {
    background-color: #f5f5f5;
    border-color: #bbb;
    color: #000;
}

/* === Active Page === */
.shayari-pagination a.active {
    background-color: #4CAF50;      /* Highlight color */
    border-color: #4CAF50;
    color: #fff;
    font-weight: bold;
}

/* === Prev / Next Buttons === */
.shayari-pagination a.prev,
.shayari-pagination a.next {
    font-weight: 500;
}

/* === Responsive Adjustments for Tablets === */
@media (max-width: 768px) {
    .shayari-pagination a {
        padding: 7px 12px;
        font-size: 15px;
    }
}

/* === Responsive Adjustments for Mobile === */
@media (max-width: 480px) {
    .shayari-pagination {
        gap: 6px;                     /* Slightly smaller gaps */
    }
    .shayari-pagination a {
        padding: 6px 10px;
        font-size: 14px;
        border-radius: 4px;           /* Slightly smaller radius */
    }
}