/* Product details — clientarea.php?action=productdetails */
.fh-product-details {
    --product-cyan: #67d4ff;
    --product-blue: #347fff;
    --product-panel: #091831;
    --product-deep: #050e20;
    --product-line: rgba(112, 177, 255, .17);
    --product-muted: #8499b8;
    color: var(--product-muted);
    padding: 12px 0 36px;
}

.fh-product-hero {
    align-items: end;
    background:
        radial-gradient(circle at 88% 0, rgba(52, 127, 255, .24), transparent 25rem),
        linear-gradient(145deg, #0d244b, #061126 72%);
    border: 1px solid var(--product-line);
    border-radius: 27px;
    box-shadow: 0 28px 85px rgba(0, 0, 0, .29);
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 17px;
    min-height: 245px;
    overflow: hidden;
    padding: 41px;
    position: relative;
}
.fh-product-hero:after { border: 1px solid rgba(103, 212, 255, .13); border-radius: 50%; content: ''; height: 330px; pointer-events: none; position: absolute; right: -145px; top: -215px; width: 330px; }
.fh-product-hero-copy,
.fh-product-hero-tools { position: relative; z-index: 1; }
.fh-product-kicker { color: var(--product-cyan); display: block; font-size: .63rem; font-weight: 800; letter-spacing: .17em; margin-bottom: 14px; }
.fh-product-hero h2 { color: #f5f9ff !important; font-family: 'Space Grotesk', sans-serif; font-size: clamp(2.4rem, 5vw, 4.2rem); letter-spacing: -.055em; line-height: .98; margin: 0; overflow-wrap: anywhere; }
.fh-product-hero p { color: #8fa6c6; font-size: .8rem; margin: 16px 0 0; overflow-wrap: anywhere; }
.fh-product-hero-tools { align-items: flex-end; display: flex; flex-direction: column; gap: 10px; }
.fh-product-status { align-items: center; background: rgba(103, 212, 255, .09); border: 1px solid rgba(103, 212, 255, .2); border-radius: 999px; color: #c8f1ff; display: inline-flex; font-size: .61rem; font-weight: 800; gap: 7px; padding: 7px 10px; text-transform: uppercase; }
.fh-product-status i { background: var(--product-cyan); border-radius: 50%; box-shadow: 0 0 13px rgba(103, 212, 255, .65); height: 7px; width: 7px; }
.fh-product-status.status-pending i { background: #f1bd63; box-shadow: none; }
.fh-product-status.status-suspended i { background: #f08a68; box-shadow: none; }
.fh-product-status.status-cancelled i,
.fh-product-status.status-terminated i { background: #ef7470; box-shadow: none; }
.fh-product-back { align-items: center; background: rgba(4, 13, 29, .62); border: 1px solid rgba(112, 177, 255, .18); border-radius: 10px; color: #c4d8f0 !important; display: inline-flex; font-size: .66rem; font-weight: 800; gap: 8px; padding: 10px 12px; text-decoration: none !important; }
.fh-product-back:hover { border-color: rgba(103, 212, 255, .4); color: #fff !important; }

.fh-product-details > .alert { background: #0b1b36; border: 1px solid var(--product-line); border-radius: 13px; color: #b7c9df; }
.fh-product-details > .alert-danger { border-color: rgba(239, 116, 112, .3); }
.fh-product-details > .alert-warning { border-color: rgba(241, 189, 99, .3); }

.fh-product-summary {
    background: linear-gradient(150deg, #0a1b37, #061126);
    border: 1px solid var(--product-line) !important;
    border-radius: 22px;
    box-shadow: 0 22px 65px rgba(0, 0, 0, .23);
    overflow: hidden;
}
.fh-product-summary > .card-body { padding: 0; }
.fh-product-summary .product-details > .row { margin: 0; }
.fh-product-summary .product-details > .row > [class*="col-"] { padding: 28px; }
.fh-product-summary .product-details > .row > [class*="col-"] + [class*="col-"] { border-left: 1px solid rgba(112, 177, 255, .12); }
.fh-product-summary .product-status { align-items: stretch; background: rgba(4, 13, 29, .5); border: 1px solid rgba(112, 177, 255, .14); border-radius: 17px; display: flex; flex-direction: column; margin-bottom: 13px !important; overflow: hidden; }
.fh-product-summary .product-icon { align-items: center; display: flex; gap: 15px; padding: 21px; text-align: left !important; }
.fh-product-summary .product-icon .fa-stack { flex: 0 0 auto; }
.fh-product-summary .product-icon .fa-circle { color: rgba(52, 127, 255, .2); }
.fh-product-summary .product-icon .fa-stack-1x { color: var(--product-cyan) !important; }
.fh-product-summary .product-icon small { color: #587397; display: block; font-size: .52rem; font-weight: 800; letter-spacing: .13em; margin-bottom: 5px; }
.fh-product-summary .product-icon h3 { color: #edf7ff !important; font-family: 'Space Grotesk', sans-serif; font-size: 1.12rem; letter-spacing: -.03em; margin: 0; overflow-wrap: anywhere; }
.fh-product-summary .product-icon h4 { color: #7189aa !important; font-size: .68rem; font-weight: 500; margin: 5px 0 0; overflow-wrap: anywhere; }
.fh-product-summary .product-status-text { background: rgba(52, 127, 255, .08); border-top: 1px solid rgba(112, 177, 255, .11); color: #bdeeff; font-size: .61rem; font-weight: 800; padding: 10px 20px; text-align: left; text-transform: uppercase; }

.fh-product-summary .product-actions-wrapper { gap: 8px; margin: 0; }
.fh-product-summary .product-actions-wrapper > div { padding: 0; }
.fh-product-summary .product-actions-wrapper .btn { align-items: center; background: rgba(52, 127, 255, .14) !important; border: 1px solid rgba(103, 212, 255, .2) !important; border-radius: 10px; color: #eaf6ff !important; display: flex; font-size: .66rem; font-weight: 800; gap: 8px; justify-content: center; min-height: 42px; }
.fh-product-summary .product-actions-wrapper .btn-danger { background: rgba(239, 116, 112, .08) !important; border-color: rgba(239, 116, 112, .25) !important; color: #ffc3c0 !important; }
.fh-product-summary .product-actions-wrapper .btn-warning { background: rgba(241, 189, 99, .08) !important; border-color: rgba(241, 189, 99, .25) !important; color: #ffe0a8 !important; }

.fh-product-facts { display: grid; gap: 1px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fh-product-fact { background: rgba(4, 13, 29, .42); border: 1px solid rgba(112, 177, 255, .1); min-height: 82px; padding: 16px; }
.fh-product-fact span { color: #587194; display: block; font-size: .51rem; font-weight: 800; letter-spacing: .09em; margin-bottom: 7px; text-transform: uppercase; }
.fh-product-fact strong { color: #e1edfb; display: block; font-size: .72rem; overflow-wrap: anywhere; }
.fh-product-fact-highlight { background: rgba(52, 127, 255, .1); border-color: rgba(103, 212, 255, .18); }
.fh-product-fact-highlight strong { color: #c8f1ff; }
.fh-product-fact-warning { border-color: rgba(241, 189, 99, .25); }

.fh-product-details .fh-product-nav { border: 1px solid var(--product-line); border-radius: 15px 15px 0 0; gap: 4px; margin-top: 17px; padding: 8px; }
.fh-product-details .fh-product-nav .nav-link { border: 1px solid transparent; border-radius: 9px; color: #7189aa; font-size: .65rem; font-weight: 800; padding: 10px 12px; }
.fh-product-details .fh-product-nav .nav-link i { color: var(--product-cyan); }
.fh-product-details .fh-product-nav .nav-link:hover { background: rgba(52, 127, 255, .07); color: #d9e9fa; }
.fh-product-details .fh-product-nav .nav-link.active { background: rgba(52, 127, 255, .14); border-color: rgba(103, 212, 255, .2); color: #f1f8ff; }
.fh-product-details .responsive-tabs-sm-connector { display: none; }
.fh-product-details .fh-product-tab-content { background: linear-gradient(150deg, #091a35, #061126) !important; border: 1px solid var(--product-line); border-radius: 0 0 19px 19px; color: #8499b8; min-height: 170px; padding: 27px; }
.fh-product-details .fh-product-tab-content .row { border-bottom: 1px solid rgba(112, 177, 255, .08); margin: 0; padding: 12px 0; }
.fh-product-details .fh-product-tab-content .row:last-child { border-bottom: 0; }
.fh-product-details .fh-product-tab-content strong { color: #dce9f7; }
.fh-product-details .fh-product-tab-content .module-client-area { color: inherit; }

.fh-product-details .fh-product-main-tabs > .tab-pane > h3 { color: #eff8ff !important; font-family: 'Space Grotesk', sans-serif; letter-spacing: -.03em; }
.fh-product-details .fh-product-main-tabs > .tab-pane > .card,
.fh-product-details #tabAddons .card,
.fh-product-details #tabChangepw .card { background: linear-gradient(150deg, #0a1b37, #061126) !important; border: 1px solid var(--product-line) !important; border-radius: 18px; color: #8499b8; overflow: hidden; }
.fh-product-details #tabAddons .card-header,
.fh-product-details #tabChangepw .card-header { background: rgba(52, 127, 255, .06); border-color: rgba(112, 177, 255, .12); color: #edf7ff; }
.fh-product-details #tabAddons .card-footer { background: rgba(4, 13, 29, .45); border-color: rgba(112, 177, 255, .1); }
.fh-product-details #tabDownloads .col-10 { background: linear-gradient(150deg, #0a1b37, #061126); border: 1px solid var(--product-line); border-radius: 15px; margin-bottom: 12px; padding: 20px; }
.fh-product-details #tabDownloads h4,
.fh-product-details #tabChangepw h3 { color: #edf7ff !important; }
.fh-product-details .form-control { background: #050e20; border: 1px solid rgba(112, 177, 255, .18); border-radius: 9px; color: #e7f3ff; }
.fh-product-details .form-control:focus { border-color: rgba(103, 212, 255, .45); box-shadow: 0 0 0 3px rgba(52, 127, 255, .1); }
.fh-product-details .btn-default,
.fh-product-details .btn-primary { background: rgba(52, 127, 255, .15) !important; border: 1px solid rgba(103, 212, 255, .22) !important; border-radius: 9px; color: #e8f5ff !important; }

@media (max-width: 991.98px) {
    .fh-product-summary .product-details > .row > [class*="col-"] + [class*="col-"] { border-left: 0; border-top: 1px solid rgba(112, 177, 255, .12); }
}

@media (max-width: 767.98px) {
    .fh-product-hero { align-items: start; grid-template-columns: 1fr; min-height: 0; padding: 30px 23px; }
    .fh-product-hero-tools { align-items: flex-start; }
    .fh-product-summary .product-details > .row > [class*="col-"] { padding: 21px; }
    .fh-product-facts { grid-template-columns: 1fr; }
    .fh-product-details .fh-product-nav { border-radius: 14px; flex-direction: column; }
    .fh-product-details .fh-product-tab-content { border-radius: 14px; margin-top: 8px; padding: 20px 16px; }
    .fh-product-details .fh-product-tab-content .text-right,
    .fh-product-details .fh-product-tab-content .text-left { text-align: left !important; }
}
