/* ──────────────────────────────────────────────────────────
   FictionX – moi-1 "قالو عن عمان / إنجازات عُمانية" cards
   Professional redesign for the .testimonials-4 slider cards
   inside the #Library tabbed section.
   RTL-first. No box-shadow on buttons (template UI rule).
   ────────────────────────────────────────────────────────── */

/* ===== Card body ===== */
#Library .testimonials-4 .testimonials-bg.shape{
    height:auto !important;
    min-height:212px;
    overflow:hidden !important;
    position:relative;
    padding:48px 26px 34px;
    margin:0 12px 0;
    background:linear-gradient(158deg,rgba(50,50,55,.96) 0%,rgba(25,25,29,.97) 100%) !important;
    border:1px solid rgba(255,255,255,.09);
    border-radius:4px;
    transition:transform .3s ease,border-color .3s ease;
}
#Library .testimonials-4 .testimonials-bg.shape:hover{
    transform:translateY(-5px);
    border-color:rgba(193,23,23,.5);
}

/* decorative quote mark (top) */
#Library .testimonials-4 .testimonials-bg.shape:before{
    content:"\f10d";                       /* fa quote-left */
    font:normal normal normal 24px/1 FontAwesome;
    position:absolute;
    top:20px;
    inset-inline-start:26px;
    width:auto;height:auto;
    background:none;
    color:rgba(193,23,23,.9);
}

/* red accent under the quote */
#Library .testimonials-4 .testimonials-bg.shape:after{
    content:"";
    position:absolute;
    left:auto;
    bottom:20px;
    inset-inline-start:26px;
    width:48px;height:3px;
    background:linear-gradient(90deg,#c11717,#7d0f0f);
    border-radius:4px;
}

/* quote text (clamped) */
#Library .testimonials-4 .testimonials-bg.shape > span{
    display:-webkit-box;
    -webkit-line-clamp:6;
    -webkit-box-orient:vertical;
    overflow:hidden;
    color:#e0e2e6;
    font-size:14.5px;
    line-height:1.85;
    text-align:justify;
}

/* ===== Card with cover image + publish date ===== */
/* Every card has the same fixed height; the text is clamped to fit. */
#Library .testimonials-4 .testimonials-bg.shape.fx-quote-card{
    height:262px !important;
    min-height:0;
    padding:20px 22px 34px !important;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
}
#Library .testimonials-4 .testimonials-bg.shape.fx-quote-card:before{display:none;}
#Library .testimonials-4 .testimonials-bg.shape.fx-quote-card:after{bottom:16px;}

/* Small thumbnail at the top start corner, date beside it */
#Library .fx-quote-card__head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
    flex:0 0 auto;
}
#Library .fx-quote-card__media{
    flex:0 0 84px;
    width:84px;
    height:60px;
    border-radius:4px;
    overflow:hidden;
    background:#1c1c20;
    border:1px solid rgba(255,255,255,.14) !important;
}
#Library .fx-quote-card__media img{
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    object-fit:cover;
    object-position:center top;
    display:block;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
}
#Library .fx-quote-card__date{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#fff !important;
    opacity:1 !important;
    font-size:13.5px;
    font-weight:700;
    line-height:1.4;
}
#Library .fx-quote-card__date i{color:#e53935 !important;}
#Library .testimonials-4 .fx-quote-card__text{
    display:-webkit-box;
    -webkit-line-clamp:5;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin:0;
    color:#f1f3f5 !important;
    opacity:1 !important;
    font-size:15px;
    font-weight:500;
    line-height:1.85;
    text-align:justify;
}
@media (max-width:767px){
    #Library .testimonials-4 .testimonials-bg.shape.fx-quote-card{height:250px !important;}
}

/* hide the small floating thumbnail – keeps the card clean */
#Library .testimonials-4 .testimonials-img{display:none !important;}

/* ===== Read more button ===== */
#Library .testimonials-4 .testimonials-name{
    float:none !important;
    padding:0 12px !important;
    margin:14px 0 0 !important;
    text-align:center;
}
#Library .testimonials-4 .testimonials-name span.block{margin:0 !important;font-size:0;}
#Library .testimonials-4 .testimonials-name .read-more.btn{
    display:block;
    width:100% !important;
    padding:12px 16px !important;
    border:none !important;
    border-radius:4px !important;
    background:#c11717 !important;
    color:#fff !important;
    font-size:14px;
    font-weight:700;
    letter-spacing:.2px;
    box-shadow:none !important;            /* no shadow rule */
    transition:background .25s ease,transform .2s ease;
}
#Library .testimonials-4 .testimonials-name .read-more.btn:hover{
    background:#7d0f0f !important;
    transform:translateY(-2px);
}

/* ===== Slider dots ===== */
#Library .testimonials-4 .slick-dots{
    position:relative;
    margin:26px 0 0;
    padding:0;
    text-align:center;
    list-style:none;
}
#Library .testimonials-4 .slick-dots li{
    display:inline-block;
    margin:0 5px;
    width:auto;height:auto;
}
#Library .testimonials-4 .slick-dots li button{
    width:10px;height:10px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.28);
    text-indent:-9999px;
    overflow:hidden;
    transition:all .25s ease;
}
#Library .testimonials-4 .slick-dots li button:before{display:none !important;}
#Library .testimonials-4 .slick-dots li.slick-active button{
    width:28px;
    border-radius:4px;
    background:#c11717;
}

/* ===== "المزيد ..." box ===== */
#Library .icon-box.gry-border-2.shape{
    margin:30px auto 0 !important;
    max-width:440px;
    background:rgba(255,255,255,.02) !important;
    border:1px dashed rgba(255,255,255,.28) !important;
    border-radius:4px !important;
    transition:border-color .25s ease,background .25s ease;
}
#Library .icon-box.gry-border-2.shape:hover{
    border-color:#c11717 !important;
    background:rgba(193,23,23,.08) !important;
}
#Library .icon-box.gry-border-2.shape h3{
    margin:0 !important;
    padding:15px !important;
    font-size:15px !important;
    font-weight:700;
    color:#fff !important;
    background:none !important;
}

/* ===== Section tabs (icon + label) ===== */
#Library .tabs-style-lg .nav-tabs{
    display:flex !important;
    flex-wrap:wrap;
    justify-content:center;
    align-items:stretch;
    gap:16px;
    width:auto;
    border:0 !important;
    margin:0 auto !important;
}
#Library .tabs-style-lg.style-1 .nav-tabs > li{
    margin:0 !important;
    float:none;
    border:0 !important;
}
#Library .tabs-style-lg .nav-tabs > li > a{
    position:relative;
    height:100%;
    min-width:158px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:22px 26px 18px !important;
    margin:0 !important;
    border:1px solid rgba(15,23,42,.08) !important;
    border-radius:4px;
    background:#fbfbfc !important;
    overflow:hidden;
    transition:transform .3s cubic-bezier(.22,.61,.36,1),border-color .3s ease,background .3s ease;
}
/* top accent bar (reveals on hover) */
#Library .tabs-style-lg .nav-tabs > li > a::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:0;
    height:3px;
    border-radius:0 0 4px 4px;
    background:linear-gradient(90deg,#c11717,#7d0f0f);
    transition:width .3s ease;
}
#Library .tabs-style-lg .nav-tabs > li > a:hover{
    transform:translateY(-5px);
    border-color:rgba(193,23,23,.32) !important;
    background:#fff !important;
}
#Library .tabs-style-lg .nav-tabs > li > a:hover::before{width:46px;}
#Library .tabs-style-lg .nav-tabs > li > a > span{
    display:block;
    font-size:14.5px;
    font-weight:700;
    color:#2c3845;
    line-height:1.4;
}
#Library .tabs-style-lg .nav-tabs > li > a .tab-icon{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:62px;height:62px;
    padding:0 !important;
    margin:0 auto 14px !important;
    border-radius:50% !important;
    background:#fff !important;
    border:1px solid rgba(193,23,23,.18);
    color:#c11717 !important;
    font-size:23px !important;
    transition:background .3s ease,color .3s ease,transform .3s ease,border-color .3s ease;
}
#Library .tabs-style-lg .nav-tabs > li > a:hover .tab-icon{
    transform:scale(1.06);
    background:rgba(193,23,23,.07) !important;
    border-color:rgba(193,23,23,.42);
}
/* Active tab */
#Library .tabs-style-lg.style-1 .nav-tabs > li.active > a{
    background:linear-gradient(165deg,#d01b1b 0%,#9d1212 100%) !important;
    border-color:transparent !important;
    transform:translateY(-5px);
}
#Library .tabs-style-lg.style-1 .nav-tabs > li.active > a::before{width:0 !important;}
#Library .tabs-style-lg.style-1 .nav-tabs > li.active > a > span{color:#fff !important;}
#Library .tabs-style-lg.style-1 .nav-tabs > li.active > a .tab-icon{
    background:rgba(255,255,255,.16) !important;
    color:#fff !important;
    border-color:rgba(255,255,255,.55);
}
#Library .tabs-style-lg.style-1 .nav-tabs > li.active > a i{color:#fff !important;}

/* ===== Responsive ===== */
@media (max-width:767px){
    #Library .testimonials-4 .testimonials-bg.shape{
        min-height:0;
        padding:42px 20px 30px;
        margin:0 6px;
    }
    #Library .tabs-style-lg .nav-tabs{gap:10px;}
    #Library .tabs-style-lg .nav-tabs > li > a{padding:14px 16px !important;}
    #Library .tabs-style-lg .nav-tabs > li > a .tab-icon{width:48px;height:48px;font-size:19px !important;}
    #Library .tabs-style-lg .nav-tabs > li > a > span{font-size:13px;}
}

@media (prefers-reduced-motion:reduce){
    #Library .testimonials-4 .testimonials-bg.shape,
    #Library .testimonials-4 .testimonials-name .read-more.btn,
    #Library .testimonials-4 .slick-dots li button{transition:none;}
    #Library .testimonials-4 .testimonials-bg.shape:hover,
    #Library .testimonials-4 .testimonials-name .read-more.btn:hover{transform:none;}
}