/* Color Modal Styles - Comprehensive for All Three Modal Types */
#metallicModal .modal-dialog,
#ralModal .modal-dialog,
#farrowBallModal .modal-dialog {
    max-width: 900px;
    margin: 30px auto;
}

#metallicModal .modal-content,
#ralModal .modal-content,
#farrowBallModal .modal-content {
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

#metallicModal .modal-body,
#ralModal .modal-body,
#farrowBallModal .modal-body {
    padding: 20px;
}

#metallicModal .modal-header,
#ralModal .modal-header,
#farrowBallModal .modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 15px 20px;
    border-radius: 8px 8px 0 0;
}

#metallicModal .modal-title,
#ralModal .modal-title,
#farrowBallModal .modal-title {
    font-weight: 600;
    color: #333;
    font-size: 18px;
    margin: 0;
}

#metallicModal .close,
#ralModal .close,
#farrowBallModal .close {
    font-size: 24px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

#metallicModal .close:hover,
#ralModal .close:hover,
#farrowBallModal .close:hover {
    opacity: 1;
}

/* ===== PALM METALLIC FINISHES - MATCHING OLD WEBSITE LAYOUT ===== */
/* Palm container styles - matching old website structure */
.finish_container.palm {
    display: inline-block;
    margin: 0;
    text-align: center;
    vertical-align: top;
    width: 170px;
}

/* Palm colour boxes - using old website spritesheet positions */
.colour_box.palm001,
.colour_box.palm002,
.colour_box.palm003,
.colour_box.palm004,
.colour_box.palm005,
.colour_box.palm006,
.colour_box.palm007,
.colour_box.palm008,
.colour_box.palm009,
.colour_box.palm010 {
    width: 162px !important;
    height: 181px !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
    background-image: url('https://budgetradiators.co.uk/image/catalog/metallic-finishes/spritesheet.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

#MetallicRange {
    text-align: center;
    padding: 20px 0;
}

#MetallicRange .metallic-row {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

#MetallicRange .metallic-row:last-child {
    margin-bottom: 0;
}

/* Remove img elements since we're using background images */
.colour_box.palm001 img,
.colour_box.palm002 img,
.colour_box.palm003 img,
.colour_box.palm004 img,
.colour_box.palm005 img,
.colour_box.palm006 img,
.colour_box.palm007 img,
.colour_box.palm008 img,
.colour_box.palm009 img,
.colour_box.palm010 img {
    display: none !important;
}

/* Hover effects */
.colour_box.palm001:hover,
.colour_box.palm002:hover,
.colour_box.palm003:hover,
.colour_box.palm004:hover,
.colour_box.palm005:hover,
.colour_box.palm006:hover,
.colour_box.palm007:hover,
.colour_box.palm008:hover,
.colour_box.palm009:hover,
.colour_box.palm010:hover {
    transform: scale(1.05) !important;
}

/* OLD WEBSITE EXACT POSITIONING */
.colour_box.palm001 {
    background-position: -162px 0px !important;
    /* Anthracite Black */
}

.colour_box.palm002 {
    background-position: -796px 0px !important;
    /* Natural Cast */
}

.colour_box.palm003 {
    background-position: -1108px 0px !important;
    /* Old Pewter */
}

.colour_box.palm004 {
    background-position: -1266px 0px !important;
    /* Pewter */
}

.colour_box.palm005 {
    background-position: -951px 0px !important;
    /* Old Penny */
}

.colour_box.palm006 {
    background-position: -476px 0px !important;
    /* Bronze */
}

.colour_box.palm007 {
    background-position: 0px 0px !important;
    /* Aged Gold */
}

.colour_box.palm008 {
    background-position: -315px 0px !important;
    /* Bright Gold */
}

.colour_box.palm009 {
    background-position: -1426px 0px !important;
    /* Sovereign Gold */
}

.colour_box.palm010 {
    background-position: -634px 0px !important;
    /* Copper */
}

/* Fallback gradients if spritesheet doesn't load */
.colour_box.palm001 {
    background-image: url('https://budgetradiators.co.uk/image/catalog/metallic-finishes/spritesheet.jpg'), linear-gradient(135deg, #2C2C2C 0%, #1A1A1A 50%, #0F0F0F 100%) !important;
}

.colour_box.palm002 {
    background-image: url('https://budgetradiators.co.uk/image/catalog/metallic-finishes/spritesheet.jpg'), linear-gradient(135deg, #4A4A4A 0%, #3A3A3A 50%, #2A2A2A 100%) !important;
}

.colour_box.palm003 {
    background-image: url('https://budgetradiators.co.uk/image/catalog/metallic-finishes/spritesheet.jpg'), linear-gradient(135deg, #6B6B6B 0%, #5A5A5A 50%, #4A4A4A 100%) !important;
}

.colour_box.palm004 {
    background-image: url('https://budgetradiators.co.uk/image/catalog/metallic-finishes/spritesheet.jpg'), linear-gradient(135deg, #A8A8A8 0%, #8A8A8A 50%, #6A6A6A 100%) !important;
}

.colour_box.palm005 {
    background-image: url('https://budgetradiators.co.uk/image/catalog/metallic-finishes/spritesheet.jpg'), linear-gradient(135deg, #8B4513 0%, #A0522D 50%, #CD853F 100%) !important;
}

.colour_box.palm006 {
    background-image: url('https://budgetradiators.co.uk/image/catalog/metallic-finishes/spritesheet.jpg'), linear-gradient(135deg, #CD7F32 0%, #B8860B 50%, #A0522D 100%) !important;
}

.colour_box.palm007 {
    background-image: url('https://budgetradiators.co.uk/image/catalog/metallic-finishes/spritesheet.jpg'), linear-gradient(135deg, #DAA520 0%, #B8860B 50%, #8B7355 100%) !important;
}

.colour_box.palm008 {
    background-image: url('https://budgetradiators.co.uk/image/catalog/metallic-finishes/spritesheet.jpg'), linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%) !important;
}

.colour_box.palm009 {
    background-image: url('https://budgetradiators.co.uk/image/catalog/metallic-finishes/spritesheet.jpg'), linear-gradient(135deg, #D4AF37 0%, #B8860B 50%, #9B7653 100%) !important;
}

.colour_box.palm010 {
    background-image: url('https://budgetradiators.co.uk/image/catalog/metallic-finishes/spritesheet.jpg'), linear-gradient(135deg, #B87333 0%, #A0522D 50%, #8B4513 100%) !important;
}

/* Remove fallback styling since we're using spritesheet */
.colour_box.palm001 img[src=""],
.colour_box.palm002 img[src=""],
.colour_box.palm003 img[src=""],
.colour_box.palm004 img[src=""],
.colour_box.palm005 img[src=""],
.colour_box.palm006 img[src=""],
.colour_box.palm007 img[src=""],
.colour_box.palm008 img[src=""],
.colour_box.palm009 img[src=""],
.colour_box.palm010 img[src=""] {
    display: none !important;
}



/* Palm finish descriptions */
.finish_container.palm .finish_description {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-align: center !important;
    line-height: 1.2 !important;
    max-width: 120px !important;
    margin: 10px auto 0 !important;
}

/* ===== RAL COLOUR FINISHES STYLES ===== */
.color_groups {
    margin-bottom: 15px;
}

.color_groups .nav-tabs {
    border-bottom: 2px solid #ddd;
    margin-bottom: 15px;
}

.color_groups .nav-tabs li {
    margin-right: 3px;
}

.color_groups .nav-tabs li a {
    font-weight: 600;
    padding: 10px 15px;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    transition: all 0.3s ease;
    background: #f1f1f1;
    font-size: 14px;
}

.color_groups .nav-tabs li a:hover {
    background-color: #e6e6e6;
    border-color: #ddd;
}

.color_groups .nav-tabs li.active a {
    background-color: #ffffff;
    border-color: #d4d3d3 #d4d3d3 transparent;
    color: #333;
}

/* Color Swatches Container */
.color-swatches-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    padding: 0;
}

.finish_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0;
}

/* Base Color Box Styling - THIS IS THE KEY FIX */
[class*="colour_box"] {
    width: 100% !important;
    height: 40px !important;
    border-radius: 5% !important;
    border: 2px solid #ddd !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin: 0 auto 5px !important;
    display: block !important;
}

[class*="colour_box"]:hover {
    transform: scale(1.2) !important;
}

.finish_description {
    font-size: 12px;
    color: #666;
    font-weight: 600;
    height: 40px;
    margin-top: 3px;
    line-height: 1.2;
    max-width: 80px;
    word-wrap: break-word;
}

/* RAL Color Definitions - Using attribute selectors for exact matching */
[class*="colour_boxral1000"] {
    background-color: #BEBD7F !important;
}

[class*="colour_boxral1001"] {
    background-color: #C2B078 !important;
}

[class*="colour_boxral1002"] {
    background-color: #C6A664 !important;
}

[class*="colour_boxral1003"] {
    background-color: #E5BE01 !important;
}

[class*="colour_boxral1004"] {
    background-color: #CDA434 !important;
}

[class*="colour_boxral1005"] {
    background-color: #A98307 !important;
}

[class*="colour_boxral1006"] {
    background-color: #E4A010 !important;
}

[class*="colour_boxral1007"] {
    background-color: #DC9D00 !important;
}

[class*="colour_boxral1011"] {
    background-color: #8A6642 !important;
}

[class*="colour_boxral1012"] {
    background-color: #C7B446 !important;
}

[class*="colour_boxral1013"] {
    background-color: #EAE6CA !important;
}

[class*="colour_boxral1014"] {
    background-color: #E1CC4F !important;
}

[class*="colour_boxral1015"] {
    background-color: #E6D690 !important;
}

[class*="colour_boxral1016"] {
    background-color: #EDFF21 !important;
}

[class*="colour_boxral1017"] {
    background-color: #F5D033 !important;
}

[class*="colour_boxral1018"] {
    background-color: #F8F32B !important;
}

[class*="colour_boxral1019"] {
    background-color: #9E9764 !important;
}

[class*="colour_boxral1020"] {
    background-color: #999950 !important;
}

[class*="colour_boxral1021"] {
    background-color: #F3DA0B !important;
}

[class*="colour_boxral1023"] {
    background-color: #FAD201 !important;
}

[class*="colour_boxral1024"] {
    background-color: #AEA04B !important;
}

[class*="colour_boxral1026"] {
    background-color: #FFFF00 !important;
}

[class*="colour_boxral1027"] {
    background-color: #9D9101 !important;
}

[class*="colour_boxral1028"] {
    background-color: #F4A900 !important;
}

[class*="colour_boxral1032"] {
    background-color: #D6AE01 !important;
}

[class*="colour_boxral1033"] {
    background-color: #F3A505 !important;
}

[class*="colour_boxral1034"] {
    background-color: #EFA94A !important;
}

[class*="colour_boxral1035"] {
    background-color: #6A5D4D !important;
}

[class*="colour_boxral1036"] {
    background-color: #705335 !important;
}

[class*="colour_boxral1037"] {
    background-color: #F39800 !important;
}

/* Orange RAL Colors */
[class*="colour_boxral2000"] {
    background-color: #ED760E !important;
}

[class*="colour_boxral2001"] {
    background-color: #C93C20 !important;
}

[class*="colour_boxral2002"] {
    background-color: #CB2821 !important;
}

[class*="colour_boxral2003"] {
    background-color: #FF7514 !important;
}

[class*="colour_boxral2004"] {
    background-color: #F44611 !important;
}

[class*="colour_boxral2005"] {
    background-color: #FF2301 !important;
}

[class*="colour_boxral2007"] {
    background-color: #FFA420 !important;
}

[class*="colour_boxral2008"] {
    background-color: #F75E25 !important;
}

[class*="colour_boxral2009"] {
    background-color: #F54021 !important;
}

[class*="colour_boxral2010"] {
    background-color: #D84B20 !important;
}

[class*="colour_boxral2011"] {
    background-color: #EC7C26 !important;
}

[class*="colour_boxral2012"] {
    background-color: #E55137 !important;
}

[class*="colour_boxral2013"] {
    background-color: #C35831 !important;
}

/* Red RAL Colors */
[class*="colour_boxral3000"] {
    background-color: #AF2B1E !important;
}

[class*="colour_boxral3001"] {
    background-color: #A52019 !important;
}

[class*="colour_boxral3002"] {
    background-color: #A2231D !important;
}

[class*="colour_boxral3003"] {
    background-color: #9B111E !important;
}

[class*="colour_boxral3004"] {
    background-color: #75151E !important;
}

[class*="colour_boxral3005"] {
    background-color: #5E2129 !important;
}

[class*="colour_boxral3007"] {
    background-color: #412227 !important;
}

[class*="colour_boxral3009"] {
    background-color: #642424 !important;
}

[class*="colour_boxral3011"] {
    background-color: #781F19 !important;
}

[class*="colour_boxral3012"] {
    background-color: #C1876B !important;
}

[class*="colour_boxral3013"] {
    background-color: #A12312 !important;
}

[class*="colour_boxral3014"] {
    background-color: #D36E70 !important;
}

[class*="colour_boxral3015"] {
    background-color: #EA899A !important;
}

[class*="colour_boxral3016"] {
    background-color: #B32821 !important;
}

[class*="colour_boxral3017"] {
    background-color: #E63244 !important;
}

[class*="colour_boxral3018"] {
    background-color: #D53032 !important;
}

[class*="colour_boxral3020"] {
    background-color: #CC0605 !important;
}

[class*="colour_boxral3022"] {
    background-color: #D95030 !important;
}

[class*="colour_boxral3024"] {
    background-color: #F80000 !important;
}

[class*="colour_boxral3026"] {
    background-color: #FE0000 !important;
}

[class*="colour_boxral3027"] {
    background-color: #C51D34 !important;
}

[class*="colour_boxral3028"] {
    background-color: #CB3234 !important;
}

[class*="colour_boxral3031"] {
    background-color: #B32428 !important;
}

[class*="colour_boxral3032"] {
    background-color: #721422 !important;
}

[class*="colour_boxral3033"] {
    background-color: #B44C43 !important;
}

/* Violet RAL Colors */
[class*="colour_boxral4001"] {
    background-color: #6D3F5B !important;
}

[class*="colour_boxral4002"] {
    background-color: #922B3E !important;
}

[class*="colour_boxral4003"] {
    background-color: #DE4C8A !important;
}

[class*="colour_boxral4004"] {
    background-color: #641C34 !important;
}

[class*="colour_boxral4005"] {
    background-color: #6C4675 !important;
}

[class*="colour_boxral4006"] {
    background-color: #A03472 !important;
}

[class*="colour_boxral4007"] {
    background-color: #4A192C !important;
}

[class*="colour_boxral4008"] {
    background-color: #924B6A !important;
}

[class*="colour_boxral4009"] {
    background-color: #A18594 !important;
}

[class*="colour_boxral4010"] {
    background-color: #CF3476 !important;
}

[class*="colour_boxral4011"] {
    background-color: #8673A1 !important;
}

[class*="colour_boxral4012"] {
    background-color: #6C6874 !important;
}

/* Blue RAL Colors */
[class*="colour_boxral5000"] {
    background-color: #354D73 !important;
}

[class*="colour_boxral5001"] {
    background-color: #1F3A93 !important;
}

[class*="colour_boxral5002"] {
    background-color: #20214F !important;
}

[class*="colour_boxral5003"] {
    background-color: #1D1E33 !important;
}

[class*="colour_boxral5004"] {
    background-color: #18171C !important;
}

[class*="colour_boxral5005"] {
    background-color: #1E2460 !important;
}

[class*="colour_boxral5007"] {
    background-color: #3E5F8A !important;
}

[class*="colour_boxral5008"] {
    background-color: #26252D !important;
}

[class*="colour_boxral5009"] {
    background-color: #025669 !important;
}

[class*="colour_boxral5010"] {
    background-color: #0E294B !important;
}

[class*="colour_boxral5011"] {
    background-color: #231A24 !important;
}

[class*="colour_boxral5012"] {
    background-color: #3B83BD !important;
}

[class*="colour_boxral5013"] {
    background-color: #1E213D !important;
}

[class*="colour_boxral5014"] {
    background-color: #606E8C !important;
}

[class*="colour_boxral5015"] {
    background-color: #2271B3 !important;
}

[class*="colour_boxral5017"] {
    background-color: #063971 !important;
}

[class*="colour_boxral5018"] {
    background-color: #3F888F !important;
}

[class*="colour_boxral5019"] {
    background-color: #1B5583 !important;
}

[class*="colour_boxral5020"] {
    background-color: #1D334A !important;
}

[class*="colour_boxral5021"] {
    background-color: #256D7B !important;
}

[class*="colour_boxral5022"] {
    background-color: #252850 !important;
}

[class*="colour_boxral5023"] {
    background-color: #49678D !important;
}

[class*="colour_boxral5024"] {
    background-color: #5D9B9B !important;
}

[class*="colour_boxral5025"] {
    background-color: #2F5F8A !important;
}

[class*="colour_boxral5026"] {
    background-color: #102C54 !important;
}

/* Green RAL Colors */
[class*="colour_boxral6000"] {
    background-color: #316650 !important;
}

[class*="colour_boxral6001"] {
    background-color: #287233 !important;
}

[class*="colour_boxral6002"] {
    background-color: #2D5016 !important;
}

[class*="colour_boxral6003"] {
    background-color: #424632 !important;
}

[class*="colour_boxral6004"] {
    background-color: #1F3A3D !important;
}

[class*="colour_boxral6005"] {
    background-color: #2F4538 !important;
}

[class*="colour_boxral6006"] {
    background-color: #3E3B32 !important;
}

[class*="colour_boxral6007"] {
    background-color: #343B29 !important;
}

[class*="colour_boxral6008"] {
    background-color: #39352A !important;
}

[class*="colour_boxral6009"] {
    background-color: #31372B !important;
}

[class*="colour_boxral6010"] {
    background-color: #35682D !important;
}

[class*="colour_boxral6011"] {
    background-color: #587246 !important;
}

[class*="colour_boxral6012"] {
    background-color: #343E40 !important;
}

[class*="colour_boxral6013"] {
    background-color: #6C7156 !important;
}

[class*="colour_boxral6014"] {
    background-color: #47402E !important;
}

[class*="colour_boxral6015"] {
    background-color: #3B3C36 !important;
}

[class*="colour_boxral6016"] {
    background-color: #1E5945 !important;
}

[class*="colour_boxral6017"] {
    background-color: #4C9141 !important;
}

[class*="colour_boxral6018"] {
    background-color: #57A639 !important;
}

[class*="colour_boxral6019"] {
    background-color: #BDECB6 !important;
}

[class*="colour_boxral6020"] {
    background-color: #2E3A23 !important;
}

[class*="colour_boxral6021"] {
    background-color: #89AC76 !important;
}

[class*="colour_boxral6022"] {
    background-color: #25221B !important;
}

[class*="colour_boxral6024"] {
    background-color: #308446 !important;
}

[class*="colour_boxral6025"] {
    background-color: #3D642D !important;
}

[class*="colour_boxral6026"] {
    background-color: #015D52 !important;
}

[class*="colour_boxral6027"] {
    background-color: #84C3BE !important;
}

[class*="colour_boxral6028"] {
    background-color: #2C5545 !important;
}

[class*="colour_boxral6029"] {
    background-color: #20603D !important;
}

[class*="colour_boxral6032"] {
    background-color: #317F43 !important;
}

[class*="colour_boxral6033"] {
    background-color: #497E76 !important;
}

[class*="colour_boxral6034"] {
    background-color: #7FB5B3 !important;
}

[class*="colour_boxral6035"] {
    background-color: #1C542D !important;
}

[class*="colour_boxral6036"] {
    background-color: #193737 !important;
}

[class*="colour_boxral6037"] {
    background-color: #008F39 !important;
}

[class*="colour_boxral6038"] {
    background-color: #00BB2D !important;
}

/* Gray RAL Colors */
[class*="colour_boxral7000"] {
    background-color: #78858B !important;
}

[class*="colour_boxral7001"] {
    background-color: #8A9597 !important;
}

[class*="colour_boxral7002"] {
    background-color: #7E7B52 !important;
}

[class*="colour_boxral7003"] {
    background-color: #6C7059 !important;
}

[class*="colour_boxral7004"] {
    background-color: #969992 !important;
}

[class*="colour_boxral7005"] {
    background-color: #646B63 !important;
}

[class*="colour_boxral7006"] {
    background-color: #6D6552 !important;
}

[class*="colour_boxral7008"] {
    background-color: #6A5F31 !important;
}

[class*="colour_boxral7009"] {
    background-color: #4D5645 !important;
}

[class*="colour_boxral7010"] {
    background-color: #4C514A !important;
}

[class*="colour_boxral7011"] {
    background-color: #434B4D !important;
}

[class*="colour_boxral7012"] {
    background-color: #4E5754 !important;
}

[class*="colour_boxral7013"] {
    background-color: #464531 !important;
}

[class*="colour_boxral7015"] {
    background-color: #434750 !important;
}

[class*="colour_boxral7016"] {
    background-color: #293133 !important;
}

[class*="colour_boxral7021"] {
    background-color: #23282B !important;
}

[class*="colour_boxral7022"] {
    background-color: #332F2C !important;
}

[class*="colour_boxral7023"] {
    background-color: #686C5E !important;
}

[class*="colour_boxral7024"] {
    background-color: #474A51 !important;
}

[class*="colour_boxral7026"] {
    background-color: #2F353B !important;
}

[class*="colour_boxral7030"] {
    background-color: #8B8C7A !important;
}

[class*="colour_boxral7031"] {
    background-color: #474B4E !important;
}

[class*="colour_boxral7032"] {
    background-color: #B8B799 !important;
}

[class*="colour_boxral7033"] {
    background-color: #7D8471 !important;
}

[class*="colour_boxral7034"] {
    background-color: #8F8B66 !important;
}

[class*="colour_boxral7035"] {
    background-color: #D7D3C1 !important;
}

[class*="colour_boxral7036"] {
    background-color: #7F7679 !important;
}

[class*="colour_boxral7037"] {
    background-color: #7D7F7D !important;
}

[class*="colour_boxral7038"] {
    background-color: #B5B8B1 !important;
}

[class*="colour_boxral7039"] {
    background-color: #6C6960 !important;
}

[class*="colour_boxral7040"] {
    background-color: #9DA1AA !important;
}

[class*="colour_boxral7042"] {
    background-color: #8D948D !important;
}

[class*="colour_boxral7043"] {
    background-color: #4E5452 !important;
}

[class*="colour_boxral7044"] {
    background-color: #CAC4B0 !important;
}

[class*="colour_boxral7045"] {
    background-color: #909090 !important;
}

[class*="colour_boxral7046"] {
    background-color: #82898F !important;
}

[class*="colour_boxral7047"] {
    background-color: #D0D0D0 !important;
}

[class*="colour_boxral7048"] {
    background-color: #898176 !important;
}

/* Brown RAL Colors */
[class*="colour_boxral8000"] {
    background-color: #826C34 !important;
}

[class*="colour_boxral8001"] {
    background-color: #955F20 !important;
}

[class*="colour_boxral8002"] {
    background-color: #6C3B2A !important;
}

[class*="colour_boxral8003"] {
    background-color: #734222 !important;
}

[class*="colour_boxral8004"] {
    background-color: #8E402A !important;
}

[class*="colour_boxral8007"] {
    background-color: #59351F !important;
}

[class*="colour_boxral8008"] {
    background-color: #6F4F28 !important;
}

[class*="colour_boxral8011"] {
    background-color: #5B3A29 !important;
}

[class*="colour_boxral8012"] {
    background-color: #592321 !important;
}

[class*="colour_boxral8014"] {
    background-color: #382C1E !important;
}

[class*="colour_boxral8015"] {
    background-color: #633A34 !important;
}

[class*="colour_boxral8016"] {
    background-color: #4C2F27 !important;
}

[class*="colour_boxral8017"] {
    background-color: #45322E !important;
}

[class*="colour_boxral8019"] {
    background-color: #403A3A !important;
}

[class*="colour_boxral8022"] {
    background-color: #212121 !important;
}

[class*="colour_boxral8023"] {
    background-color: #A65E2E !important;
}

[class*="colour_boxral8024"] {
    background-color: #79553D !important;
}

[class*="colour_boxral8025"] {
    background-color: #755C48 !important;
}

[class*="colour_boxral8028"] {
    background-color: #4E3B31 !important;
}

[class*="colour_boxral8029"] {
    background-color: #763C28 !important;
}

/* White/Black RAL Colors */
[class*="colour_boxral9001"] {
    background-color: #FDF4E3 !important;
}

[class*="colour_boxral9002"] {
    background-color: #E7EBDA !important;
}

[class*="colour_boxral9003"] {
    background-color: #F4F4F4 !important;
}

[class*="colour_boxral9004"] {
    background-color: #282828 !important;
}

[class*="colour_boxral9005"] {
    background-color: #0A0A0A !important;
}

[class*="colour_boxral9006"] {
    background-color: #A5A5A5 !important;
}

[class*="colour_boxral9007"] {
    background-color: #8F8F8F !important;
}

[class*="colour_boxral9010"] {
    background-color: #FFFFFF !important;
}

[class*="colour_boxral9011"] {
    background-color: #1C1C1C !important;
}

[class*="colour_boxral9016"] {
    background-color: #F6F6F6 !important;
}

[class*="colour_boxral9017"] {
    background-color: #1E1E1E !important;
}

[class*="colour_boxral9018"] {
    background-color: #D7D7D7 !important;
}

/* ===== FARROW & BALL COLOURS STYLES ===== */
.farrow-ball-container {
    padding: 20px 0;
}

.farrow-ball-container .nav-tabs {
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
}

.farrow-ball-container .nav-tabs li {
    margin-right: 5px;
}

.farrow-ball-container .nav-tabs li a {
    color: #666;
    font-weight: 600;
    padding: 10px 15px;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    transition: all 0.3s ease;
    background: #f1f1f1;
    font-size: 14px;
}

.farrow-ball-container .nav-tabs li a:hover {
    background-color: #e6e6e6;
    border-color: #ddd;
}

.farrow-ball-container .nav-tabs li.active a {
    background-color: #ffffff;
    border-color: #d4d3d3 #d4d3d3 transparent;
    color: #333;
}

.farrow-ball-color {
    width: 100% !important;
    height: 48px !important;
    border-radius: 4px !important;
    border: 2px solid #ddd !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin: 0 auto 8px !important;
    display: block !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.farrow-ball-color:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;

}

/* Farrow & Ball Color Definitions */
.farrow-ball-color[data-color="pavilion-blue"] {
    background-color: #E8E6D1 !important;
}

.farrow-ball-color[data-color="pale-powder"] {
    background-color: #C8C6B8 !important;
}

.farrow-ball-color[data-color="teresas-green"] {
    background-color: #8AA68F !important;
}

.farrow-ball-color[data-color="green-blue"] {
    background-color: #6B8B7A !important;
}

.farrow-ball-color[data-color="dix-blue"] {
    background-color: #7FB5B3 !important;
}

.farrow-ball-color[data-color="oval-room-blue"] {
    background-color: #6B8CAE !important;
}

.farrow-ball-color[data-color="borrowed-light"] {
    background-color: #E8E6D1 !important;
}

.farrow-ball-color[data-color="skylight"] {
    background-color: #B5B8B1 !important;
}

.farrow-ball-color[data-color="light-blue"] {
    background-color: #D7D3C1 !important;
}

.farrow-ball-color[data-color="parma-gray"] {
    background-color: #C8C6B8 !important;
}

.farrow-ball-color[data-color="lulworth-blue"] {
    background-color: #8AA68F !important;
}

.farrow-ball-color[data-color="cooks-blue"] {
    background-color: #4A6B8A !important;
}

.farrow-ball-color[data-color="blue-ground"] {
    background-color: #8AA68F !important;
}

.farrow-ball-color[data-color="stone-blue"] {
    background-color: #6B8B7A !important;
}

.farrow-ball-color[data-color="pitch-blue"] {
    background-color: #4A5D73 !important;
}

.farrow-ball-color[data-color="drawing-room-blue"] {
    background-color: #354D73 !important;
}

.farrow-ball-color[data-color="hague-blue"] {
    background-color: #1F3A3D !important;
}

.farrow-ball-color[data-color="railings"] {
    background-color: #2F2F2F !important;
}

.farrow-ball-color[data-color="off-black"] {
    background-color: #1C1C1C !important;
}

.farrow-ball-color[data-color="pitch-black"] {
    background-color: #0A0A0A !important;
}

.farrow-ball-color[data-color="cooking-apple-green"] {
    background-color: #57A639 !important;
}

.farrow-ball-color[data-color="calke-green"] {
    background-color: #316650 !important;
}

.farrow-ball-color[data-color="green-ground"] {
    background-color: #2D5016 !important;
}

.farrow-ball-color[data-color="pointing"] {
    background-color: #F4F4F4 !important;
}

.farrow-ball-color[data-color="strong-white"] {
    background-color: #FFFFFF !important;
}

.farrow-ball-color[data-color="elephants-breath"] {
    background-color: #B5B8B1 !important;
}

.farrow-ball-color[data-color="rectory-red"] {
    background-color: #A52019 !important;
}

.farrow-ball-color[data-color="incarnadine"] {
    background-color: #C93C20 !important;
}

.farrow-ball-color[data-color="citron"] {
    background-color: #E5BE01 !important;
}

.farrow-ball-color[data-color="dayroom-yellow"] {
    background-color: #F8F32B !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .color-swatches-container {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 8px;
    }

    .metallic-finishes-container {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 15px;
    }


    .metallic-sample {
        width: 100px;
        height: 60px;
    }

    /* Mobile palm containers */
    .finish_container.palm {
        width: 130px;
        margin: 8px;
    }

    .colour_box.palm001,
    .colour_box.palm002,
    .colour_box.palm003,
    .colour_box.palm004,
    .colour_box.palm005,
    .colour_box.palm006,
    .colour_box.palm007,
    .colour_box.palm008,
    .colour_box.palm009,
    .colour_box.palm010 {
        width: 120px !important;
        height: 130px !important;
        background-size: cover !important;
    }

    /* Mobile positioning - scaled down from old website positions */
    .colour_box.palm001 {
        background-position: -120px 0px !important;
    }

    .colour_box.palm002 {
        background-position: -600px 0px !important;
    }

    .colour_box.palm003 {
        background-position: -840px 0px !important;
    }

    .colour_box.palm004 {
        background-position: -960px 0px !important;
    }

    .colour_box.palm005 {
        background-position: -720px 0px !important;
    }

    .colour_box.palm006 {
        background-position: -360px 0px !important;
    }

    .colour_box.palm007 {
        background-position: 0px 0px !important;
    }

    .colour_box.palm008 {
        background-position: -240px 0px !important;
    }

    .colour_box.palm009 {
        background-position: -1080px 0px !important;
    }

    .colour_box.palm010 {
        background-position: -480px 0px !important;
    }

    /* Mobile metallic rows */
    #MetallicRange .metallic-row {
        margin-bottom: 0px !important;
    }

    /* Remove mobile palm image styles since we're using spritesheet */
    .colour_box.palm001 img,
    .colour_box.palm002 img,
    .colour_box.palm003 img,
    .colour_box.palm004 img,
    .colour_box.palm005 img,
    .colour_box.palm006 img,
    .colour_box.palm007 img,
    .colour_box.palm008 img,
    .colour_box.palm009 img,
    .colour_box.palm010 img {
        display: none !important;
    }

    [class*="colour_box"] {
        width: 20px !important;
        height: 20px !important;
    }

    .farrow-ball-color {
        width: 30px !important;
        height: 30px !important;
    }

    .finish_description,
    .finish-name {
        font-size: 9px;
        max-width: 70px;
    }

    .color_groups .nav-tabs li a,
    .farrow-ball-container .nav-tabs li a {
        padding: 4px 8px;
        font-size: 9px;
    }
}

/* Animation for color selection */
@keyframes colorSelect {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1.2);
    }
}

[class*="colour_box"]:active,
.metallic-sample:active,
.farrow-ball-color:active {
    animation: colorSelect 0.3s ease;
}