.offer-table--template-three .casino-table {
width: 100%; margin: 20px auto;
border-collapse: collapse;
background: #fff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.offer-table--template-three .casino-table tr {
border-bottom: 8px solid #f5f5f5;
border: 1px solid #e8e8e8;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
display:grid;
grid-template-columns: 160px 1fr 1fr 180px;
align-items: center;
}
.offer-table--template-three .casino-table tr:last-child {
border-bottom: none;
}
.offer-table--template-three .casino-table td {
padding: 20px;
vertical-align: middle;
}
.offer-table--template-three .logo-info img {
width: 120px;
height: auto;
display: block;
border-radius: 4px;
object-fit: contain;
margin-bottom: 8px;
}
.offer-table--template-three .logo-info span.info-section {
display: flex;
flex-direction: column;
row-gap: 5px;
}
.offer-table--template-three .logo-info span.info-section .rating-score {
font-size: 13px;
font-weight: 500;
color: #ffffff;
padding: 5px;
border-radius: 5px;
}
.offer-table--template-three .logo-info .logo-info-inner-content {
display: flex;
align-items: center;
}
.offer-table--template-three .logo-info .rank {
color: #666;
font-size: 13px;
font-weight: 600;
display: block;
margin-right: 6px;
}
.offer-table--template-three .logo-info .casino-name {
font-size: 18px;
font-weight: 500;
color: #1a1a1a;
display: block;
} .offer-table--template-three .repeater-field-col .section-label {
color: #888;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
display: block;
margin-bottom: 8px;
}
.offer-table--template-three .repeater-field-col .repeater-item {
font-size: 16px;
font-weight: 500;
color: #1a1a1a;
line-height: 1.4;
margin-bottom: 8px;
display: block;
}
.offer-table--template-three .promotions-col .section-label {
color: #888;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
display: block;
margin-bottom: 8px;
}
.offer-table--template-three .promotions-col .promo-text {
font-size: 18px;
font-weight: 700;
color: #1a1a1a;
line-height: 1.4; display: block;
}
.offer-table--template-three .promotions-col .info-section {
display: inline-block;
vertical-align: top;
margin-right: 40px;
display: flex;
flex-direction: column-reverse;
}
.offer-table--template-three .promotions-col .coin-icon {
width: 24px;
height: 24px;
border-radius: 50%;
display: inline-block;
margin-right: 6px;
vertical-align: middle;
object-fit: cover;
}
.offer-table--template-three .promotions-col .star-rating {
color: #f5a623;
font-size: 18px;
letter-spacing: 2px;
display: block;
margin-top: 8px;
}
.offer-table--template-three .promotions-col .rating-score {
color: #fff;
font-size: 15px;
font-weight: 700;
display: block;
margin-top: 4px;
width:fit-content;
padding: 5px 10px;
border-radius: 10px;
} .offer-table--template-three .buttons-col {
text-align: right;
}
.offer-table--template-three .buttons-col a {
width:100%;
text-align: center;
display: inline-flex;
justify-content: center;
}
.offer-table--template-three .buttons-col .btn-go {
background: #6c2cff;
color: #fff;
padding: 14px 14px;
text-decoration: none;
border-radius: 8px;
font-weight: 700;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
letter-spacing: 0.3px;
box-shadow: 0 2px 8px rgba(108, 44, 255, 0.2);
}
.offer-table--template-three .buttons-col .btn-go:hover {
background: #5a24d9;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(108, 44, 255, 0.3);
}
.offer-table--template-three .buttons-col .btn-review {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
font-size: 14px;
font-weight: 700;
color: #6c2cff;
text-decoration: none;
transition: all 0.3s ease;
padding: 14px 14px;
border: 1px solid #6c2cff;
border-radius: 8px;
}
.offer-table--template-three .buttons-col .btn-review:hover { transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(108, 44, 255, 0.2);
} .offer-table--template-three .buttons-col .btn-icon {
width: 16px;
height: 16px;
object-fit: contain;
flex-shrink: 0;
}
.offer-table--template-three .buttons-col .btn-go .btn-icon {
filter: brightness(0) invert(1);
}
#myopnBtn {display: none;} @media (min-width: 601px) and (max-width: 900px) {
.offer-table--template-three .casino-table {
display: grid;
flex-wrap: wrap;
gap: 16px;
border-collapse: separate;
}
.offer-table--template-three .repeater-field-col {display: none !important;}
.offer-table--template-three .has-sidebar .repeater-field-col {display: block !important;}
.offer-table--template-three .has-sidebar .casino-table .promotions-col {width:100% !important}
.offer-table--template-three .repeater-field-col.active {display:block !important;}
.offer-table--template-three .has-sidebar .casino-table .logo-info, .offer-table--template-three .has-sidebar .casino-table .buttons-col {width:100%;}
#myopnBtn {
display: block;
background:none;
text-decoration: underline;
color:blue;
font-size: 13px;
width:fit-content;
}
#myopnBtn:active, #myopnBtn:hover {
box-shadow: none !important;
}
.info-section.dk-only .open-btn {
display: flex;
} .offer-table--template-three .casino-table tr {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 0 1 calc(50% - 8px);
border: 1px solid #e0e0e0;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
overflow: hidden;
}
.offer-table--template-three .casino-table td {
display: block;
width: 100%;
padding: 10px;
}
.offer-table--template-three .casino-table .logo-info {
width: 160px;
text-align: left; padding-bottom: 16px;
}
.offer-table--template-three .casino-table .logo-info img {
display: block;
margin-bottom: 8px;
}
.offer-table--template-three .casino-table .logo-info .rank,
.offer-table--template-three .casino-table .logo-info .casino-name {
display: block;
}
.offer-table--template-three .casino-table .promotions-col {
width: calc(100% - 320px);
}
.offer-table--template-three .casino-table .promotions-col .info-section {
display: block;
margin-right: 0;
margin-bottom: 16px;
display: flex;
flex-direction: column-reverse;
}
.offer-table--template-three .casino-table .repeater-field-col {
width: 100%;
border-top: 1px solid #f0f0f0;
padding-top: 16px;
order:4;
}
.offer-table--template-three .casino-table .buttons-col {
width: 160px;
text-align: center;
padding-top: 8px;
}
.offer-table--template-three .casino-table .buttons-col .btn-go,
.offer-table--template-three .casino-table .buttons-col .btn-review {
width: 100%;
display: flex;
justify-content: center;
text-align: center;
box-sizing: border-box;
}
} .template-three-campaign-compact-table.has-sidebar .offer-table--template-three .casino-table {
display: flex;
flex-wrap: wrap;
gap: 16px;
border-collapse: separate;
}
.template-three-campaign-compact-table.has-sidebar .offer-table--template-three .casino-table tr {
display: flex;
flex-direction: column;
flex: 0 1 calc(50% - 8px);
border: 1px solid #e0e0e0;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
overflow: hidden;
}
.template-three-campaign-compact-table.has-sidebar .offer-table--template-three .casino-table td {
display: block;
width: 100%;
padding: 20px;
}
.template-three-campaign-compact-table.has-sidebar .offer-table--template-three .casino-table .logo-info {
width: 100%;
text-align: left;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 16px;
}
.template-three-campaign-compact-table.has-sidebar .offer-table--template-three .casino-table .logo-info img {
display: block;
margin-bottom: 8px;
}
.template-three-campaign-compact-table.has-sidebar .offer-table--template-three .casino-table .logo-info .rank,
.template-three-campaign-compact-table.has-sidebar .offer-table--template-three .casino-table .logo-info .casino-name {
display: block;
}
.template-three-campaign-compact-table.has-sidebar .offer-table--template-three .casino-table .promotions-col {
width: 100%;
}
.template-three-campaign-compact-table.has-sidebar .offer-table--template-three .casino-table .promotions-col .info-section {
display: block;
margin-right: 0;
margin-bottom: 16px;
}
.template-three-campaign-compact-table.has-sidebar .offer-table--template-three .casino-table .repeater-field-col {
width: 100%;
border-top: 1px solid #f0f0f0;
padding-top: 16px;
}
.template-three-campaign-compact-table.has-sidebar .offer-table--template-three .casino-table .buttons-col {
width: 100%;
text-align: center;
padding-top: 8px;
}
.template-three-campaign-compact-table.has-sidebar .offer-table--template-three .casino-table .buttons-col .btn-go,
.template-three-campaign-compact-table.has-sidebar .offer-table--template-three .casino-table .buttons-col .btn-review {
width: 100%;
display: flex;
justify-content: center;
text-align: center;
box-sizing: border-box;
} @media (max-width: 600px) {
.offer-table--template-three .casino-table {
display: flex;
flex-direction: column;
gap: 12px;
border-collapse: separate;
margin: 12px auto;
}
.offer-table--template-three .casino-table tr {
display: flex;
flex-direction: column;
width: 100%;
border: 1px solid #e0e0e0;
border-radius: 12px;
background: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.offer-table--template-three .casino-table td {
display: block;
width: 100%;
padding: 16px;
}
.offer-table--template-three .casino-table .logo-info {
width: 100%;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 14px;
} .offer-table--template-three .casino-table .logo-info .rank,
.offer-table--template-three .casino-table .logo-info .casino-name {
display: inline;
}
.offer-table--template-three .casino-table .logo-info .rank {
margin-right: 8px;
}
.offer-table--template-three .casino-table .promotions-col {
width: 100%;
}
.offer-table--template-three .casino-table .promotions-col .promo-text {
font-size: 16px;
}
.offer-table--template-three .casino-table .promotions-col .info-section {
display: block;
margin-right: 0;
margin-bottom: 16px;
}
.offer-table--template-three .casino-table .repeater-field-col {
width: 100%;
border-top: 1px solid #f0f0f0;
padding-top: 16px;
}
.offer-table--template-three .casino-table .buttons-col {
width: 100%;
text-align: center;
padding-top: 8px;
}
.offer-table--template-three .casino-table .buttons-col .btn-go,
.offer-table--template-three .casino-table .buttons-col .btn-review {
width: 100%;
display: flex;
justify-content: center;
text-align: center;
}
}
.offer-table--template-three .has-sidebar .casino-table tr {
display:grid;
grid-template-columns: 160px 1fr 180px;
align-items: center;
}
.offer-table--template-three .has-sidebar .promotions-col .info-section.dk-only{
display: none;
}
.offer-table--template-three .has-sidebar .star-rating {
letter-spacing: 0 !important;
}
.offer-table--template-three .has-sidebar .casino-table {
display: grid;
}
.offer-table--template-three .has-sidebar .casino-table td.repeater-field-col {
display: none !important;
}
.offer-table--template-three .has-sidebar .promotions-col .promo-text {
margin-bottom: 0 !important;
}
.offer-table--template-three .has-sidebar .casino-table .repeater-field-col {
border-top:none;
}
.offer-table--template-three .has-sidebar .casino-table .logo-info {
border-bottom: none;
}
.offer-table--template-three .has-sidebar .repeater-field-col .repeater-item {
font-size: 14px;
}
.offer-table--template-three .has-sidebar .logo-info span.info-section .rating-score {
width:fit-content;
padding: 5px 10px;
border-radius: 0px 20px 20px 20px;
}
.offer-table--template-three .has-sidebar .casino-table .logo-info .dk-sdbar-only {margin-top:10px;}
.offer-table--template-three .has-sidebar .casino-table .logo-info .dk-sdbar-only .info-section {
display: flex;
flex-direction: column-reverse;
}
.offer-table--template-three .has-sidebar .casino-table tr {
margin-bottom: 10px;
}
@media (max-width:786px) {
.offer-table--template-three .has-sidebar .casino-table tr {
grid-template-columns: 1fr;
}
.offer-table--template-three .has-sidebar .casino-table .logo-info {
display: flex;
justify-content: space-between;
align-items: self-start;
}
.offer-table--template-three .has-sidebar .logo-info span.info-section .rating-score {
font-size: 14px;
border-radius: 10px;
}
.offer-table--template-three .has-sidebar .casino-table .logo-info .dk-sdbar-only .info-section {
display: flex;
flex-direction: row-reverse;
align-items: center;
gap: 5px;
}
.offer-table--template-three .has-sidebar .casino-table .logo-info .dk-sdbar-only .info-section {
display: flex;
flex-direction: column-reverse;
align-items: end;
}
.offer-table--template-three .has-sidebar .casino-table tbody {
display: grid;
grid-template-columns: 1fr 1fr;
gap:10px;
}
}
@media (max-width:650px) {
.offer-table--template-three .has-sidebar .casino-table tbody {
display: grid;
grid-template-columns: 1fr;
gap:10px;
}
}