/*
@Author: ThemeMascot
@URL: http://ThemeMascot.com

This is the file where you can add your custom styles to change the look of the
theme. But don't modify style-main.css file.

*/

/* Your custom css codes start here: */

/* =========================================================
   Bootstrap 3 → 4 compatibility
   ========================================================= */

/* Header-top row: allinea verticalmente i contenuti */
.header-top .row {
    align-items: center;
}

/* list-inline: BS3 rendered li as inline-block automatically,
   BS4 requires the .list-inline-item class. This rule restores
   the old behaviour for all existing templates. */
.list-inline > li {
    display: inline-block;
    padding-right: .5rem;
    padding-left: .5rem;
}

/* nav-tabs: BS4 needs .nav-item on <li> and .nav-link on <a>.
   This keeps old BS3 nav-tab markup working. */
.nav-tabs > li {
    float: none;
    display: inline-flex;
}
.nav-tabs > li > a {
    display: block;
    padding: .5rem 1rem;
    color: #555;
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    margin-bottom: -1px;
    text-decoration: none;
}
.nav-tabs > li > a:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
    background-color: #f8f9fa;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
    color: #495057;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
}

/* =========================================================
   Homepage course cards — modern card with image zoom
   ========================================================= */

.course-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,.07);
    transition: transform .22s ease, box-shadow .22s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}
.course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(0,0,0,.14);
}
/* Image container */
.course-card .cc-img {
    overflow: hidden;
    height: 175px;
    position: relative;
    flex-shrink: 0;
}
.course-card .cc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.course-card:hover .cc-img img { transform: scale(1.07); }
/* Category badge overlay */
.course-card .cc-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #FC9928;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .22rem .65rem;
    border-radius: 20px;
    pointer-events: none;
}
/* Body */
.course-card .cc-body {
    padding: 1rem 1.1rem .7rem;
    flex: 1;
    display: block;
    text-decoration: none;
}
.course-card .cc-body:hover { text-decoration: none; }
/* Stretched-link: makes the whole card clickable */
.course-card .cc-body::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.course-card .cc-title {
    font-size: .9rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.45;
    margin: 0 0 .45rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.course-card:hover .cc-title { color: #FC9928; }
.course-card .cc-school {
    font-size: .78rem;
    color: #999;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Footer */
.course-card .cc-footer {
    padding: .6rem 1.1rem;
    border-top: 1px solid #f0f0f0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    position: relative;
    z-index: 2;
}
.cc-chip {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    font-size: .72rem;
    color: #777;
    background: #f4f6f9;
    border-radius: 20px;
    padding: .18rem .58rem;
    white-space: nowrap;
}
.cc-price {
    margin-left: auto;
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    background: #FC9928;
    border-radius: 20px;
    padding: .18rem .7rem;
}
.cc-price-avail {
    margin-left: auto;
    font-size: .72rem;
    color: #bbb;
    font-style: italic;
}
/* Owl item wrapper — give breathing room */
.owl-carousel-4col .item { padding: 6px 8px 16px; }

/* =========================================================
   Corso detail — hero section
   ========================================================= */

.course-hero {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 55%, #0f3460 100%);
    padding: 8rem 0 2.5rem;
    position: relative;
    overflow: hidden;
}
.course-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.30);
}
.course-hero .container { position: relative; z-index: 1; }
.course-hero-badge {
    display: inline-block;
    background: #FC9928;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .3rem .9rem;
    border-radius: 20px;
    margin-bottom: .8rem;
}
.course-hero h1 {
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 .7rem;
}
.course-hero .hero-school {
    color: rgba(255,255,255,.75);
    font-size: .95rem;
    margin: 0 0 .5rem;
}
.course-hero .hero-school a { color: #FC9928; text-decoration: none; }
.breadcrumb-hero {
    background: transparent;
    padding: .5rem 0 0;
    margin: 0;
}
.breadcrumb-hero .breadcrumb-item,
.breadcrumb-hero .breadcrumb-item a { color: rgba(255,255,255,.55); font-size: .82rem; }
.breadcrumb-hero .breadcrumb-item.active { color: rgba(255,255,255,.85); }
.breadcrumb-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.35); }

/* =========================================================
   Corso detail — sidebar info card
   ========================================================= */

.course-info-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.10);
    overflow: hidden;
    position: sticky;
    top: 80px;
}
.course-info-card .cic-img {
    height: 185px;
    overflow: hidden;
}
.course-info-card .cic-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.course-info-card .cic-price {
    background: linear-gradient(90deg,#FC9928,#e68500);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
    text-align: center;
    padding: .65rem 1rem;
}
.course-info-card .cic-price small {
    font-size: .78rem;
    font-weight: 400;
    opacity: .85;
    display: block;
    margin-bottom: .1rem;
}
.course-info-card .cic-body { padding: 1.2rem; }
.cic-cta {
    display: block;
    background: linear-gradient(135deg,#FC9928,#e68500);
    color: #fff !important;
    font-weight: 700;
    font-size: .95rem;
    text-align: center;
    border-radius: 10px;
    padding: .85rem;
    border: none;
    width: 100%;
    text-decoration: none !important;
    transition: opacity .2s, transform .15s;
    margin-bottom: 1.1rem;
    cursor: pointer;
}
.cic-cta:hover { opacity: .92; transform: translateY(-2px); }
.cic-row {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .5rem 0;
    border-bottom: 1px solid #f4f4f4;
    font-size: .87rem;
}
.cic-row:last-child { border-bottom: none; }
.cic-row > i {
    color: #FC9928;
    font-size: 1rem;
    width: 16px;
    flex-shrink: 0;
    margin-top: .15rem;
}
.cic-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #bbb;
    display: block;
    line-height: 1.2;
    margin-bottom: .1rem;
}
.cic-val {
    font-weight: 600;
    color: #222;
    line-height: 1.3;
}
.cic-val a { color: #222; text-decoration: none; }
.cic-val a:hover { color: #FC9928; }

/* Course detail — main image */
.course-content-img {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.course-content-img img {
    width: 100%;
    max-height: 440px;
    object-fit: cover;
    display: block;
}

/* Tab content border polish */
#myTabContent { border: 1px solid #dee2e6; border-top: none; border-radius: 0 0 8px 8px; padding: 1.5rem; }

/* =========================================================
   Category cards — modern gradient icon cards
   ========================================================= */

.cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    padding: 2rem 1.25rem 1.75rem;
    text-align: center;
    text-decoration: none;
    color: #fff;
    margin-bottom: 24px;
    transition: transform .22s ease, box-shadow .22s ease;
    min-height: 155px;
    position: relative;
    overflow: hidden;
}
.cat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.1);
    opacity: 0;
    transition: opacity .22s;
}
.cat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 48px rgba(0,0,0,.18);
    color: #fff;
    text-decoration: none;
}
.cat-card:hover::after { opacity: 1; }
.cat-card .cat-icon {
    font-size: 2.4rem;
    margin-bottom: .85rem;
    line-height: 1;
}
.cat-card .cat-name {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin: 0;
    line-height: 1.35;
}

/* Palette gradienti */
.cg1  { background: linear-gradient(135deg,#667eea,#764ba2); }
.cg2  { background: linear-gradient(135deg,#f093fb,#f5576c); }
.cg3  { background: linear-gradient(135deg,#4facfe,#00c9ff); }
.cg4  { background: linear-gradient(135deg,#43e97b,#38f9d7); }
.cg5  { background: linear-gradient(135deg,#fa709a,#fee140); }
.cg6  { background: linear-gradient(135deg,#a18cd1,#fbc2eb); }
.cg7  { background: linear-gradient(135deg,#fd7043,#ffb300); }
.cg8  { background: linear-gradient(135deg,#26c6da,#00838f); }
.cg9  { background: linear-gradient(135deg,#66bb6a,#388e3c); }
.cg10 { background: linear-gradient(135deg,#ef5350,#b71c1c); }
.cg11 { background: linear-gradient(135deg,#ab47bc,#6a1b9a); }
.cg12 { background: linear-gradient(135deg,#29b6f6,#0277bd); }
.cg13 { background: linear-gradient(135deg,#ff7043,#d84315); }
.cg14 { background: linear-gradient(135deg,#26a69a,#00695c); }
.cg15 { background: linear-gradient(135deg,#ffa726,#e65100); }
.cg16 { background: linear-gradient(135deg,#78909c,#37474f); }

/* Separatore tra sezioni */
.section-sep-gradient {
    border: none;
    height: 3px;
    background: linear-gradient(90deg,transparent,#FC9928,transparent);
    margin: 1rem 0 2.5rem;
}

/* =========================================================
   bg-theme-colored2 background fix
   ========================================================= */

/* The theme's theme-skin-color-set1.css leaves .bg-theme-colored2 empty.
   This rule restores the expected orange background so the header-top
   bar is visible (it is position:absolute, so without a background it
   is transparent and text disappears into the page behind it).        */
.bg-theme-colored2 {
    background-color: #FC9928 !important;
}

/* =========================================================
   WOW.js safety net
   ========================================================= */

/* WOW.js sets visibility:hidden on .wow elements and reveals them
   on scroll. If the JS fails (jQuery 3 incompatibility), elements
   stay invisible. This rule forces them visible at all times.      */
.wow {
    visibility: visible !important;
}

/* =========================================================
   Corso detail — Ads section (Amazon + AdSense)
   ========================================================= */

.ads-section {
    padding: 1.5rem 0 .5rem;
    border-top: 1px solid #f0f0f0;
}
/* Label sopra ogni widget */
.ads-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #bbb;
    margin-bottom: .4rem;
}
/* Amazon Native Ads: forza max-width nel contenitore */
.amazon-widget-wrap,
#amzn-native-ad-unit-0 { max-width: 100% !important; }

/* Placeholder visivo quando i codici non sono ancora inseriti */
.ads-placeholder {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-align: center;
    color: #888;
    font-size: .85rem;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ads-placeholder code {
    background: #e9ecef;
    padding: .1rem .35rem;
    border-radius: 4px;
    font-size: .78rem;
    color: #e83e8c;
}

/* =========================================================
   Corso detail — Corsi correlati: horizontal scroll
   ========================================================= */

.related-section {
    /* nessuna proprietà speciale, solo spacing via classi mt- */
}
.related-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: .4rem;
}
.related-title .text-theme-colored2 { color: #FC9928; }

/* Contenitore scroll orizzontale */
.related-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;          /* spazio per la scrollbar */
    /* Snap point: ogni card si aggancia al bordo sx */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* momentum scroll su iOS */
    /* Scrollbar sottile e colorata */
    scrollbar-width: thin;
    scrollbar-color: #FC9928 #f0f0f0;
}
.related-scroll::-webkit-scrollbar        { height: 5px; }
.related-scroll::-webkit-scrollbar-track  { background: #f0f0f0; border-radius: 3px; }
.related-scroll::-webkit-scrollbar-thumb  { background: #FC9928; border-radius: 3px; }

/* Singola card nel carosello */
.related-card-wrap {
    flex: 0 0 260px;               /* larghezza fissa → abilita lo scroll */
    scroll-snap-align: start;
    /* Altezza card uniforme grazie a course-card height:100% */
}

/* Mobile: card leggermente più strette per vedere il bordo della successiva */
@media (max-width: 576px) {
    .related-card-wrap { flex: 0 0 230px; }
}

/* =========================================================
   Corso detail — Amazon product cards
   ========================================================= */

.adsense-section { padding: .5rem 0; }
.ads-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #bbb;
    margin-bottom: .4rem;
}

/* Wrapper della card Amazon nello scroll */
.amz-card-wrap {
    flex: 0 0 195px;
    scroll-snap-align: start;
}
@media (max-width: 576px) {
    .amz-card-wrap { flex: 0 0 160px; }
}

/* Card prodotto */
.amz-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 14px rgba(0,0,0,.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .2s, box-shadow .2s;
}
.amz-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,.13);
}

/* Link wrapper interno (esclude il bottone) */
.amz-card-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none !important;
    color: inherit;
}
.amz-card-link:hover { text-decoration: none !important; }

/* Immagine prodotto */
.amz-img {
    height: 145px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .6rem;
    flex-shrink: 0;
}
.amz-img img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

/* Corpo testo */
.amz-body {
    padding: .65rem .7rem .4rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.amz-title {
    font-size: .75rem;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.4;
    margin: 0 0 .45rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.amz-price {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: #B12704;   /* colore prezzo Amazon */
    margin-bottom: .4rem;
}

/* Bottone "Vedi su Amazon" */
.amz-btn {
    display: block;
    background: #FF9900;
    color: #111 !important;
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
    padding: .45rem .5rem;
    text-decoration: none !important;
    transition: background .18s;
    flex-shrink: 0;
}
.amz-btn:hover {
    background: #e68a00;
    text-decoration: none !important;
}

/* =========================================================
   Categoria page — card grid, paginazione, badge sponsored
   ========================================================= */

/* =========================================================
   Sottocategorie — pill bianco/arancione (categoria.php)
   ========================================================= */

.cat-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    padding: 1.4rem 1rem 1.2rem;
    text-align: center;
    text-decoration: none !important;
    color: #333;
    background: #fff;
    border: 1.5px solid rgba(252,153,40,.28);
    box-shadow: 0 2px 12px rgba(252,153,40,.07);
    margin-bottom: 20px;
    min-height: 120px;
    transition: transform .2s ease, box-shadow .2s ease,
                border-color .2s ease, background .2s ease;
    position: relative;
    overflow: hidden;
}
.cat-pill:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(252,153,40,.18);
    border-color: #FC9928;
    background: #fffaf4;
    color: #333;
    text-decoration: none !important;
}
.cat-pill .cat-icon {
    font-size: 2rem;
    margin-bottom: .65rem;
    color: #FC9928;
    line-height: 1;
    transition: transform .2s;
}
.cat-pill:hover .cat-icon { transform: scale(1.12); }
.cat-pill .cat-name {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0;
    color: #555;
    line-height: 1.35;
    transition: color .2s;
}
.cat-pill:hover .cat-name { color: #FC9928; }

/* Margine bottom per le card nella griglia */
.mb-28 { margin-bottom: 28px; }

/* Badge "Sponsorizzato" sovrapposto all'immagine */
.cc-sponsored {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(28,28,50,.75);
    color: #FC9928;
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .18rem .55rem;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

/* ── Paginazione orange ── */
.pagination-cat { gap: 4px; }
.pagination-cat .page-item .page-link {
    color: #FC9928;
    border: 1px solid #e0e0e0;
    border-radius: 8px !important;
    min-width: 40px;
    text-align: center;
    font-weight: 600;
    font-size: .88rem;
    padding: .45rem .75rem;
    transition: background .18s, color .18s, border-color .18s;
    line-height: 1.4;
}
.pagination-cat .page-item .page-link:hover {
    background: #fff3e0;
    border-color: #FC9928;
    color: #e68500;
    text-decoration: none;
}
.pagination-cat .page-item.active .page-link {
    background: linear-gradient(135deg, #FC9928, #e68500);
    border-color: #FC9928;
    color: #fff;
    cursor: default;
    box-shadow: 0 3px 10px rgba(252,153,40,.35);
}
.pagination-cat .page-item.disabled .page-link {
    color: #ccc;
    pointer-events: none;
}

/* ── Sidebar elenco categorie ── */
.sidebar .list-border li a {
    color: #555;
    font-size: .88rem;
    transition: color .15s;
}
.sidebar .list-border li a:hover { color: #FC9928; }

/* ── Amazon DB iframe wrapper — responsive ── */
.amz-db-section { }
.amz-db-wrap {
    overflow-x: auto;          /* su mobile scorre se l'iframe è più largo */
    text-align: center;
    -webkit-overflow-scrolling: touch;
}
.amz-db-wrap iframe {
    max-width: 100%;           /* non supera il contenitore */
    display: inline-block;
    vertical-align: top;
}

/* ── Banner fallback (quando PA-API non è ancora attiva) ── */
.amz-banner {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background: linear-gradient(135deg, #232f3e 0%, #37475a 100%);
    border-radius: 14px;
    padding: 1.2rem 1.5rem;
    text-decoration: none !important;
    color: #fff !important;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 4px 18px rgba(0,0,0,.12);
}
.amz-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0,0,0,.18);
    text-decoration: none !important;
    color: #fff !important;
}
.amz-banner-logo {
    font-size: 2.8rem;
    color: #FF9900;
    flex-shrink: 0;
    line-height: 1;
}
.amz-banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.amz-banner-title {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255,.6);
}
.amz-banner-kw {
    font-size: 1.05rem;
    font-weight: 700;
    color: #FF9900;
    line-height: 1.3;
}
.amz-banner-sub {
    font-size: .78rem;
    color: rgba(255,255,255,.7);
}
.amz-banner-arrow {
    font-size: 1.2rem;
    color: #FF9900;
    flex-shrink: 0;
}
@media (max-width: 480px) {
    .amz-banner { padding: 1rem; gap: .9rem; }
    .amz-banner-logo { font-size: 2.2rem; }
    .amz-banner-kw { font-size: .9rem; }
}