/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jan 27, 2021, 6:30:51 AM
    Author     : LOYNSS
*/

.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 265px;
    overflow-x:auto;
    width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.styled-table thead tr {
    //background-color: #009879;
    background-color: #8B0000;
    color: #ffffff;
    text-align: left;
}
.styled-table th,
.styled-table td {
    padding: 12px 15px;
}
.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}
.styled-table tbody tr.active-row {
    font-weight: bold;
    color: #009879;
}
.exchange-rate-table th,
.exchange-rate-table td {
    text-align: center;
}
.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}
img {
  width: 25px;
  height: 25px;
}
.appdownloadp img{
  width: 65%;
  height: 35%;
}
.appdownloada img{
  width: 60%;
  height: 35%;
}
p.big {
  line-height: 1.4;
  color: #B8860B;
}

/* Gold price board - Maymon Jewelry style */
.gold-price-section {
    position: relative;
    background: radial-gradient(circle at 55% 20%, #8a1919 0%, #5a0e0e 45%, #350707 100%);
    border-radius: 14px;
    padding: 22px 16px 26px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    border: 1px solid #7a1f1f;
}
.gold-price-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #7a1f1f, #d4af37 50%, #7a1f1f);
}
.gold-price-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.gold-price-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.gold-price-logo {
    height: 48px;
    width: auto;
    display: block;
    flex: 0 0 auto;
}
.gold-price-name {
    color: #ffe9a8;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.gold-price-badge {
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 1.2;
    background: linear-gradient(135deg, #ffe9a8, #d8a83a);
    color: #5a2c00;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
.gold-price-divider {
    margin: 0 0 12px;
    border: none;
    border-top: 2px solid rgba(255, 209, 102, 0.5);
}
.gold-price-title {
    text-align: center;
    color: #ffe9a8;
    font-weight: 800;
    font-size: 28px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    margin: 6px 0 4px;
    letter-spacing: .5px;
}
.gold-price-subtitle {
    text-align: center;
    color: #ffe08a;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 14px;
}
.gold-price-section .aa-read-mor-btn {
    color: #ffe08a;
    border-bottom: 1px solid transparent;
    transition: all 0.5s;
}
.gold-price-section .aa-read-mor-btn:hover,
.gold-price-section .aa-read-mor-btn:focus {
    color: #ffffff;
}
.gold-price-section .aa-read-mor-btn span {
    display: inline-block;
    opacity: 0;
    transform: translateX(-200%);
    transition: all 0.5s;
}
.gold-price-section .aa-read-mor-btn:hover span,
.gold-price-section .aa-read-mor-btn:focus span {
    opacity: 1;
    transform: translateX(10%);
}
.gold-price-section .ser-t {
    position: relative;
    width: 70%;
    margin: 10px auto 14px;
    text-align: center;
}
.gold-price-section .ser-t b {
    display: block;
    width: 100%;
    height: 2px;
    background: #ffd166;
    margin-bottom: 4px;
}
.gold-price-section .ser-t b.line {
    width: 70%;
    margin: 0 auto;
}
.gold-price-section .ser-t span {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #7a1616;
}
.gold-price-section .ser-t span i {
    display: block;
    width: 13px;
    height: 13px;
    margin: 0;
    border: 2px solid #ffd166;
    transform: rotate(45deg);
}
.gold-price-group + .gold-price-group {
    margin-top: 18px;
}
.gold-price-group--with-icon {
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.gold-price-group--with-icon .gold-price-icon {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    margin-right: -28px;
}
.gold-price-group--with-icon .gold-price-icon img {
    width: 100px;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 3px rgba(139, 105, 20, 0.35));
}
.gold-price-group--modify .gold-price-icon {
    margin-top: 80px;
    left: 0.6cm;
}
.gold-price-group--bar .gold-price-icon {
    margin-top: 72px;
    left: 0.7cm;
}
.gold-price-group--with-icon .gold-price-table {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.gold-price-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}
.gold-price-table thead th {
    background: #ffffff;
    color: #7c1d1d;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    padding: 10px 8px;
    border: 1px solid #e6d9c2;
}
.gold-price-table thead th:first-child {
    border-radius: 10px 0 0 10px;
    text-align: center;
}
.gold-price-table thead th:last-child {
    border-radius: 0 10px 10px 0;
}
.gold-price-table tbody td {
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    padding: 12px 8px;
    color: #fff;
}
.gold-price-table tbody td.gold-type-col {
    background: linear-gradient(135deg, #9a1c1c, #5f0f0f);
    text-align: center;
    padding-left: 1cm;
    border-radius: 10px 0 0 10px;
}
.gold-price-table tbody td.gold-type-col img {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    margin-right: 6px;
}
.gold-price-table tbody td.gold-buy-col,
.gold-price-table tbody td.gold-sell-col {
    color: #4a1e00;
}
.gold-price-table tbody td.gold-buy-col {
    background: linear-gradient(135deg, #e6c163, #bd8f30);
}
.gold-price-table tbody td.gold-sell-col {
    background: linear-gradient(135deg, #f5da86, #d4aa44);
    border-radius: 0 10px 10px 0;
}
/* Promo banner row (between second table and Read more) */
.gold-banner-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    margin: 18px 0 6px;
}
.gold-banner-item {
    flex: 1 1 0;
    min-width: 80px;
    max-width: 200px;
    line-height: 0;
}
.gold-banner-img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px;
    display: block;
}
@media (max-width: 480px) {
    .gold-price-title {
        font-size: 20px;
    }
    .gold-price-subtitle {
        font-size: 14px;
    }
    .gold-price-table thead th {
        font-size: 15px;
        padding: 8px 4px;
    }
    .gold-price-table tbody td {
        font-size: 12px;
        padding: 8px 4px;
    }
    .gold-price-table tbody td.gold-type-col {
        padding-left: 4px;
    }
    .gold-price-group--with-icon .gold-price-icon img {
        width: 53px;
        height: auto;
    }
    /* On mobile, overlay the icon on top of the table's left edge (out of the
       flex flow) so the table spans the full section width, and keep it
       vertically centered and pinned to the left. */
    .gold-price-group--with-icon {
        display: block;
        position: relative;
    }
    .gold-price-group--with-icon .gold-price-table {
        width: 100%;
    }
    .gold-price-group--with-icon .gold-price-icon {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(calc(-50% + 0.2cm));
        margin: 0;
        z-index: 2;
    }
    /* Push the type-column text right so the overlaid icon doesn't cover it. */
    .gold-price-table tbody td.gold-type-col {
        padding-left: 56px;
    }
    /* Keep the product-banner images in a single even row on mobile
       (no lone wrapped image that auto-scales to a different size). */
    .gold-banner-row {
        flex-wrap: nowrap;
        gap: 5px;
    }
    .gold-banner-item {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }
}