/*
 * دليل صناعة الجلود المصرية – Frontend Stylesheet v2
 * Author:  DotsMaker (https://dotsmaker.com/)
 *
 * Design philosophy (v2):
 *   ─ All colour and font values come exclusively from CSS custom properties
 *     (--estdir-*).  Those variables are injected by PHP (class-enqueue.php)
 *     which reads the active theme's Global Styles / theme-mods first, then
 *     falls back to the plugin's own tasteful defaults.
 *   ─ This file contains ONLY structural / layout / animation rules.
 *     Nothing is hardcoded here that a theme cannot override.
 *   ─ Prefixed namespace --estdir-* avoids collisions with any theme.
 */

/* ==========================================================================
   GLOBAL SCOPE
   ========================================================================== */
.estdir-directory,
.estdir-single,
.estdir-page-wrap {
    font-family: var(--estdir-font);
    color:       var(--estdir-text);
    direction:   rtl;
    text-align:  right;
}

/* ==========================================================================
   DIRECTORY WRAPPER
   ========================================================================== */
.estdir-directory {
    background:     var(--estdir-bg);
    min-height:     60vh;
    padding-bottom: 60px;
}

/* ==========================================================================
   HEADER  (v2: updated copy; same classes preserved for theme targeting)
   ========================================================================== */
.estdir-directory__header {
    background: linear-gradient(135deg, var(--estdir-secondary) 0%, var(--estdir-primary-dk) 100%);
    padding:        60px 20px 50px;
    text-align:     center;
    position:       relative;
    overflow:       hidden;
}

/* Subtle radial overlay – uses primary accent */
.estdir-directory__header::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:
        radial-gradient(ellipse at top right,   rgba(var(--estdir-primary-rgb), .25) 0%, transparent 60%),
        radial-gradient(ellipse at bottom left, rgba(var(--estdir-primary-rgb), .15)  0%, transparent 55%);
    pointer-events: none;
}

.estdir-directory__title {
    font-size:      clamp(1.6rem, 4vw, 2.8rem);
    font-weight:    900;
    color:          #fff;          /* always white on dark gradient */
    margin:         0 0 12px;
    letter-spacing: -.5px;
    position:       relative;
    line-height:    1.25;
}

.estdir-directory__subtitle {
    font-size:  1rem;
    color:      rgba(255, 255, 255, .78);
    margin:     0;
    position:   relative;
    max-width:  680px;
    margin-inline: auto;
    line-height: 1.7;
}

/* ==========================================================================
   FILTERS BAR
   ========================================================================== */
.estdir-filters {
    max-width:     1100px;
    margin:        -28px auto 32px;
    padding:       28px 24px 20px;
    background:    var(--estdir-card-bg);
    border-radius: var(--estdir-radius);
    box-shadow:    var(--estdir-shadow);
    position:      relative;
    z-index:       10;
}

/* Search */
.estdir-search-wrap {
    position:      relative;
    margin-bottom: 18px;
}

.estdir-search-icon {
    position:       absolute;
    right:          18px;
    top:            50%;
    transform:      translateY(-50%);
    font-size:      1.1rem;
    pointer-events: none;
}

.estdir-search-input {
    width:          100%;
    padding:        14px 48px 14px 20px;
    border:         2px solid var(--estdir-border);
    border-radius:  50px;
    font-family:    var(--estdir-font);
    font-size:      1rem;
    color:          var(--estdir-text);
    background:     var(--estdir-bg);
    box-sizing:     border-box;
    transition:     border-color .2s, box-shadow .2s;
    outline:        none;
    direction:      rtl;
}

.estdir-search-input:focus {
    border-color: var(--estdir-primary);
    box-shadow:   0 0 0 3px rgba(233,30,140,.12);
}

/* Section pills */
.estdir-section-pills {
    display:       flex;
    flex-wrap:     wrap;
    gap:           8px;
    margin-bottom: 14px;
}

.estdir-pill {
    padding:       7px 20px;
    border-radius: 50px;
    border:        2px solid var(--estdir-border);
    background:    var(--estdir-bg);
    color:         var(--estdir-text-muted);
    font-family:   var(--estdir-font);
    font-size:     .9rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    all .18s ease;
    white-space:   nowrap;
}

.estdir-pill:hover,
.estdir-pill.is-active {
    background:   var(--estdir-primary);
    border-color: var(--estdir-primary);
    color:        #fff;
}

/* City dropdown */
.estdir-city-wrap { margin-top: 4px; }

.estdir-select {
    padding:       10px 16px;
    border:        2px solid var(--estdir-border);
    border-radius: 10px;
    font-family:   var(--estdir-font);
    font-size:     .95rem;
    color:         var(--estdir-text);
    background:    var(--estdir-bg);
    min-width:     200px;
    cursor:        pointer;
    transition:    border-color .2s;
    outline:       none;
    direction:     rtl;
}

.estdir-select:focus { border-color: var(--estdir-primary); }

/* ==========================================================================
   RESULTS COUNT
   ========================================================================== */
.estdir-results-info {
    max-width:   1100px;
    margin:      0 auto 16px;
    padding:     0 20px;
    font-size:   .9rem;
    color:       var(--estdir-text-muted);
    font-weight: 500;
}

/* ==========================================================================
   CARDS GRID
   ========================================================================== */
.estdir-grid {
    max-width:             1100px;
    margin:                0 auto;
    padding:               0 20px;
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   24px;
    min-height:            100px;
}

.estdir-grid.is-loading {
    opacity:        .5;
    pointer-events: none;
}

.estdir-no-results {
    grid-column: 1 / -1;
    text-align:  center;
    padding:     60px 20px;
    color:       var(--estdir-text-muted);
    font-size:   1.1rem;
}

/* ==========================================================================
   CARD
   ========================================================================== */
.estdir-card {
    background:     var(--estdir-card-bg);
    border-radius:  var(--estdir-radius);
    box-shadow:     var(--estdir-shadow);
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    transition:     transform .22s ease, box-shadow .22s ease;
    position:       relative;
    animation:      estdirFadeUp .35s ease both;
}

.estdir-card:hover {
    transform:  translateY(-5px);
    box-shadow: var(--estdir-shadow-hover);
}

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

/* Badge */
.estdir-card__badge {
    position:        absolute;
    top:             12px;
    right:           12px;
    z-index:         2;
    background:      var(--estdir-primary);
    color:           #fff;
    font-size:       .75rem;
    font-weight:     700;
    padding:         4px 12px;
    border-radius:   50px;
    backdrop-filter: blur(4px);
}

/* Image */
.estdir-card__image {
    height:   180px;
    overflow: hidden;
    background: var(--estdir-bg);
}

.estdir-card__image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .4s ease;
}

.estdir-card:hover .estdir-card__image img {
    transform: scale(1.05);
}

/* Body */
.estdir-card__body {
    padding: 16px 18px 12px;
    flex:    1;
}

.estdir-card__title {
    font-size:   1.05rem;
    font-weight: 800;
    margin:      0 0 10px;
    color:       var(--estdir-secondary);
    line-height: 1.4;
}

.estdir-card__location,
.estdir-card__phone,
.estdir-card__address {
    font-size:   .875rem;
    color:       var(--estdir-text-muted);
    margin:      0 0 6px;
    display:     flex;
    align-items: flex-start;
    gap:         6px;
    line-height: 1.5;
}

.estdir-card__phone a {
    color:           var(--estdir-primary);
    font-weight:     600;
    text-decoration: none;
}
.estdir-card__phone a:hover { text-decoration: underline; }

.estdir-icon { flex-shrink: 0; }

/* Footer */
.estdir-card__footer {
    padding:    12px 18px 16px;
    border-top: 1px solid var(--estdir-border);
    display:    flex;
    gap:        10px;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.estdir-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    padding:         10px 18px;
    border-radius:   10px;
    font-family:     var(--estdir-font);
    font-size:       .88rem;
    font-weight:     700;
    text-decoration: none;
    cursor:          pointer;
    border:          none;
    transition:      all .18s ease;
    white-space:     nowrap;
    line-height:     1;
}

.estdir-btn--primary {
    background: var(--estdir-secondary);
    color:      #fff;
    flex:       1;
}
.estdir-btn--primary:hover {
    background: var(--estdir-primary-dk);
    color:      #fff;
}

.estdir-btn--secondary {
    background: var(--estdir-bg);
    color:      var(--estdir-text);
    border:     2px solid var(--estdir-border);
}

/*
 * WhatsApp button (v2 fix):
 *   Uses the official WhatsApp green.  The href in PHP is a correct wa.me URL
 *   and target="_blank" with rel="noopener noreferrer" is set in the template.
 *   Pointer-events are explicitly enabled so nothing in a parent can block clicks.
 */
.estdir-btn--whatsapp {
    background:     var(--estdir-whatsapp);
    color:          #fff;
    pointer-events: auto;   /* ensure no parent rule blocks clicks */
    cursor:         pointer;
}
.estdir-btn--whatsapp:hover,
.estdir-btn--whatsapp:focus {
    background: var(--estdir-whatsapp-dk);
    color:      #fff;
}
.estdir-btn--whatsapp svg {
    flex-shrink: 0;
}

.estdir-btn--load-more {
    background:    var(--estdir-primary);
    color:         #fff;
    padding:       14px 48px;
    font-size:     1rem;
    border-radius: 50px;
    margin:        0 auto;
    display:       block;
}
.estdir-btn--load-more:hover {
    background: var(--estdir-primary-dk);
}

.estdir-btn--full { width: 100%; }

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.estdir-pagination {
    max-width:  1100px;
    margin:     40px auto 0;
    padding:    0 20px;
    text-align: center;
}

/* ==========================================================================
   SINGLE PAGE
   ========================================================================== */
.estdir-single {
    background:  var(--estdir-bg);
    min-height:  70vh;
    padding:     40px 0 80px;
}

.estdir-single__container {
    max-width: 1000px;
    margin:    0 auto;
    padding:   0 20px;
}

.estdir-back-link {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    color:           var(--estdir-text-muted);
    font-size:       .9rem;
    font-weight:     600;
    text-decoration: none;
    margin-bottom:   24px;
    transition:      color .18s;
}
.estdir-back-link:hover { color: var(--estdir-primary); }

/* Hero */
.estdir-single__hero {
    background:    var(--estdir-card-bg);
    border-radius: var(--estdir-radius);
    box-shadow:    var(--estdir-shadow);
    overflow:      hidden;
    display:       flex;
    margin-bottom: 28px;
}

.estdir-single__featured-image {
    width:     360px;
    flex-shrink: 0;
    overflow:  hidden;
}

.estdir-single__featured-image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.estdir-single__hero-info {
    padding:         32px 36px;
    flex:            1;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
}

.estdir-badge {
    display:       inline-block;
    background:    rgba(var(--estdir-primary-rgb), .10);
    color:         var(--estdir-primary);
    font-size:     .8rem;
    font-weight:   700;
    padding:       5px 14px;
    border-radius: 50px;
    margin-bottom: 12px;
    border:        1px solid rgba(var(--estdir-primary-rgb), .20);
}

.estdir-single__title {
    font-size:   clamp(1.4rem, 3vw, 2rem);
    font-weight: 900;
    color:       var(--estdir-secondary);
    margin:      0 0 12px;
    line-height: 1.3;
}

.estdir-single__manager,
.estdir-single__location {
    font-size: .95rem;
    color:     var(--estdir-text-muted);
    margin:    0 0 8px;
}

.estdir-label {
    font-weight:  700;
    color:        var(--estdir-text);
    margin-left:  4px;
}

/* Details grid */
.estdir-single__grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap:                   20px;
    margin-bottom:         28px;
}

.estdir-single__card {
    background:    var(--estdir-card-bg);
    border-radius: var(--estdir-radius);
    box-shadow:    var(--estdir-shadow);
    padding:       24px 28px;
}

.estdir-single__card-title {
    font-size:     1.1rem;
    font-weight:   800;
    color:         var(--estdir-secondary);
    margin:        0 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--estdir-border);
}

/* Contact list */
.estdir-contact-list {
    list-style: none;
    margin:     0 0 20px;
    padding:    0;
}

.estdir-contact-list li {
    display:     flex;
    align-items: flex-start;
    flex-wrap:   wrap;
    gap:         4px 8px;
    padding:     10px 0;
    border-bottom: 1px solid var(--estdir-border);
    font-size:   .9rem;
}
.estdir-contact-list li:last-child { border-bottom: none; }

.estdir-contact-list a {
    color:           var(--estdir-primary);
    font-weight:     600;
    text-decoration: none;
}
.estdir-contact-list a:hover { text-decoration: underline; }

.estdir-contact-list__address { align-items: flex-start; }
.estdir-contact-list__address span:last-child { flex: 1; line-height: 1.6; }

/* WhatsApp inline badge (single page) */
.estdir-wa-badge {
    display:       inline-block;
    background:    var(--estdir-whatsapp) !important;
    color:         #fff !important;
    font-size:     .75rem !important;
    padding:       2px 10px !important;
    border-radius: 50px !important;
    margin-right:  6px !important;
    text-decoration: none !important;
    cursor:        pointer;
    pointer-events: auto;
}
.estdir-wa-badge:hover { opacity: .85; }

.estdir-single__cta {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

/* Gallery */
.estdir-gallery {
    background:    var(--estdir-card-bg);
    border-radius: var(--estdir-radius);
    box-shadow:    var(--estdir-shadow);
    padding:       24px 28px;
}

.estdir-gallery__title {
    font-size:     1.1rem;
    font-weight:   800;
    color:         var(--estdir-secondary);
    margin:        0 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--estdir-border);
}

.estdir-gallery__grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap:                   12px;
}

.estdir-gallery__item {
    display:       block;
    aspect-ratio:  1;
    overflow:      hidden;
    border-radius: 10px;
    transition:    transform .2s;
}
.estdir-gallery__item:hover { transform: scale(1.03); }

.estdir-gallery__item img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* ==========================================================================
   SPINNER
   ========================================================================== */
.estdir-spinner {
    grid-column: 1 / -1;
    text-align:  center;
    padding:     40px;
}

.estdir-spinner::after {
    content:       '';
    display:       inline-block;
    width:         36px;
    height:        36px;
    border:        3px solid var(--estdir-border);
    border-top-color: var(--estdir-primary);
    border-radius: 50%;
    animation:     estdirSpin .7s linear infinite;
}

@keyframes estdirSpin { to { transform: rotate(360deg); } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .estdir-single__hero           { flex-direction: column; }
    .estdir-single__featured-image { width: 100%; height: 220px; }
    .estdir-single__hero-info      { padding: 20px; }
    .estdir-grid                   { grid-template-columns: 1fr; }
    .estdir-filters                { margin: -20px 12px 24px; padding: 20px 16px; }
    .estdir-gallery__grid          { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

@media (max-width: 480px) {
    .estdir-card__footer    { flex-direction: column; }
    .estdir-section-pills   { gap: 6px; }
    .estdir-pill            { padding: 6px 14px; font-size: .82rem; }
    .estdir-directory__header { padding: 40px 16px 36px; }
}