:root {
    --primary-blue: #443DF6;
    --primary-green: #0CAF60;
    --border-radius: 24px;
    --card-border-radius: 32px;
    --button-border-radius: 50px;
}

.tradinga2z-market-widget {
    max-width: 100%;
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.market-chart {
    width: 100%;
    height: 400px;
    margin-bottom: 15px;
}

.market-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 4px;
}

.symbol {
    font-weight: bold;
    font-size: 1.2em;
}

.price {
    font-size: 1.1em;
}

.change {
    padding: 3px 8px;
    border-radius: 3px;
}

.change.positive {
    background: #e6f4ea;
    color: #137333;
}

.change.negative {
    background: #fce8e6;
    color: #c5221f;
}

.market-page {
    margin: 0 auto;
    padding: 20px;
}

/* Header Styles */
.market-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.market-page:not(.forex) .market-image img {
    width: 350px;
    height: 350px;
    border-radius: 50%;
    object-fit: cover;
    -webkit-user-drag: none;
}

.market-type {
    display: inline-block;
    color: #443DF6;
    font-size: 14px;
    margin-bottom: 10px;
    text-transform: capitalize;
    letter-spacing: 0.05em;
    background: #ECECFE;
    padding: 4px 8px;
    border-radius: 3px;
}

.market-title-section {
    display: flex;
    align-items: baseline;
    gap: 35px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    flex-direction: column;
}

.market-title-section h1 {
    font-size: 46px;
    line-height: 50px;
    margin: 0;
    font-weight: bold;
}

.market-symbol {
    font-size: 32px;
    line-height: 40px;
    font-weight: bold;
    color: #1C222B;
}

.market-price {
    display: flex;
    align-items: self-start;
    gap: 15px;
    flex-direction: column;
}

.price-change {
    border-radius: 4px;
    font-size: 20px;
    font-weight: bold;
}

/* Navigation */
.market-navigation {
    margin-bottom: 30px;
}

.market-navigation ul {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    overflow-x: auto;
}

.market-navigation a {
    color: #6b7280;
    text-decoration: none;
    padding: 5px 0;
    display: block;
    font-weight: 500;
    position: relative;
}

.market-navigation li.active a {
    color: #303030;
}

.market-navigation li.active a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #303030;
}

.market-actions .action-button {
    background: #2D3643;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.market-actions .action-button:hover {
    background: var(--thim-body-primary-color,#ffb606);
}
.action-button .icon {
    width: 20px;
    height: 20px;
    display: inline-block;
}

/* Content Layout */
.market-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 30px;
    margin-bottom: 20px;
}

.market-main-content {
    min-width: 0;
}

.market-section {
    margin-bottom: 30px;
}

.market-section h2 {
    margin: 0 0 20px;
    padding-bottom: 5px;
    font-size: 24px;
}

.current-price-wrapper {
    font-size: 32px;
    font-weight: bold;
}

/* Details Grid */
.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.detail-item {
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

/* Timeline */
.history-timeline {
    position: relative;
    padding-left: 30px;
}

.timeline-item {
    position: relative;
    padding-bottom: 30px;
    padding-left: 20px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e5e7eb;
}

.timeline-item::after {
    content: '';
    position: absolute;
    left: -6px;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2271b1;
}

/* Pros & Cons */
.pros-cons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.detail-item, .pros, .cons {
    background: #F9FAFB;
    padding: 20px;
    border-radius: 8px;
}

.pros h3, .cons h3 {
    margin-top: 0;
    margin-bottom: 15px;
}

.pros ul, .cons ul {
    margin: 0;
    padding-left: 20px;
}

.pros li, .cons li {
    margin-bottom: 10px;
}

.faq-item {
    margin-bottom: 20px;
    background: #F9FAFB;
    border-radius: 10px;
}


.faq-question {
    cursor: pointer;
    font-weight: 500;
    color: #1a202c;
    padding: 1.25rem 1.75rem;
    display: flex;
    background-color: #F9FAFB;
    border-radius: 12px;
    position: relative;
    justify-content: space-between;
    user-select: none;
}

.faq-icon {
    font-size: 1.25rem;
    font-weight: 300;
    margin-left: 1rem;
    transition: transform 0.3s ease;
}

.faq-answer {
    display: block;
    padding: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background-color: #F9FAFB;
    border-radius: 12px;
    transition: padding 0.1s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-answer {
    padding: 1.25rem 1.75rem;
    max-height: 1000px;
    opacity: 1;
}

/* Sidebar */
.market-sidebar {
    position: sticky;
    top: 30px;
    align-self: start;
}

.brokers-section {
    padding: 20px 0;
}

.broker-item img {
    width: 50px;
    height: 50px;
    border-radius: 4px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .market-content {
        grid-template-columns: 1fr;
    }

    .market-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .pros-cons-grid {
        grid-template-columns: 1fr;
    }

    .market-navigation ul {
        gap: 20px;
    }

    .market-navigation ul li {
        flex: 0 0 auto;
        padding-right: 20px;
    }

    .market-image img {
        width: 125px;
        height: 125px;
    }

    .market-page:not(.forex) .market-image img {
        width: 120px;
        height: 120px;
    }
}

.detail-label {
    font-weight: bold;
}

.pros-cons-grid li {
    list-style: disc;
}

@media (max-width: 480px) {
    .market-title-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .market-navigation {
        overflow-x: auto;
    }

    .market-navigation ul {
        padding: 0 15px;
        gap: 15px;
    }
}

/* Add these styles */
.market-stats {
    display: flex;
    gap: 20px;
    padding: 15px;
    border-radius: 12px;
    background: #F9FAFB;
    flex-direction: column;
}

.market-img {
    border-radius: 50px;
}

.stat-item > .market-img {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.title-info div:first-child {
    font-size: 24px;
    color: #444;
}

.title-info {
    font-weight: bold;
}

.stat-icon {
    display: flex;
    align-items: center;
}

.stat-item {
    display: flex;
    gap: 5px;
}

.stat-label {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: auto;
}

.stat-value {
    font-size: 16px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .market-stats {
        flex-wrap: wrap;
    }
}

.chart-container {
    border-radius: 4px;
    min-height: 500px;
    overflow: hidden;
    background: #FCFCFD;
    padding: 20px;
    position: relative;
}


.chart-container .header {
    padding: 12px 0;
    border-bottom: 1px solid #edf2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FCFCFD;
}

#chart-container {
    position: relative;
}

.timeframes {
    display: flex;
    gap: 16px;
}

.timeframes .timeframe-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 20px;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    color: #4a5568;
    transition: all 0.2s;
}

.timeframe-btn:hover {
    background: #f7fafc;
}

.timeframe-btn.active {
    background: #edf2f7;
    color: #2d3748;
}

.controls {
    display: flex;
    gap: 16px;
    align-items: center;
}

.controls .control-btn {
    padding: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4a5568;
    transition: all 0.2s;
}

.control-btn:hover {
    background: #f7fafc;
    color: #2d3748;
}

.view-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #f7fafc;
    border-radius: 8px;
    cursor: pointer;
    color: #4a5568;
    font-size: 14px;
}


.tradingview-widget-container {
    height: 100%;
}

/* Fullscreen styles */
.chart-container.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: white;
}

.chart-container iframe {
    min-height: 500px;
    max-height: 500px;
}
.symbol-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #4a5568;
}

.symbol-price {
    font-weight: 500;
    color: #2d3748;
}

.market-price .change-positive {
    color: #03A66D;
}

.market-price .change-negative {
    color: #FF6838;
}

.price-change.change-positive:after,
.price-change.change-negative:after{
    display: inline-block;
    content: '';
    width: 20px;
    height: 15px;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.price-change.change-negative:after {
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='10' viewBox='0 0 15 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.9933 9.1975C14.9917 9.2575 14.9742 9.31417 14.9583 9.37167C14.9458 9.42 14.94 9.46917 14.9192 9.51333C14.9 9.55667 14.8675 9.59167 14.8392 9.63167C14.8042 9.6825 14.7725 9.73333 14.7275 9.775C14.72 9.7825 14.7167 9.7925 14.7083 9.79917C14.6783 9.825 14.6417 9.83417 14.6092 9.855C14.5592 9.8875 14.51 9.92083 14.4533 9.9425C14.3975 9.9625 14.3425 9.9675 14.285 9.97583C14.245 9.98167 14.2092 10 14.1667 10L10.0001 10C9.53932 10 9.16683 9.62667 9.16683 9.16667C9.16683 8.70667 9.53932 8.33333 10.0001 8.33333L12.3551 8.33333L8.99183 4.41L5.4286 6.5475C5.07611 6.76083 4.62279 6.6825 4.35946 6.36667L0.192908 1.36667C-0.10125 1.01333 -0.0537515 0.487499 0.299572 0.193332C0.456234 0.0633325 0.644563 -1.13574e-06 0.832891 -1.11928e-06C1.07205 -1.09837e-06 1.30871 0.101665 1.47371 0.299999L5.1836 4.75167L8.73767 2.61833C9.08683 2.40917 9.53515 2.4825 9.79931 2.79083L13.3334 6.91417L13.3334 5C13.3334 4.54 13.7059 4.16667 14.1667 4.16667C14.6275 4.16667 15 4.54 15 5L15 9.16667C15 9.1775 14.9942 9.18667 14.9933 9.1975' fill='%23FF6838'/%3E%3C/svg%3E%0A");
}

.price-change.change-positive:after {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4937 0.8025C15.4921 0.7425 15.4746 0.685833 15.4587 0.628333C15.4462 0.58 15.4404 0.530833 15.4196 0.486667C15.4004 0.443333 15.3679 0.408333 15.3396 0.368333C15.3046 0.3175 15.2729 0.266667 15.2279 0.225C15.2204 0.2175 15.2171 0.2075 15.2087 0.200833C15.1787 0.175 15.1421 0.165833 15.1096 0.145C15.0596 0.1125 15.0104 0.0791667 14.9537 0.0575C14.8979 0.0375 14.8429 0.0325 14.7854 0.0241667C14.7454 0.0183333 14.7096 0 14.6671 0H10.5004C10.0396 0 9.66708 0.373333 9.66708 0.833333C9.66708 1.29333 10.0396 1.66667 10.5004 1.66667H12.8554L9.49208 5.59L5.92875 3.4525C5.57625 3.23917 5.12291 3.3175 4.85958 3.63333L0.692913 8.63333C0.398746 8.98667 0.446246 9.5125 0.79958 9.80667C0.956246 9.93667 1.14458 10 1.33291 10C1.57208 10 1.80875 9.89833 1.97375 9.7L5.68375 5.24833L9.23791 7.38167C9.58708 7.59083 10.0354 7.5175 10.2996 7.20917L13.8337 3.08583V5C13.8337 5.46 14.2062 5.83333 14.6671 5.83333C15.1279 5.83333 15.5004 5.46 15.5004 5V0.833333C15.5004 0.8225 15.4946 0.813333 15.4937 0.8025' fill='%2303A66D'/%3E%3C/svg%3E%0A");
}





/* ... (keep all your existing styles) ... */

.chart-type-menu {
    position: absolute;
    background: white;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 1000;
}

.chart-type-menu.active {
    display: block;
}

.chart-type-option {
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.chart-type-option:hover {
    background: #f7fafc;
}

.chart-info-panel {
    display: flex;
    gap: 16px;
    align-items: center;
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #edf2f7;
    font-size: 12px;
    z-index: 3;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.chart-info-symbol {
    font-weight: 600;
    color: #2d3748;
    border-right: 1px solid #edf2f7;
    padding-right: 16px;
}

.chart-info-data {
    display: flex;
    gap: 16px;
}

.chart-info-item {
    display: flex;
    gap: 2px;
    align-items: center;
}

.chart-info-label {
    color: #718096;
    font-size: 11px;
    text-transform: uppercase;
}

.chart-info-value {
    color: #2d3748;
}



.broker-filters {
    display: flex;
    gap: 4px;
    margin: 20px 0;
}

.broker-list .broker-filters button {
    padding: 8px 16px;
    border-radius: 20px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    background: transparent;
    color: #242528;
    border: 1px solid #D7DFE9;
}

.broker-filters button.active {
    background: var(--primary-blue);;
    color: white;
}

.broker-item {
    display: flex;
    align-items: center;
    padding: 12px;
    gap: 5px;
    margin: 12px 0;
    border-radius: 8px;
    transition: all 0.2s;
}

.broker-item:hover {
    background: #F9FAFB;
}

.broker-item .broker-logo {
    object-fit: contain;
}

.broker-item .broker-name {
    font-size: 16px;
}

.hexagon-mask {
    mask: url("data:image/svg+xml,%3Csvg width='47' height='48' viewBox='0 0 47 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.0858 1.0313C21.6138 -0.343768 24.6664 -0.343768 27.1943 1.0313L41.8497 9.00307C44.5803 10.4884 46.2801 13.348 46.2801 16.4565V31.5435C46.2801 34.652 44.5803 37.5116 41.8497 38.9969L27.1943 46.9687C24.6664 48.3438 21.6138 48.3438 19.0858 46.9687L4.43044 38.9969C1.69981 37.5116 0 34.652 0 31.5435L0 16.4565C0 13.348 1.69981 10.4884 4.43043 9.00307L19.0858 1.0313Z' fill='white'/%3E%3C/svg%3E%0A");
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='47' height='48' viewBox='0 0 47 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.0858 1.0313C21.6138 -0.343768 24.6664 -0.343768 27.1943 1.0313L41.8497 9.00307C44.5803 10.4884 46.2801 13.348 46.2801 16.4565V31.5435C46.2801 34.652 44.5803 37.5116 41.8497 38.9969L27.1943 46.9687C24.6664 48.3438 21.6138 48.3438 19.0858 46.9687L4.43044 38.9969C1.69981 37.5116 0 34.652 0 31.5435L0 16.4565C0 13.348 1.69981 10.4884 4.43043 9.00307L19.0858 1.0313Z' fill='white'/%3E%3C/svg%3E%0A");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.brokers-section .btn {
    display: block;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    border: none;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
}

.brokers-section .btn-outline-secondary {
    background: transparent;
    border: 2px solid var(--primary-blue);
    color: var(--primary-blue);
}

.broker-rating {
    margin-right: auto;
    background: var(--primary-blue);
    color: white;
    padding: 2px 8px;
    border-radius: 25px;
    font-size: 12px;
}

.link-icon {
    width: 25px;
    height: 25px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.875 3.125L16.25 3.125C16.4158 3.125 16.5747 3.19085 16.6919 3.30806C16.8092 3.42527 16.875 3.58424 16.875 3.75V13.125C16.875 13.4702 16.5952 13.75 16.25 13.75C15.9048 13.75 15.625 13.4702 15.625 13.125V5.25888L4.19194 16.6919C3.94786 16.936 3.55214 16.936 3.30806 16.6919C3.06398 16.4479 3.06398 16.0521 3.30806 15.8081L14.7411 4.375L6.875 4.375C6.52982 4.375 6.25 4.09518 6.25 3.75C6.25 3.40482 6.52982 3.125 6.875 3.125Z' fill='%23443DF6'/%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
    padding: 15px;
    border: .1rem solid #443DF6;
    border-radius: 25px;
}

  /* Modal Styles */
  .share-modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.share-modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    border-radius: 10px;
    width: 80%;
    max-width: 500px;
}

.share-modal-close {
    color: #aaa;
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    top: 0;
    right: 10px;
}

.share-modal-close:hover,
.share-modal-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.social-btn {
    padding: 10px;
    margin: 5px;
    background-color: #4267B2; /* Facebook Blue */
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.social-btn:hover {
    background-color: #365899;
}

.copy-link {
    margin-top: 20px;
}

.copy-link input {
    width: calc(100% - 100px);
    padding: 10px;
}

.copy-link button {
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.copy-link button:hover {
    background-color: #45a049;
}