/* =========================================================
   FIDAR AFARIN PISHRO
   PRODUCT DETAILS PAGE
   BLACK / GOLD THEME
   public_html/assets/css/product.css
========================================================= */


/* =========================================================
   PRODUCT HERO
========================================================= */

.product-hero {
    position: relative;
    padding: 145px 20px 55px;
    background:
        linear-gradient(
            135deg,
            #080b0f 0%,
            #10151c 52%,
            #080b0f 100%
        );
    border-bottom: 1px solid rgba(197, 162, 74, 0.16);
    overflow: hidden;
}

.product-hero::before {
    content: "";
    position: absolute;

    top: -180px;
    right: -120px;

    width: 440px;
    height: 440px;

    border-radius: 50%;

    background: rgba(197, 162, 74, 0.06);
    filter: blur(5px);

    pointer-events: none;
}

.product-hero::after {
    content: "";

    position: absolute;

    bottom: -200px;
    left: -120px;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.018);

    pointer-events: none;
}

.product-hero .section-container {
    position: relative;
    z-index: 2;
}

.product-hero-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.product-hero-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;
    margin-bottom: 14px;

    color: #777e87;

    font-size: 0.87rem;
    line-height: 1.7;
}

.product-hero-breadcrumb a {
    color: #9298a0;
    text-decoration: none;

    transition: color 0.25s ease;
}

.product-hero-breadcrumb a:hover {
    color: #c5a24a;
}

.product-hero-title {
    margin: 0;

    color: #ffffff;

    font-size: clamp(1.9rem, 3.5vw, 2.8rem);
    font-weight: 800;
    line-height: 1.45;
}

.product-hero-title span {
    color: #c5a24a;
}


/* =========================================================
   MAIN PRODUCT SECTION
========================================================= */

.product-details-section {
    padding: 65px 20px 85px;

    background:
        linear-gradient(
            180deg,
            #090c11 0%,
            #0c1016 100%
        );
}

.product-details {
    display: grid;

    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(0, 0.98fr);

    align-items: start;

    gap: 42px;
}


/* =========================================================
   PRODUCT GALLERY
========================================================= */

.product-gallery {
    position: relative;
    min-width: 0;
}

.product-main-image-wrapper {
    position: relative;

    width: 100%;
    min-height: 535px;

    overflow: hidden;

    border: 1px solid rgba(197, 162, 74, 0.18);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #11161d,
            #0b0f15
        );

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.32),
        inset 0 0 0 1px rgba(255, 255, 255, 0.015);
}

.product-main-image-wrapper::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(197, 162, 74, 0.5),
            transparent
        );

    pointer-events: none;
}

.product-main-image {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 535px;

    padding: 35px;

    background:
        radial-gradient(
            circle at center,
            rgba(197, 162, 74, 0.075),
            transparent 57%
        ),
        #0c1117;
}

.product-main-image img {
    display: block;

    width: 100%;
    height: 455px;

    object-fit: contain;

    transition: transform 0.3s ease;
}

.product-main-image img:hover {
    transform: scale(1.018);
}


/* =========================================================
   STATUS
========================================================= */

#productStatus {
    position: absolute;

    top: 18px;
    right: 18px;

    z-index: 3;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 36px;

    padding: 6px 13px;

    border: 1px solid rgba(197, 162, 74, 0.30);
    border-radius: 999px;

    background: rgba(10, 14, 19, 0.92);

    color: #d1af59;

    font-size: 0.8rem;
    font-weight: 700;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   THUMBNAILS
========================================================= */

#productThumbnails {
    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(78px, 1fr));

    gap: 10px;

    margin-top: 12px;
}

.product-thumbnail,
#productThumbnails button {
    width: 100%;
    height: 78px;

    padding: 6px;

    border: 1px solid #252c35;
    border-radius: 12px;

    background: #11161d;

    overflow: hidden;
    cursor: pointer;

    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease,
        background 0.22s ease;
}

.product-thumbnail:hover,
#productThumbnails button:hover {
    border-color: rgba(197, 162, 74, 0.55);

    background: #141a21;

    transform: translateY(-1px);
}

.product-thumbnail.active,
#productThumbnails button.active {
    border-color: #c5a24a;

    background: #151a20;

    box-shadow:
        0 0 0 2px rgba(197, 162, 74, 0.11),
        0 8px 18px rgba(0, 0, 0, 0.30);
}

.product-thumbnail img,
#productThumbnails button img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 7px;
}


/* =========================================================
   PRODUCT INFORMATION
========================================================= */

.product-information {
    min-width: 0;

    padding: 34px 34px 32px;

    border: 1px solid #252c34;
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #131920,
            #0f141a
        );

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.27),
        inset 0 0 0 1px rgba(255, 255, 255, 0.012);
}

.product-information-category {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 14px;
    padding: 6px 12px;

    border: 1px solid rgba(197, 162, 74, 0.24);
    border-radius: 999px;

    background: rgba(197, 162, 74, 0.08);

    color: #c8a650;

    font-size: 0.78rem;
    font-weight: 700;
}

.product-information-category::before {
    content: "";

    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: #c5a24a;

    box-shadow:
        0 0 8px rgba(197, 162, 74, 0.4);
}

#productName {
    margin: 0 0 24px;

    color: #ffffff;

    font-size: clamp(1.65rem, 3vw, 2.3rem);

    font-weight: 800;
    line-height: 1.55;
}


/* =========================================================
   INFORMATION ROW
========================================================= */

.product-information-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin-bottom: 25px;
}

.product-information-row > div {
    padding: 14px 15px;

    border: 1px solid #252c34;
    border-radius: 11px;

    background: #10151b;

    transition:
        border-color 0.22s ease,
        background 0.22s ease;
}

.product-information-row > div:hover {
    border-color: rgba(197, 162, 74, 0.25);

    background: #121820;
}

.product-information-row span:first-child {
    display: block;

    margin-bottom: 5px;

    color: #777f89;

    font-size: 0.74rem;
    font-weight: 600;
}

.product-information-row span:last-child {
    display: block;

    color: #e4e6e9;

    font-size: 0.88rem;
    font-weight: 700;

    line-height: 1.7;

    word-break: break-word;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.product-description {
    padding-top: 22px;

    border-top: 1px solid #252c34;
}

.product-description-title {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 0.97rem;
    font-weight: 800;
}

#productDescription {
    margin: 0;

    color: #9298a0;

    font-size: 0.91rem;
    line-height: 2;

    white-space: pre-line;
}


/* =========================================================
   AVAILABILITY
========================================================= */

#productAvailability {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 21px;
    padding: 12px 14px;

    border: 1px solid rgba(62, 133, 83, 0.25);
    border-radius: 11px;

    background: rgba(46, 111, 66, 0.07);
}

#productAvailability::before {
    content: "";

    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #49a968;

    box-shadow:
        0 0 8px rgba(73, 169, 104, 0.35);
}

#productAvailabilityText {
    color: #9bc8aa;

    font-size: 0.84rem;
    font-weight: 700;
}


/* ناموجود */

#productAvailability.unavailable {
    border-color: rgba(196, 76, 76, 0.25);

    background: rgba(196, 76, 76, 0.06);
}

#productAvailability.unavailable::before {
    background: #d75a5a;

    box-shadow:
        0 0 8px rgba(215, 90, 90, 0.30);
}

#productAvailability.unavailable #productAvailabilityText {
    color: #df9a9a;
}


/* =========================================================
   PRODUCT ACTIONS
========================================================= */

.product-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 24px;
}

.product-actions a,
.product-actions button {
    min-height: 47px;

    padding: 0 20px;

    border-radius: 10px;

    font-family: inherit;

    font-size: 0.86rem;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

.product-actions a:hover,
.product-actions button:hover {
    transform: translateY(-1px);
}


/* =========================================================
   INQUIRY BUTTON
========================================================= */

#productInquiryButton {
    border: 1px solid #c5a24a;

    background: linear-gradient(
        135deg,
        #c5a24a,
        #a98732
    );

    color: #ffffff;

    box-shadow:
        0 8px 20px rgba(197, 162, 74, 0.17);
}

#productInquiryButton:hover {
    border-color: #d2b15d;

    background: linear-gradient(
        135deg,
        #d0ae57,
        #b18d36
    );

    box-shadow:
        0 11px 24px rgba(197, 162, 74, 0.23);
}


/* =========================================================
   PDF BUTTON
========================================================= */

#productPdfButton {
    border: 1px solid #303741;

    background: #151a21;

    color: #d1d4d8;
}

#productPdfButton:hover {
    border-color: rgba(197, 162, 74, 0.5);

    background: #191f27;

    color: #d1af59;
}


/* =========================================================
   TECHNICAL SPECIFICATIONS
========================================================= */

.product-specifications-section {
    padding: 0 20px 85px;

    background:
        linear-gradient(
            180deg,
            #0c1016,
            #090c11
        );
}

.product-specifications-section .section-container {
    padding: 30px;

    border: 1px solid #252c34;
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #121820,
            #0e1319
        );

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.22);
}

.product-specifications-section h2 {
    position: relative;

    margin: 0 0 22px;

    padding-right: 14px;

    color: #ffffff;

    font-size: 1.35rem;
    font-weight: 800;
}

.product-specifications-section h2::before {
    content: "";

    position: absolute;

    top: 6px;
    right: 0;

    width: 4px;
    height: calc(100% - 12px);

    border-radius: 5px;

    background: #c5a24a;

    box-shadow:
        0 0 10px rgba(197, 162, 74, 0.25);
}

#productSpecifications {
    display: flex;

    flex-direction: column;

    overflow: hidden;

    border: 1px solid #282f38;

    border-radius: 12px;
}

.product-spec-row,
.product-specification-item {
    display: grid;

    grid-template-columns:
        minmax(180px, 0.75fr)
        minmax(0, 1.7fr);

    border-bottom: 1px solid #282f38;
}

.product-spec-row:last-child,
.product-specification-item:last-child {
    border-bottom: 0;
}

.product-spec-key,
.product-specification-label {
    padding: 14px 16px;

    border-left: 1px solid #282f38;

    background: #151b22;

    color: #aaaeb5;

    font-size: 0.86rem;
    font-weight: 800;

    line-height: 1.75;
}

.product-spec-value,
.product-specification-value {
    padding: 14px 16px;

    background: #10151b;

    color: #898f97;

    font-size: 0.86rem;

    line-height: 1.85;

    word-break: break-word;
}


/* =========================================================
   PDF SECTION
========================================================= */

#productPdfSection {
    padding: 0 20px 85px;

    background:
        #090c11;
}

#productPdfSection .section-container {
    position: relative;

    overflow: hidden;

    padding: 28px 30px;

    border: 1px solid rgba(197, 162, 74, 0.20);
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #171d25,
            #0f141b
        );

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.25);
}

#productPdfSection .section-container::before {
    content: "";

    position: absolute;

    top: -100px;
    left: -100px;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    background:
        rgba(197, 162, 74, 0.05);

    pointer-events: none;
}

.product-pdf-content {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 28px;
}

.product-pdf-content h2,
.product-pdf-content h3 {
    margin: 0 0 7px;

    color: #ffffff;

    font-size: 1.2rem;
    font-weight: 800;
}

.product-pdf-content p {
    margin: 0;

    color: #858c95;

    font-size: 0.86rem;

    line-height: 1.8;
}

#productPdfDownload {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 0 22px;

    border: 1px solid #c5a24a;
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #c5a24a,
            #a98732
        );

    color: #ffffff;

    font-family: inherit;

    font-size: 0.86rem;
    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;

    box-shadow:
        0 8px 20px rgba(197, 162, 74, 0.14);

    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

#productPdfDownload:hover {
    border-color: #d2b15d;

    background:
        linear-gradient(
            135deg,
            #d0ae57,
            #b18d36
        );

    transform: translateY(-1px);

    box-shadow:
        0 11px 25px rgba(197, 162, 74, 0.21);
}


/* =========================================================
   FINAL CTA
========================================================= */

.product-cta {
    padding: 0 20px 90px;

    background: #090c11;
}

.product-cta .section-container {
    position: relative;

    overflow: hidden;

    padding: 42px;

    border: 1px solid rgba(197, 162, 74, 0.17);
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #171d25,
            #0f141a
        );

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.28);
}

.product-cta .section-container::before {
    content: "";

    position: absolute;

    top: -120px;
    left: -80px;

    width: 290px;
    height: 290px;

    border-radius: 50%;

    background:
        rgba(197, 162, 74, 0.06);
}

.product-cta::after {
    content: "";

    position: absolute;
    pointer-events: none;
}

.product-cta-content {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.product-cta-text h2 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 1.55rem;
    font-weight: 800;
}

.product-cta-text p {
    max-width: 700px;

    margin: 0;

    color: #858c95;

    font-size: 0.88rem;

    line-height: 1.9;
}

#productCtaInquiry {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 49px;

    padding: 0 24px;

    border: 1px solid #c5a24a;
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #c5a24a,
            #a98732
        );

    color: #ffffff;

    font-family: inherit;

    font-size: 0.87rem;
    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;

    box-shadow:
        0 9px 22px rgba(197, 162, 74, 0.15);

    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

#productCtaInquiry:hover {
    border-color: #d2b15d;

    background:
        linear-gradient(
            135deg,
            #d0ae57,
            #b18d36
        );

    transform: translateY(-1px);

    box-shadow:
        0 12px 27px rgba(197, 162, 74, 0.22);
}


/* =========================================================
   LOADING / EMPTY / ERROR
========================================================= */

.product-loading,
.product-empty,
.product-error {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 220px;

    padding: 25px;

    border: 1px solid #272e37;
    border-radius: 16px;

    background: #11161d;

    color: #858b94;

    text-align: center;

    font-size: 0.9rem;
    line-height: 1.9;
}

.product-error {
    border-color: rgba(196, 76, 76, 0.25);

    background: rgba(125, 30, 30, 0.08);

    color: #db9292;
}


/* =========================================================
   EMPTY IMAGE
========================================================= */

.product-main-image img[src=""],
.product-main-image img:not([src]) {
    display: none;
}


/* =========================================================
   HIDDEN
========================================================= */

.hidden,
[hidden] {
    display: none !important;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.product-actions a:focus-visible,
.product-actions button:focus-visible,
#productPdfDownload:focus-visible,
#productCtaInquiry:focus-visible,
.product-thumbnail:focus-visible,
#productThumbnails button:focus-visible {
    outline: 3px solid rgba(197, 162, 74, 0.30);

    outline-offset: 3px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .product-details {
        grid-template-columns: 1fr;

        gap: 28px;
    }

    .product-information {
        padding: 30px;
    }

    .product-main-image-wrapper,
    .product-main-image {
        min-height: 500px;
    }

    .product-main-image img {
        height: 425px;
    }
}


@media (max-width: 850px) {

    .product-hero {
        padding-top: 125px;
    }

    .product-details-section {
        padding-top: 50px;
    }

    .product-pdf-content,
    .product-cta-content {
        align-items: flex-start;

        flex-direction: column;
    }

    #productPdfDownload,
    #productCtaInquiry {
        width: 100%;
    }
}


@media (max-width: 650px) {

    .product-hero {
        padding: 110px 12px 45px;
    }

    .product-details-section {
        padding: 40px 12px 65px;
    }

    .product-specifications-section,
    #productPdfSection,
    .product-cta {
        padding-left: 12px;
        padding-right: 12px;
    }

    .product-main-image-wrapper,
    .product-main-image {
        min-height: 350px;

        border-radius: 15px;
    }

    .product-main-image {
        padding: 20px;
    }

    .product-main-image img {
        height: 300px;
    }

    #productStatus {
        top: 13px;
        right: 13px;

        min-height: 33px;

        padding: 5px 11px;

        font-size: 0.73rem;
    }

    #productThumbnails {
        grid-template-columns: repeat(4, 1fr);

        gap: 7px;
    }

    .product-thumbnail,
    #productThumbnails button {
        height: 65px;

        border-radius: 9px;
    }

    .product-information {
        padding: 24px 18px;

        border-radius: 15px;
    }

    .product-information-category {
        margin-bottom: 11px;
    }

    #productName {
        margin-bottom: 19px;

        font-size: 1.48rem;
    }

    .product-information-row {
        grid-template-columns: 1fr;

        gap: 8px;

        margin-bottom: 21px;
    }

    .product-information-row > div {
        padding: 12px 13px;
    }

    #productDescription {
        font-size: 0.87rem;
    }

    .product-actions {
        flex-direction: column;
    }

    .product-actions a,
    .product-actions button {
        width: 100%;
    }

    .product-specifications-section .section-container {
        padding: 23px 17px;

        border-radius: 15px;
    }

    .product-specifications-section h2 {
        font-size: 1.18rem;
    }

    .product-spec-row,
    .product-specification-item {
        grid-template-columns: 1fr;
    }

    .product-spec-key,
    .product-specification-label {
        border-left: 0;

        border-bottom: 1px solid #282f38;
    }

    .product-spec-value,
    .product-specification-value {
        padding-top: 12px;
    }

    #productPdfSection .section-container {
        padding: 24px 18px;

        border-radius: 15px;
    }

    .product-pdf-content h2,
    .product-pdf-content h3 {
        font-size: 1.08rem;
    }

    .product-cta .section-container {
        padding: 29px 19px;

        border-radius: 15px;
    }

    .product-cta-text h2 {
        font-size: 1.3rem;
    }

    .product-cta-text p {
        font-size: 0.84rem;
    }
}


@media (max-width: 420px) {

    .product-main-image-wrapper,
    .product-main-image {
        min-height: 305px;
    }

    .product-main-image img {
        height: 255px;
    }

    .product-thumbnail,
    #productThumbnails button {
        height: 57px;

        padding: 5px;
    }

    .product-information {
        padding: 21px 15px;
    }

    #productName {
        font-size: 1.35rem;
    }

    #productAvailability {
        padding: 11px 12px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .product-main-image img,
    .product-thumbnail,
    #productThumbnails button,
    .product-actions a,
    .product-actions button,
    #productPdfDownload,
    #productCtaInquiry {
        transition: none;
    }
}